Why does it suggest size- instead of w- and h-?

In Tailwind v4, the size utility is preferred when width and height are identical to reduce code verbosity and improve readability.

How does the className ordering work?

It follows a logical priority: Position → Layout → Spacing → Borders → Background → Flex/Grid → Typography → Animations → Transitions.

Does it support dynamic class names?

It enforces the best practice of using complete, map-based class names to ensure the Tailwind compiler correctly detects all used utilities.

Is this skill compatible with Tailwind CSS v4?

Yes, this skill is specifically optimized for version 4.1 (January 2026) and includes guidance on the latest features like CSS-based themes.

Can this help with Tailwind v3 to v4 migration?

Absolutely. It identifies deprecated features like tailwind.config.js and guides you toward the new @theme directive and CSS variables.

Tailwind CSS v4 Best Practices

Name: Tailwind CSS v4 Best Practices
Author: window-ook

bywindow-ook

0•

디자인 도구

Enforces modern Tailwind CSS v4 styling patterns and standardized utility class ordering for cleaner frontend code.

This Claude Code skill serves as a specialized guide for implementing Tailwind CSS v4, focusing on performance, maintainability, and the latest framework standards. It helps developers maintain a strict className order priority, correctly implement the new @theme directive, and transition seamlessly from v3 by highlighting breaking changes. Whether you're building responsive layouts or complex dark mode interfaces, this skill ensures your utility-first CSS follows production-grade patterns.

주요 기능

01Strict patterns for dynamic class handling and theme variables

02Enforcement of the size- utility for improved code conciseness

030 GitHub stars

04Automated migration guidance for Tailwind CSS v4 breaking changes

05Standardized className ordering based on property priority

06Native support for v4 CSS-based configuration and @theme directives

사용 사례

01Refactoring existing components to follow Tailwind v4 best practices

02Migrating CSS-in-JS or legacy styling to a utility-first architecture

03Standardizing class ordering across a large team to improve code reviews

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

주요 기능

01Strict patterns for dynamic class handling and theme variables

02Enforcement of the size- utility for improved code conciseness

030 GitHub stars

04Automated migration guidance for Tailwind CSS v4 breaking changes

05Standardized className ordering based on property priority

06Native support for v4 CSS-based configuration and @theme directives

사용 사례

01Refactoring existing components to follow Tailwind v4 best practices

02Migrating CSS-in-JS or legacy styling to a utility-first architecture

03Standardizing class ordering across a large team to improve code reviews

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