Tailwind CSS Best Practices

Tailwind CSS v4 guide organized as modular rules. Covers the utility-first model, @theme variables, responsive/state variants, custom styles, performance, accessibility, and the Figma → Tailwind theme workflow for generating design tokens directly from Figma variables.

ROUTING: Which rule file to load

IF setting up Tailwind or understanding how utility classes work: → Read rules/core-utility-model.md

IF working with theme variables (@theme), design tokens, colors, fonts, spacing: → Read rules/core-theme-variables.md

IF working with responsive design, hover/focus states, dark mode, or custom variants: → Read rules/core-responsive-and-states.md

IF adding custom CSS, component classes, base styles, or custom utilities: → Read rules/core-custom-styles.md