Sorting Tailwind CSS Classes Automatically with Prettier

Does anyone know what font is being used in the code editor?

Not sure why that plugin didn't work for me, I could get this to work only by using a different prettier plugin "prettier-plugin-tailwind-css"

Hi, this prettier plugin is not working in my project. I'm trying to use it in a Vite React app. Is there a different setup for it? Could someone please solve this problem. Prettier itself is working fine but this plugin for tailwind css is not.

It's not working for me

Sorting for did not work.

Sad that it has peer dependency broken in Node 20 and newest version of prettier :/

Your prettier-plugin-tailwindcss does not work with vs code. Can you please give any quick solution for this?

This plugin is not working properly on the current version of VS and prettier. Had to switch to Headwind instead.

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

👋 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": ["prettier-plugin-tailwindcss"]
}

Oh god, did I just see a Shiba at first?😍😍

i learn so much from any of your videos. thank you .

what if I am using react or nextjs

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

this plugin never worked for me

How to change font for "class", "html", "lang" and other html props?

What about getting rid of extra spaces between class names?
className=" mx-auto my-auto text-white "

I love tailwind. Tho, I'm facing a problem... I'm switching gears from JS to WordPress for a contract work and I can't, for the sake of sanity make the "Automatic class sorting" work with any .php file. It works with .html but not with .php. Does anyone know a solution to this problem? I'm using VSCode.

hi, how do i set this up on my wordpress project?

i saw a lot of comments about @apply BUT you shouldn't use @apply, in future it will throw a build error

This has been very helpful as I like things structured and easier to follow. Thanks for this extension to help with sorting.

As i am mostly working with laravel framework which uses blade and prettier is throwing error that it
can not format the blade files.

Why didn't I see this video before? thanks

Why doesnt this work on my .php files, or on ad wordpress project ? Prettier works fine but it doesnt sort any classes

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

I can't get the extension to format the classes in solidjs

man these videos are pure gold... thank you so much

Great video. Thanks!!

How do you get an emoji to appear on your terminal?

Thank you for this info, however, I had hard time with getting this plugin working with pnpm.

dint work on me

Workaround for blade - Blade formatter has a tailwind class sorting option and I still use prettier for the css files to sort the classes with @apply. Anyone has a better solution?

Thank You!

Imposible to install this. I just can't get it to work even though I didi a step by step install with Visual Studio.

This is terrible. I like the idea of auto sorting tailwind classes... but there should be a way to change the way it sorts them...

I mean really... There should be only 2 ways to sort them in my mind.

1) The way that it does, by mimicking the compiled file.
OR... and the way I would prefer, personally...
2) Keep the style sorted together. ex: all flex related classes stay grouped together, all grid related classes stay grouped together, all colors stay grouped together.... etc etc... And the reason why I would like this way is that I wouldn't have to read through all the classes to find the specific class that I have forgotten to add, because it isn't in the flex section...

Anyways... that's my two cents and am disappointed that I don't even get an option to rewrite the sort order...

But.. I do LOVE tailwind and every other CSS tool should be buried... LoL

This video is wonderful and provides interesting insights:
Changing the Tailwind directive order in you class="..." does not affect the generated CSS in any way. The specific ordering is enforced during compile/generation. This is an important fact to have when talking about adoption of Tailwind CSS!

What's the name of the theme that you are using???

How can I make that work with tailwind CDN ?

How to make prettier break lines for each group of tailwind classes?

Amazing!!! I started using tailwindcss 4 months ago and it has been AMAZING 🗣

someone tell me what font he's using in vscode....?

eslint-plugin-tailwindcss is pretty good too!

doesn't Headwind vscode extension do that?

could someone tell me if this works with attributify classes?

I learned css from tailwind best ever tools love u

Does this work only for Tailwind V3? I can't make it work in my Laravel project with Tailwind 2