tailwindlisted

# 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` **IF optimizing build size, purging unused classes, or configuring content detection:** → Read `rules/perf-purging-and-scanning.md` **IF working on accessibility or dark mode strategies:** → Read `rules/a11y-and-dark-mode.md` **IF translating Figma variables/design tokens into Tailwind v4 theme CSS:** → Read `rules/figma-to-theme-workflow.md` + see `figma-tokens/` templates ## Rule index | Topic | Description | File | |-------|-------------|------| | Sections overview | Categories and reading order | [rules/_sections.md](rules/_sections.md) | | Utility model | Utility-first principles, composing classes, arbitrary values | [rules/core-utility-model.md](ru