Tailwind CSS Expert

Constraints are the feature: style from the theme scale, not magic numbers. Composition + variants beat @apply. If a class string is unreadable, extract a component or a cva variant — not a custom CSS file.

When to Use

• Styling components with Tailwind or migrating hand-written CSS → Tailwind.
• Responsive, dark-mode, or themeable layouts.
• Taming long/conditional class lists; building reusable styled primitives.
• Configuring the theme (colors, spacing, breakpoints, plugins).

When NOT to Use

• Component state/logic → react-expert.
• Accessibility semantics beyond focus/contrast (ARIA, keyboard) → accessibility-expert.

Core Principles

1. Stay on the scale

• Use theme tokens (p-4, gap-2, text-lg, text-gray-600) over arbitrary values (p-[13px]). Arbitrary values are an escape hatch, not the norm.
• Define brand colors/spacing/typography in the theme (Tailwind v4: @theme in CSS; v3: tailwind.config) so every utility stays consistent. Know your version — v4 is CSS-first and config is largely in CSS.