Tailwind Design System

Core Workflow

1. Identify Tailwind version, framework, styling architecture, component library, token source, and build setup.
2. Inspect existing patterns before adding new utilities, colors, spacing, shadows, or radii.
3. Define design tokens and component variants before one-off class strings multiply.
4. Use complete static class names where Tailwind must detect utilities. Avoid dynamic string construction that the compiler cannot see.
5. Keep responsive, state, dark-mode, and data/ARIA variants predictable.
6. Verify production CSS generation and visual output in the browser.

Design System Priorities

• Tokens: colors, typography, spacing, radius, shadows, borders, z-index, motion, and breakpoints should be deliberate.
• Components: define variants for buttons, inputs, cards, nav, modals, tables, badges, alerts, and menus.
• Consistency: prefer shared component APIs or variant helpers over repeated ad hoc class clusters.
• Responsiveness: design mobile, tablet, and desktop behavior explicitly.
• Accessibility: preserve focus styles, contrast, hit targets, disabled states, and semantic HTML.
• Production: make sure Tailwind can detect classes and avoid shipping accidental unused CSS.