Tailwind CSS Patterns That Actually Scale: cva, cn(), and Design Tokens

Tailwind CSS is fast to write but easy to write badly. After building a dozen production UIs, these are the patterns that produce clean, maintainable Tailwind code. 1. The cn() Utility Is Not Optional Every Tailwind project needs the class composition utility: // src/lib/utils.ts import { type ClassValue , clsx } from " clsx " import { twMerge } from " tailwind-merge " export function cn (... inputs : ClassValue []) { return twMerge ( clsx ( inputs )) } Without twMerge , conflicting classes accumulate: // BAD: both p-4 and p-8 in the class string -- p-4 wins (wrong) < div className = { `p-4 ${ isLarge ? " p-8 " : "" } ` } > // GOOD: twMerge resolves conflicts, p-8 wins when isLarge is true < div className = { cn ( " p-4 " , isLarge && " p-8 " ) } > Without clsx , you get ugly conditional logic: // BAD className = { `base-class ${ condition1 ? " class-a " : "" } ${ condition2 ? " class-b " : "" } ` } // GOOD className = { cn ( " base-class " , condition1 && " class-a " , condition2 && "