Paste your Tailwind CSS utility classes and get them sorted in the recommended order — layout first, effects last. Supports single class strings or multi-element HTML snippets.
Related tools: CSS Variables Generator · CSS Media Query Generator
Input Mode
Paste a space-separated list of Tailwind utility classes.
Results
Before
After
How the Sort Order Works
The sorter follows Tailwind’s recommended class ordering — the same order enforced by the official Prettier plugin for Tailwind CSS:
| Group | Examples |
|---|---|
| Layout | flex, grid, block, hidden, overflow-hidden |
| Positioning | relative, absolute, top-0, z-10 |
| Sizing | w-full, h-16, max-w-md |
| Spacing | p-4, mx-auto, space-x-2 |
| Typography | text-lg, font-bold, leading-tight, text-gray-900 |
| Backgrounds | bg-white, from-blue-500, bg-gradient-to-r |
| Borders | rounded-xl, border, ring-2 |
| Effects | shadow-lg, opacity-75 |
| Transitions | transition, duration-200, ease-in-out |
| Transforms | scale-95, rotate-3, translate-x-1 |
| Interactivity | cursor-pointer, select-none |
Responsive (sm:, md:, lg:) and state (hover:, focus:, dark:) variants are sorted after their base-class group.
Tips
- HTML mode is useful when you paste a full component — every
class="..."attribute is sorted independently. - Remove duplicates is on by default. Turn it off to see the full original class list sorted.
- The sorter works entirely in your browser — no data is sent anywhere.
Related tools: CSS Variables Generator · CSS Media Query Generator