Can this skill help me organize messy utility classes?

Absolutely. It enforces consistent class ordering (compatible with Prettier) and provides patterns for grouping classes by category.

How does it help with CSS bundle size?

It provides rules to prevent arbitrary value bloat by encouraging the design scale and offers strategies for purging and deduplicating classes.

Does it provide help for building accessible components?

Yes, the skill includes high-priority rules for focus-visible states, screen-reader-only labels, and respecting user motion preferences.

Does this skill support the latest Tailwind CSS v4 features?

Yes, it includes specific guidance for Tailwind v4, including the CSS-first configuration, @theme directives, and OKLCH color system.

Tailwind CSS Best Practices

Name: Tailwind CSS Best Practices
Author: ng-hai

byng-hai

•

Herramientas de Diseño

Optimizes Tailwind CSS implementations through best-practice patterns, performance tuning, and seamless v4 migrations.

This skill provides Claude with a comprehensive framework for writing, reviewing, and refactoring Tailwind CSS code according to modern industry standards. It covers critical areas such as CSS-first configuration, bundle performance optimization by minimizing arbitrary values, and efficient component extraction using tailwind-variants. Whether you are migrating from Tailwind v3 to v4, implementing mobile-first layouts, or ensuring high-contrast accessibility, this skill provides domain-specific rules to maintain a clean and scalable utility-first codebase.

Características Principales

014 GitHub stars

02Advanced component extraction techniques using tailwind-variants and tailwind-merge

03Performance optimization via design scale enforcement and class deduplication

04Standardized utility class ordering and semantic dark mode patterns

05Tailwind v4 migration and CSS-first configuration guidance

06Built-in accessibility checks for focus-visible, motion, and high contrast

Casos de Uso

01Auditing existing utility-first codebases for performance bottlenecks and accessibility gaps

02Migrating legacy Tailwind v3 projects to the modern v4 engine and @theme directive

03Refactoring complex component styles into maintainable, multi-variant design systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ng-hai/dotclaude tailwind-best-practices

For use in Claude.ai and ChatGPT

Download Skill