Tailwind CSS Best Practices: cva, twMerge, Design Tokens, and Avoiding Common Mistakes

Tailwind CSS scales well when you use it right and becomes a nightmare when you don't. These are the patterns that keep large codebases maintainable. Mistake 1: Repeating Long Class Strings // Bad -- repeated everywhere <button className='inline-flex items-center justify-center rounded-md text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:opacity-50'> Save </button> // Good -- extract to a component function Button({ children, ...props }) { return ( <button className='inline-flex items-center justify-center rounded-md text-sm font-medium bg-blue-600 text-white hover:bg-blue-700 px-4 py-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:opacity-50' {...props} > {children} </button> ) } Don't use @apply to solve this -- it defeats the purpose of utility classes and makes the output harder t