Sorting Tailwind CSS Classes Automatically with Prettier

In this video, I'll show you how to set up Prettier and the new Prettier plugin for Tailwind CSS, which will sort your classes automatically. One thing less to argue about with your team!

00:00 – Introduction
00:32 – Setting up Prettier
02:47 – Formatting on save
03:40 – Installing the Prettier plugin for Tailwind CSS
04:41 – How classes are sorted
05:57 – High impact classes first
06:46 – Modifiers grouped together
07:16 – Sorting custom classes
07:59 – Formatting an existing project
09:40 – Outro

[lsagar]

The debate wasn't about whether or not to use tailwind but about how to order tailwind classes.
And now the debate is finally resolved

[avetisk]

At last! No more philosophical existential questioning about class order 🖤🖤🖤

[MeonisRP]

I just started learning tailwind a week ago. And I can already say it’s one of the best frontend tools I’v seen. It saves so much time and energy!

[alexander.kachkaev]

👋 folks! One of Prettier maintainers here. Note that starting with Prettier v3.0, plugin autoloading is no longer available. After installing `prettier-plugin-tailwindcss`, it is necessary to specify it in the config file (prettier.config.js, .prettierrc.json., etc.).

{
"plugins":
}

[cristhiangarcia]

The developers/community of Tailwind is by far the best 😁

[lixou]

I have only one problem: My cursor doesn't jumps with it. When i try to figure out the best color, i added ".... bg-red-500" at the end, saved, saw it doesn't look that great for this, then wanna change by simply backspacing 3 times but wait, the background-class isn't at my cursor anymore. Please let the cursor jump with it when using VSCode's Prettier

[Skillthrive]

As always, great video. I tried keeping styles organized and now I don't even need to think about it. Perfect!

[ibnuhmustofa]

For a long time I follow adam wathan tweet about the best practice writing tailwind classes. Now you make me (us) easier, you're awesome. Love this, thanks

[Kwuasimoto]

Wow.. I've been using tailwindcss for almost 2 years now and this is the first I've seen this plugin, absolute game changer.

[undefindjs]

This is soo sick, me and my team just had this talk today!!!.. love this!!!

[Antebios]

This is such a time saver. I can't believe I wasted so much time spacing manually.

[provereno-na-sebe]

Sorry but it doesn't seem to work for me. I'm using tailwind with wordpress and had to install the frontier php plugin but it has issues with the php html options and the tailwind frontier plugin itself doesn't work either :( Back to Headwind

[Brocollipy]

Soo much good stuff in the tailwind world. Took me a while to make the move from bootstrap but so worthwhile.

[yomajo]

0:45 1. Im using flask + tailwind cli. Should I watch the rest?
How to wrap those goddamn html lines?

[gopalloharnew]

05:52 This Class Sorting thing is not here to avoid Bugs and Issues but Purely for Organisation and Consistency Reasons !

[Ibrahim-fhkv]

Is there a way to break the long Tailwind CSS class into multiple lines, in order to make it readable?

[adenreleemmanuel]

Thanks for the video


please which font do you use in your vs-code editor

[atanaskanchev]

Anyone able to make prettier break long class name lines? It seems it’s not supported yet.

[horaciocoronel]

How does prettier differs from the Headwind plugin when sorting classes?

[rfmiotto]

Hi Simon, great work! I have a question: does the Prettier plugin work in case of conditional styling such as in React applications?