Tailwind Utilities

When to use this skill

• Styling HTML/React components with Tailwind CSS.
• Configuring tailwind.config.js.
• implementing Dark Mode.

1. Structure & Organization

• Ordering: logical ordering (Layout -> Box Model -> Typography -> Visuals -> Misc). Use prettier-plugin-tailwindcss if available.
• Components: Extract long string classes into components (React/Blade) or use @apply sparingly (only for true reusability patterns).

2. Responsive Design

• Mobile First: Write base styles for mobile, then add md:, lg: overrides.
• Arbitrary values: Use [] syntax sparingly (e.g., top-[13px]) only when design system tokens don't suffice.

3. Dark Mode

• Strategy: Use class strategy (toggling a class on html/body) rather than media (auto-detect) for better user control.
• Colors: Use dark:bg-slate-900 or CSS variables for semantic colors (bg-background where background changes based on root theme).