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•

Design Tools

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.

Key Features

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)

Use Cases

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

Key Features

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)

Use Cases

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