Skip to main content
Back to Tools
Web Tools

Tailwind CSS Class Sorter

Sort Tailwind CSS classes by the official recommended category order. Deduplicate classes, view category breakdowns, and maintain consistent class ordering. Runs entirely in your browser — your data never leaves your machine.

tailwind css sorter formatter utility-classes code-quality

Published May 29, 2026

All interactive tools run entirely in your browser. Your data never leaves your device.

How It Works

Paste your Tailwind CSS classes and get them sorted by the official recommended category order: Layout, Flexbox & Grid, Spacing, Sizing, Typography, Backgrounds, Borders, Effects, Filters, Transitions, Transforms, Interactivity, SVG, and Accessibility. Duplicate classes are automatically removed.

Features

  • Official sort order: follows the Tailwind CSS Prettier plugin ordering convention
  • 15 categories: Layout, Flexbox & Grid, Spacing, Sizing, Typography, Backgrounds, Borders, Effects, Filters, Tables, Transitions & Animation, Transforms, Interactivity, SVG, Accessibility
  • Responsive prefix support: sm:, md:, lg:, xl:, 2xl: prefixes sorted by base utility
  • State variant support: hover:, focus:, active:, etc. prefixes handled correctly
  • Duplicate removal: toggle automatic deduplication on/off
  • Category breakdown: visual display showing which classes belong to each category
  • 5 example class lists: card, button, responsive, duplicates, mixed utilities
  • Private: runs entirely in the browser — no data transmitted

Use Cases

  • Maintaining consistent class ordering in your components
  • Cleaning up messy Tailwind class lists from prototyping
  • Removing duplicate utility classes
  • Understanding which category each utility belongs to