Does it support the new size utility?

Absolutely. It encourages the use of the 'size-' utility when width and height are equal, reducing code verbosity.

Does it automatically sort my Tailwind classes?

Yes, it enforces a specific priority order—starting with positioning and layout, followed by spacing, borders, and typography—to ensure code consistency.

Can this skill handle dynamic class names?

It identifies unsafe dynamic string interpolation and recommends mapping complete class names to ensure they are correctly detected by the Tailwind compiler.

How does this skill help with Tailwind CSS v4?

It provides specific guidance on the new @theme engine, CSS-based configuration, and breaking changes introduced in version 4.1.

Tailwind CSS Expert

Name: Tailwind CSS Expert
Author: window-ook

bywindow-ook

0•

设计工具

Implements high-performance, responsive UI components using Tailwind CSS v4 best practices and optimized utility patterns.

This skill equips Claude with specialized knowledge of Tailwind CSS v4, ensuring that UI development follows strict utility-first standards. It automatically enforces optimal className ordering, facilitates transitions from v3 to v4 syntax, and implements complex features like responsive design and dark mode using semantic patterns. Whether you are building a new design system or refactoring existing styles, this skill ensures clean, maintainable, and standardized CSS utility usage across your entire frontend project.

主要功能

01Tailwind CSS v4 migration assistance and @theme engine support

02Utility extraction and semantic pattern enforcement via @apply

03Automated className sorting for improved readability and maintenance

04Safe dynamic class mapping to prevent CSS purging issues

05Best practice implementation for responsive design and dark mode

060 GitHub stars

使用场景

01Refactoring legacy CSS into standardized Tailwind utility classes

02Building complex, responsive UI components from scratch

03Upgrading existing projects to Tailwind CSS v4 and the new CSS-based configuration

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add window-ook/claude-code-lab tailwind-css

For use in Claude.ai and ChatGPT

Download Skill