Tailwind Utilities
When to use this skill
-
Styling HTML/React components with Tailwind CSS.
-
Configuring tailwind.config.js .
-
implementing Dark Mode.
- 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).
- 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.
- 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).