Formatter

Class Sorter

Sort Tailwind CSS classes in a consistent order

Input Classes

Add or paste your Tailwind classes above to sort them

Sorted Classes
flex justify-center items-center w-full p-4 text-white font-bold bg-blue-500 rounded-lg shadow-lg md:p-6 hover:bg-blue-600
Sort Order Visualization

Before

p-4flexbg-blue-500text-whiterounded-lgjustify-centeritems-centerfont-boldhover:bg-blue-600md:p-6shadow-lgw-full

After

flexjustify-centeritems-centerw-fullp-4text-whitefont-boldbg-blue-500rounded-lgshadow-lgmd:p-6hover:bg-blue-600
Sorting Order Reference

1. Layout

container, position, z-index, display

2. Flexbox/Grid

flex-direction, justify, align, gap

3. Sizing

width, height, min/max

4. Spacing

padding, margin, space

5. Typography

font, text, leading, tracking

6. Visual

background, border, shadow, effects