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-600Sort Order Visualization
Before
p-4flexbg-blue-500text-whiterounded-lgjustify-centeritems-centerfont-boldhover:bg-blue-600md:p-6shadow-lgw-fullAfter
flexjustify-centeritems-centerw-fullp-4text-whitefont-boldbg-blue-500rounded-lgshadow-lgmd:p-6hover:bg-blue-600Sorting 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