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

Name: Cn-variants – Tailwind CSS variants in 3 lines of code
Availability: InStock
Author: bastianplsfix

by bastianplsfix·Mar 16, 2026·1 point·0 comments

Visit Project View on HN

AI Analysis

●MidCozySolve My Problem

Minimalist cva alternative that splits variants into standalone typed functions.

Strengths

•Splits variants into standalone functions, avoiding monolithic config objects.
•Type inference uses a frozen .options trick to preserve variant keys.
•Zero config setup, just install and import cn plus variants helpers.

Weaknesses

•Hard to justify switching from cva given its massive ecosystem.
•Lacks features like defaultVariants or slots that complex components need.

Post Description

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.