u/Electronic-Stick7492

A few days ago I posted tw-variant here and found an issue - the library generated classes at runtime which meant Tailwind's scanner never saw them at build time. That was my mistake cause I didn't mentioned properly in the readme.

I went back, fixed it properly, and it's ready now.

The new version ships an extractor that scans your source files for all tv() calls at build time and writes every expanded class to a file that Tailwind scans. No runtime generation, no scanning problem.

Proper plugins for Next.js and Vite run the extractor automatically, no separate terminal, no extra scripts. Setup is 3 steps.

For the next version I'm working on removing the generated file entirely, making setup even simpler. Would appreciate another look from those who tried it before and also if you haven't : )

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

I kept ending up with Tailwind class strings that looked like this:

className="px-4 py-2 rounded hover:bg-blue-500 hover:text-white hover:shadow-lg focus:ring-2 focus:ring-offset-2 focus:outline-none active:scale-95"

After doing this repeatedly across components, I made a tiny utility called tw-variant to group variant prefixes automatically.

Example:

import { tv } from "tw-variant"

const buttonStyles = tv({
  base: "px-4 py-2 rounded font-medium transition-all",
  hover: "bg-blue-500 text-white shadow-lg",
  focus: "ring-2 ring-offset-2 outline-none",
  active: "scale-95",
  dark: "bg-gray-900 text-white"
})

Generated output:

"px-4 py-2 rounded font-medium transition-all hover:bg-blue-500 hover:text-white hover:shadow-lg focus:ring-2 focus:ring-offset-2 focus:outline-none active:scale-95 dark:bg-gray-900 dark:text-white"

Why I made it:

• reduces repeated hover: / focus: / dark: prefixes
• keeps Tailwind class strings easier to read
• works with any Tailwind variant
• tiny + zero dependencies
• full TypeScript support

Works nicely alongside clsx, cn, or tailwind-merge.

import clsx from "clsx"

className={clsx(
  tv({
    hover: "shadow-lg",
    focus: "ring-2",
    dark: "bg-gray-900"
  }),
  isDisabled && "opacity-50"
)}

Install:

npm install tw-variant

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

Would genuinely love feedback/suggestions/improvements.