Why is the 'Outside-In' sorting order used?

It follows the natural browser rendering flow (Position > Layout > Box Model > Typography), making it easier for developers to mentally parse how an element is placed and styled.

Does this skill work with CSS-in-JS libraries?

No, Clean Tailwind is specifically optimized for Tailwind CSS utility classes within React or Next.js className attributes.

Does it automatically combine width and height?

Yes, it follows modern Tailwind best practices by converting matching 'w-*' and 'h-*' utilities into the more concise 'size-*' utility.

Will sorting my classes break dynamic styling logic?

The skill is designed to handle template literals and conditional objects (like those used with 'cn' or 'clsx') by sorting static parts while preserving dynamic logic.

Can I use this on shadcn/ui components?

It is generally recommended to avoid refactoring external UI libraries to maintain compatibility with their original documentation, focusing instead on your own custom project components.

Clean Tailwind

Name: Clean Tailwind
Author: window-ook

bywindow-ook

0•

设计工具

Organizes and refactors Tailwind CSS classes in React and Next.js components following a logical visual rendering hierarchy.

Clean Tailwind is a specialized Claude Code skill designed to bring order to messy Tailwind CSS class strings. It enforces a standardized sorting convention that prioritizes visual structure from the outside-in, moving from Positioning and Layout to Spacing, Borders, and Typography. By automating the cleanup of disorganized className strings, it significantly improves codebase readability, reduces friction during UI code reviews, and helps development teams maintain consistent styling patterns across large-scale frontend projects.

主要功能

01Preservation of dynamic logic within template literals and conditional style objects

02Automatic consolidation of width and height into size-* utilities

03Batch workflow optimization for refactoring large directories safely

04Smart placement of conditional modifiers like hover, focus, and responsive breakpoints

050 GitHub stars

06Hierarchical class sorting based on visual rendering (Outside-In principle)

使用场景

01Refactoring long and disorganized Tailwind class strings in legacy React components

02Establishing a unified CSS ordering convention for new team projects

03Cleaning up UI code during the pull request review process to meet style guides

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT

主要功能

01Preservation of dynamic logic within template literals and conditional style objects

02Automatic consolidation of width and height into size-* utilities

03Batch workflow optimization for refactoring large directories safely

04Smart placement of conditional modifiers like hover, focus, and responsive breakpoints

050 GitHub stars

06Hierarchical class sorting based on visual rendering (Outside-In principle)

使用场景

01Refactoring long and disorganized Tailwind class strings in legacy React components

02Establishing a unified CSS ordering convention for new team projects

03Cleaning up UI code during the pull request review process to meet style guides

What are Skills?·How to Install

Install with 🐟 Skill.Fish

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

For use in Claude.ai and ChatGPT