Tailwind CSS Class Formatter

Automatically sort your Tailwind CSS utility classes in the correct order. Paste HTML or plain class strings and format instantly.

  1. Home
  2. Tailwind
  3. Class Formatter
Example
0 chars | 0 lines
0 chars | 0 lines

How the Class Order Works

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-base, 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:).

How to Use

  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.

Frequently Asked Questions

What class ordering does this tool use?

It follows the same ordering as prettier-plugin-tailwindcss, which is based on Tailwind CSS's internal plugin registration order. Layout classes come first, followed by flexbox/grid, spacing, sizing, typography, backgrounds, borders, effects, transitions, and interactivity.

Does it work with complex HTML?

Yes. It parses all class="..." attributes in your HTML and sorts each one independently, handling multiple elements, nested tags, and various attribute quoting styles.

Can I just paste a plain list of classes?

Absolutely. If your input doesn't contain HTML tags, the tool treats it as a plain space-separated list of classes and sorts them directly.

Is my code sent to a server?

No. Everything runs entirely in your browser. Your code never leaves your device. This tool is 100% client-side.

Related Tailwind Tools

Tailwind Class Explorer

Search & filter utility classes

Try it

TW to CSS Converter

Convert TW classes to vanilla CSS

Try it

Component Builder

Build components visually

Try it

Color Palette Generator

Generate Tailwind color palettes

Try it