I love building clean, pretty UI — which also means I tend to write a lot of Tailwind classes. Buttons, cards, forms… they all end up with long class strings when I’m moving quickly.

Recently, I came across prettier-plugin-tailwindcss. It sorts your Tailwind classnames automatically, and it turned out to be a surprisingly helpful workflow improvement.

The installation process took me a bit to figure out, especially with the changes in Tailwind 4.0, so I’m sharing the steps here in case it helps someone else.

Installing Tailwind 4.0 + prettier-plugin-tailwindcss

Tailwind 4 changed a lot — the config file is no longer required, and the setup is more CSS-first. It’s simpler overall, but it also means older tutorials don’t apply anymore.

Here’s the combination that worked for me.

1. Install Prettier + Tailwind Prettier Plugin

npm install -D prettier prettier-plugin-tailwindcss

Make sure the VS Code extension “Prettier – Code Formatter” is installed, otherwise the plugin won’t actually run.

2. Add a Prettier config

Create a .prettierrc in your project root:

{
  “plugins”: [”prettier-plugin-tailwindcss”]
}

or use the JS version:

// prettier.config.js
export default {
  plugins: [”prettier-plugin-tailwindcss”],
};

3. (Tailwind 4.0) Add your stylesheet if you customized theme

If you’ve added custom theme values using Tailwind 4’s new CSS @theme block, add:

{
  “plugins”: [”prettier-plugin-tailwindcss”],
  “tailwindStylesheet”: “./src/App.css”
}

This helps Prettier understand your theme source.

4. Tell VS Code to format with Prettier

In .vscode/settings.json:

{
  “editor.defaultFormatter”: “esbenp.prettier-vscode”
}

This ensures VS Code actually uses Prettier instead of another formatter.

You can also set it up in Settings (Cmd + .), selecting Prettier as the default formatter.

The Sorting Before/After

Before

<button class=”bg-black hover:bg-amber-800 text-2xl font-extralight hover:font-extrabold text-yellow-400 p-3”>

After

<button class=”bg-black p-3 text-2xl font-extralight text-yellow-400 hover:bg-amber-800 hover:font-extrabold”>

As soon as I hit save, Prettier ran and the plugin automatically reordered the classes for me. It keeps everything consistent and easy to scan — especially when components grow.

Final Thoughts

Discovering prettier-plugin-tailwindcss was a small but meaningful improvement to my workflow.

I write quite a bit of Tailwind when designing UI components, and having classes sorted automatically just keeps everything cleaner and easier to read.

Now that the basics are set up, I’m continuing to experiment with Tailwind 4’s new features while building out my Next.js + Supabase apps. If you rely on Tailwind heavily for UI, this setup is worth adding early on — it keeps your components tidy without extra effort.