tailwind

Use CVA (class-variance-authority) to define base styles plus named variant groups like variant and size, which gives TypeScript inference for props. If the package is not installed, use an exhaustive Record<Variant, string> map with complete literal class strings instead.

Tailwind scans source files as plain text and never evaluates code, so class names built by interpolation like `bg-${color}-600` are never generated. Map each dynamic value to a complete literal class string in your source instead of using a safelist.

Tailwind 3 uses a tailwind.config file with @tailwind directives and theme.extend tokens, while Tailwind 4 is CSS-first using @import "tailwindcss" and @theme blocks with automatic source detection. Always read the installed version before writing syntax since the two are not interchangeable.

In Tailwind 3, set darkMode to "class" in the config and redefine CSS variables under a .dark selector. In Tailwind 4, use @custom-variant for the dark selector and @theme inline so utilities follow runtime-switching CSS variables.

Use CVA when the project already installs class-variance-authority or when a component has several independent variant axes like variant plus size. Otherwise use an exhaustive Record<Variant, string> map, which is the dependency-free equivalent and also keeps class names literal.

Use a cn() helper combining clsx for conditional classes and tailwind-merge to resolve conflicts so later classes win. Without those dependencies, join strings with plain JavaScript but ensure the joined strings do not set the same property twice.