cn-variants – Tailwind CSS variants in 3 lines of code

Show HN: cn-variants – Tailwind CSS variants in 3 lines of code

cn-variants – Tailwind CSS variants in 3 lines of code operates in show hn launch.

Profile

I use Tailwind with React and kept copying the same tiny pattern across projects: a cn helper (clsx + tailwind-merge) and a typed Record lookup for variant classes.Eventually I put it in a package so I'd stop repeating myself. It exports cn and variants, a function that takes a map of variant name to classes and returns a typed lookup. Compound variants are just conditionals inside cn(). It doesn't try to replace cva or tailwind-variants. Those are great if you need defaultVariants, slots, or responsive variants. This is just the subset I actually reach for in practice.Happy to hear what others think or if I'm missing something obvious.

As a business in show hn launch, cn-variants – Tailwind CSS variants in 3 lines of code is listed here with the public details available about it.

The company is listed at the Show HN launch stage of development.

Website: npmx.dev/package/cn-variants