Utility classes and component boundaries
Tailwind works best when styling is colocated with reusable UI components. A React button, Vue card, Blade alert or Svelte navigation component can own its visual class composition.
Variants belong to the component API
If a component supports primary, secondary and danger variants, define those states explicitly rather than letting every caller construct arbitrary combinations.
Keep content and styling flexible
Components should expose meaningful properties such as variant, size and disabled while keeping the underlying utility choices centralized.
ADVERTISEMENT