Simplifying Your Tailwind CSS Styling with Prettier's Automatic Sorting

Writing Tailwind CSS without class sorting feels chaotic. You end up with utility classes scattered in random order—layout properties mixed with colors, spacing utilities buried between typography classes. Your components work, but reading them requires mental parsing every time.

The Problem with Unsorted Classes

Here's what I mean. Look at this component:

<div className="bg-white px-6 pt-4 text-sm shadow-sm mt-2 mb-4 rounded-lg border">

It works, but the order feels random. Layout and spacing properties mixed with visual styling, colors scattered throughout. Your brain has to parse the visual hierarchy every time you read the code.

Prettier Handles JavaScript, Not CSS Utilities

Prettier formats JavaScript beautifully, but it leaves Tailwind classes alone. That makes sense—Prettier doesn't understand CSS utility precedence or Tailwind's recommended class order.

The Tailwind team has opinions about class ordering. Layout first, then spacing, then colors and effects. But remembering this while coding? That's cognitive overhead you don't need.

How the Plugin Changes Things

The prettier-plugin-tailwindcss plugin bridges this gap. It understands Tailwind's class hierarchy and sorts your utilities accordingly.

Before the plugin runs:

<div className="bg-white px-6 pt-4 text-sm shadow-sm mt-2 mb-4 rounded-lg border">

After the plugin runs:

<div className="mt-2 mb-4 rounded-lg border bg-white px-6 pt-4 text-sm shadow-sm">

The difference is subtle but meaningful. Layout and spacing properties come first, then visual styling. Your eyes learn the pattern, and reading component code becomes faster.

Getting It Running

The setup is straightforward. Install the plugin:

npm install -D prettier prettier-plugin-tailwindcss 

Then add it to your Prettier config:

// your prettier.config file
module.exports = {
  plugins: ['prettier-plugin-tailwindcss'],
}

That's it. Next time you format your code (Cmd+S if you have format-on-save enabled), your Tailwind classes get sorted according to the framework's recommended order. No configuration needed, no decisions to make.

The Real Benefit

The plugin doesn't just sort classes—it removes a micro-decision from your workflow. You stop thinking about where to place that new hover: state or whether mb-4 should come before or after px-6. The cognitive load drops, even if just slightly.

For teams, it's even more valuable. Everyone's Tailwind classes look the same after formatting. Code reviews become easier when you're not distracted by inconsistent class ordering.

If you're already using Prettier (and you probably should be), adding this plugin is a no-brainer. It's one of those tools that quietly improves your development experience without getting in the way.

The official repository has more details if you need them, but honestly, the setup above is all most projects need.