u/Electronic-Stick7492

tw-variant has now 2K+ monthly downloads
▲ 2 r/css+1 crossposts

tw-variant has now 2K+ monthly downloads

I launched tw-variant, a few weeks back, posted on reddit, but the initial was a blunder, but then re-worked on it, and launched it again. And, 2 weeks later, it has 2K+ monthly downloads.

If, you don't know, tw-variant is a package that helps making tailwind classes more readable and composable, by solving the repeating prefix mess.

So, if you work on tailwind, do give it a try : )

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

https://preview.redd.it/rkowxoivxh2h1.png?width=927&format=png&auto=webp&s=244d674c558763f53963c021523dff16e0632bd4

reddit.com
u/Electronic-Stick7492 — 21 hours ago
▲ 2 r/css+1 crossposts

tw-variant is now production-ready

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

u/Electronic-Stick7492 — 6 days ago
▲ 0 r/css+1 crossposts

Got tired of writing hover:, group: repeatedly in Tailwind, so I made this

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.

u/Electronic-Stick7492 — 10 days ago