tailwind-guidelines
Installation
SKILL.md
Tailwind CSS Guidelines
Overview
Foundational Tailwind CSS guidelines for utility-first styling. Covers class composition, responsive design, dark mode, color systems, typography, spacing, state variants, and Tailwind v4 changes. Prioritize utility classes over custom CSS, compose with clsx/tw-merge, and follow mobile-first responsive patterns.
Utility-First Methodology
| Rule | Detail |
|---|---|
| Default to utilities | Write className="mt-4 text-sm font-medium" before reaching for custom CSS |
| Custom CSS only for complex selectors | Animations, ::before/::after, or styles utilities cannot express |
Never use @apply in components |
Defeats utility-first purpose; use clsx/tw-merge composition instead |
@apply only in base layer |
Acceptable for resetting third-party styles or global typography |
| One semantic class per component | Extract via component abstraction, not CSS abstraction |