tailwindlisted

# Tailwind CSS Tailwind works well at scale only with two things in place: a **design system of consistent tokens** and a **component-based architecture**. Most Tailwind pain — unreadable class soup, inconsistent spacing, forgotten dark mode — traces back to missing one of them. This skill enforces both, plus dark mode, responsive, and accessibility as defaults rather than afterthoughts. Tailwind **styles**; it does **not** position floating UI. For dropdowns, tooltips, and popovers that must stay on-screen, see the companion [popovers-tooltips](../popovers-tooltips/SKILL.md) skill. ## The golden rules 1. **No plain CSS.** Style through Tailwind utilities, or `@apply` inside a component layer. Don't hand-write raw CSS properties. 2. **No inline styles.** Never use the `style` attribute. If Tailwind lacks a utility, extend the config. 3. **Reuse components first.** Before adding classes to a new element, check whether an existing partial, component, or shared pattern already handles it. 4. **Design tokens over magic numbers.** Use the colors, spacing, and sizes from your config — not arbitrary values like `bg-[#3b82f6]` or `p-[13px]`. 5. **Every UI works in light and dark mode.** No exceptions. 6. **Every UI is responsive.** No exceptions. --- ## Design system: theme configuration The single source of truth for visual decisions is the Tailwind theme (`tailwind.config.js`, or `@theme` in CSS for Tailwind v4). Colors, spacing, and breakpoints come from there — not from ar