A package for grouping variants together

[KushalXCoder]

I faced a small issue of writing hover:, focus:, etc. repeatedly in a classname. Like, we have tw-merge for resolving classnames, clsx for conditional rendering, so why not something for this issue. Then I also came across a past dicussion post, regarding the same issue.

So, built tw-variant, it just solves this issue, with minimal dependency and easy setup. Do check it out and share your reviews too : )

An example of it's usage :-

import { tv } from "tw-variant";

const buttonStyles = tv({
  base: "px-4 py-2 rounded font-medium",
  hover: "bg-blue-600 shadow-lg",
  focus: "ring-2 ring-offset-2",
  active: "scale-95",
  groupHover: "opacity-90"
});

<button className={buttonStyles}>Click me</button>

So, it's useful for writing cleaner and composable classname for components.

NPM :- https://www.npmjs.com/package/tw-variant
Github :- https://github.com/KushalXCoder/tw-variant