Tailwind CSS Class Formatter

This formatter sorts Tailwind CSS utility classes according to the official convention used by prettier-plugin-tailwindcss. The ordering follows a logical structure based on the CSS box model:

1. Layout & Positioning — container, relative, absolute, z-10, block, flex, grid
2. Flexbox & Grid — flex-1, items-center, gap-4, col-span-2
3. Spacing — m-4, p-2, space-x-4
4. Sizing — w-full, h-10, max-w-4xl
5. Typography — text-sm, font-bold, leading-6
6. Backgrounds & Borders — bg-white, rounded-lg, border
7. Effects — shadow-md, opacity-50, blur-sm
8. Transitions & Animations — transition, animate-spin
9. Interactivity & SVG — cursor-pointer, fill-current

Variants are ordered as: no variant → pseudo-class (hover:, focus:) → dark mode (dark:) → responsive breakpoints (sm:, md:, lg:).

1. Paste your HTML or class string — Input can be a full HTML snippet with class="" attributes, or just a space-separated list of classes.
2. Click "Sort Classes" — The tool will parse, sort, and reformat your classes following the official Tailwind class order.
3. Toggle options — Enable "Sort variants" to also order variant prefixes, or "Remove duplicates" to clean up redundant classes.
4. Copy the result — Use the copy button on the output area to copy the formatted result to your clipboard.