Tailwind Class Sorter

Sort Tailwind CSS classes in the recommended order (matches Prettier plugin).

Input Classes

16 classes

Sorted Output

flex items-center px-6 py-3 space-x-2 hover:text-cyan-300 text-white bg-slate-900/70 hover:bg-cyan-400/15 rounded-lg border border-slate-700/70 hover:border-cyan-400/60 transition-all duration-300 hover:scale-105

As JSX

JSX

<div className="flex items-center px-6 py-3 space-x-2 hover:text-cyan-300 text-white bg-slate-900/70 hover:bg-cyan-400/15 rounded-lg border border-slate-700/70 hover:border-cyan-400/60 transition-all duration-300 hover:scale-105">
  {/* Content */}
</div>

Sorting Order

1.Layout

2.Flexbox/Grid

3.Spacing

4.Sizing

5.Typography

6.Backgrounds

7.Borders

8.Effects

9.Filters

10.Transitions

11.Transforms

12.Interactivity

Frequently Asked Questions

Yes, completely free with no sign-up required. Sort as many class lists as you need for your projects.

No, all sorting happens in your browser. Your code never leaves your device, ensuring complete privacy.

Copy the className string from your React/JSX component or HTML element and paste it into the input field. Select your preferred sorting method - the official Tailwind recommended order, alphabetical sorting, or group by utility type (layout, typography, colors, etc.). View your classes automatically reorganized according to the selected method for improved readability. Click copy to get the sorted class string and replace your original className. For automatic sorting in your editor, consider installing the Prettier plugin for Tailwind CSS.

Yes! Install the official Prettier plugin for Tailwind CSS to automatically sort classes on save. This tool helps you learn the ordering system.

Was this helpful?

Related Tools

CSS to Tailwind

Convert CSS styles to Tailwind utility classes

Tailwind Color Shades

Generate full 50-950 color scale from any color

Gradient Generator

Create beautiful CSS gradients with modern color spaces and Tailwind export

<div className="flex items-center px-6 py-3 space-x-2 hover:text-cyan-300 text-white bg-slate-900/70 hover:bg-cyan-400/15 rounded-lg border border-slate-700/70 hover:border-cyan-400/60 transition-all duration-300 hover:scale-105"> {/* Content */} </div>

Frequently Asked Questions

Yes, completely free with no sign-up required. Sort as many class lists as you need for your projects.

No, all sorting happens in your browser. Your code never leaves your device, ensuring complete privacy.

Yes! Install the official Prettier plugin for Tailwind CSS to automatically sort classes on save. This tool helps you learn the ordering system.