Tailwind CSS v4 Best Practices

Use Tailwind utilities first. Abstract only when variants justify it.

Goal

Keep styling local, explicit, accessible, and easy to change.

Rules

• Use utility classes directly for simple components.
• Use CVA when a component has 3+ variants and needs type-safe props.
• Use tailwind-variants for slots, compound parts, or complex design systems.
• Avoid @apply for component styles.
• Use @theme for design tokens.
• Use data attributes for component state.
• Keep one styling approach per component family.
• Preserve accessibility on interactive elements.