How does Clean Tailwind determine the class order?

It follows a strict visual rendering hierarchy: Position → Layout → Spacing → Borders → Backgrounds → Flex/Grid → Typography → Animations → Transitions.

Can I use this on external libraries like shadcn/ui?

It is generally recommended to avoid using this skill on external library components or Radix-based UI kits to preserve their specific internal styling requirements.

Does it support Tailwind shorthand classes?

Yes, the skill automatically identifies redundant pairs like 'w-8 h-8' and consolidates them into the modern 'size-8' shorthand for cleaner code.

Does it work with dynamic classes and template literals?

Yes, it intelligently handles template literals by sorting the static portions while maintaining the relative position of dynamic expressions within their logical categories.

Clean Tailwind CSS

Name: Clean Tailwind CSS
Author: window-ook

bywindow-ook

0•

Design Tools

Organizes and refactors Tailwind CSS class strings in React and Next.js components following a consistent visual hierarchy.

Clean Tailwind is a specialized Claude Code skill designed to solve the problem of disorganized and unreadable className strings in modern web projects. It automates the refactoring of Tailwind CSS classes by applying a strict visual rendering order—starting from positioning and layout and moving inward to spacing, borders, and typography. This skill ensures that team codebases remain consistent, improves maintainability, and provides smart handling for dynamic template literals and responsive modifiers without breaking existing styling logic.

Key Features

01Smart Modifier Grouping (hover:, focus:, responsive breakpoints)

02Redundant Class Optimization (e.g., converting w/h to size-*)

030 GitHub stars

04Visual Hierarchy Ordering (Outside → Inside → Content)

05Safe Refactoring for React and Next.js Environments

06Dynamic Template Literal and Conditional Object Support

Use Cases

01Refactoring long, disorganized className strings for better readability

02Standardizing CSS ordering conventions during team code reviews

03Optimizing legacy Tailwind components for modern shorthand standards

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

Download Skill