Implements production-grade Tailwind CSS styling following industry best practices and modern v4 standards.
This skill equips Claude with specialized knowledge for writing clean, performant, and accessible Tailwind CSS code. It enforces critical 'Never' rules—such as avoiding dynamic class construction to ensure compiler compatibility—and utilizes the cn() utility for safe class merging. Whether you are migrating from Tailwind v3 to v4, implementing complex dark mode transitions, or building mobile-first responsive interfaces, this skill ensures your styling remains consistent with project conventions while preventing common anti-patterns that lead to broken builds or inaccessible UI.
主な機能
01Standardized class composition using tailwind-merge and clsx patterns for conflict resolution.
024 GitHub stars
03Prevention of dynamic class name anti-patterns to ensure reliable compiler extraction.
04Comprehensive guidance for mobile-first responsive design and CSS variable-based theming.
05Automatic detection and adaptation between Tailwind CSS v3 and v4 configurations.
06Built-in accessibility enforcement including screen reader support and focus-visible states.
ユースケース
01Refactoring legacy CSS or Bootstrap styles into optimized Tailwind utility classes with proper token usage.
02Building accessible and responsive UI components in modern frameworks like React, Vue, or Svelte.
03Upgrading existing web projects to Tailwind CSS v4 while maintaining design system consistency.
