Will it break my dynamic template literals or conditional classes?

No, the skill is designed to sort static class parts while maintaining the original placement and logic of dynamic template literals and conditional objects.

Does it support the Tailwind size-* shorthand?

Yes, it automatically identifies matching width and height classes (e.g., w-8 h-8) and consolidates them into the modern size-* shorthand (e.g., size-8).

How does Clean Tailwind decide the order of classes?

It follows a visual rendering hierarchy: Custom CSS > Position > Layout > Spacing > Borders > Background > Flex/Grid > Typography > Animations > Modifiers.

Is it safe to use on UI libraries like shadcn/ui?

It is recommended to exclude external library components and focus on your project's internal components to avoid interfering with third-party styling logic.

Clean Tailwind CSS

Name: Clean Tailwind CSS
Author: window-ook

bywindow-ook

0•

Design Tools

Organizes and refactors Tailwind CSS class strings into a consistent, readable order based on visual rendering principles.

Clean Tailwind is a specialized code quality tool designed to bring order to chaotic Tailwind CSS class strings in React and Next.js projects. By following a logical hierarchy—moving from outside-in (Position → Layout → Spacing → Typography)—it transforms disorganized className strings into standardized code. This skill is particularly useful for teams looking to enforce CSS conventions, reduce code review friction, and maintain large-scale frontend architectures where Tailwind strings can otherwise become unmanageable.

Key Features

01Logical class sorting (Position > Layout > Spacing > Typography)

02Template literal and dynamic class expression support

03Context-aware placement of hover, focus, and responsive modifiers

040 GitHub stars

05Safe refactoring for large-scale batch workflows

06Automatic size-* shorthand optimization for width and height

Use Cases

01Standardizing Tailwind class order across a legacy React codebase

02Cleaning up long, disorganized className strings during code reviews

03Establishing consistent CSS ordering conventions for new Next.js projects

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