Is prettier-plugin-tailwindcss associated with headwind ? Headwind is a VSCode extensions that existed for many years and been contributed by friendly open-source developers to help with sorting tailwind classes. I hope they get some credit for their hard work!
👋 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"] }
Agreed! They really demonstrate that they listen to their users, recognize any inconveniences and work hard + smart to eliminate them - because of this Tailwind will only get better and better
Fantastic, we absolutely love prettier and having tailwindcss automatically sorted for us is a no brainer, quite literally we don't use our brain when ordering tailwindcss classes anymore!
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
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!
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
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
more easily to see a lot of classes. I somehow used too much brain to think which order helped me to come back and edit easily. Now I'll be able to save more my brain power to do others that more matter
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.
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.
I'd also like to put related classes into separate lines but prettier ruins that unfortunately… e.g. class=" mx-4 my-8 flex flex-col w-full h-24 border-2 border-gray-300 "
Do I need to install it for all my working directory and also create a .prettierrc file? Are there another option to do it once and will apply all my working directory?
This is cool, for a long time I tried doing just this, it was a bit of a pain but the outcome is more readable code. 1 question does it work (or might work in the future) with the @apply directive?For ex i can create a long directive full of classes and it will sort them and break them based on max line specified in prettier? - that will be a beast . Tailwind is the best lib for css you guys killed it. Thanks for your efforts
Would this sort JIT classes as well? Been using a third-party vscode plugin for this, but the biggest headache is it doesn't work with JIT classes in place. (eg. pt-[36px] )
I can't get it to work with the Panic Nova Prettier plugin which is a huge disappointment. I love Nova, but the lack of plugin support is really a drag.
4:30 That did not work for me. Prettier is adjusting the file, but it's not reorganising the classes, nor the styles. My .prettierrc file is empty with only "{}" I have removed the .prettierignore file, just to make sure it's not that causing it.
Okay so I see I was missing this, but it still doesn't reorder the tailwind classes, however this did NOT solve the issue .prettierrc { "plugins": [ "prettier-plugin-tailwindcss" ] }
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?
Very nice video. Thanks :) It's working also if I'm using in own class in own .css file where I'm using apply? Like: .card { @apply rounded-lg overflow-hidden bg-slate-100 text-black shadow md:shadow-xl lg:shadow-2xl; }
What do you mean by class copy? Do you mean avoid having multiple elements with the same group of classes in a project? The answer to that is component abstraction. Create one reusable component, where the classes are maintained only once.
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!
Where to learn ?
That's awesome to hear! Glad you're enjoying the journey so far!
@@scravengerx official docs tailwind css, just read bro
Is prettier-plugin-tailwindcss associated with headwind ? Headwind is a VSCode extensions that existed for many years and been contributed by friendly open-source developers to help with sorting tailwind classes. I hope they get some credit for their hard work!
can you tell me? which font & theme is used on this video?
👋 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"]
}
How do we write it in the .prettierrc.json? I'm having difficulty when saving .scss files nothing gets formatted.
Timesaver, thank you!
@@Codefidejust search prettier in search panel, it will show an option to create one
Thank you so much!
I was actually scratching my head and wondering why this is no longer working after updating Prettier. Thank you so much!
At last! No more philosophical existential questioning about class order 🖤🖤🖤
I second this 😂
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
The developers/community of Tailwind is by far the best 😁
Agreed! They really demonstrate that they listen to their users, recognize any inconveniences and work hard + smart to eliminate them - because of this Tailwind will only get better and better
can you tell me? which font & theme is used on this video?
This is soo sick, me and my team just had this talk today!!!.. love this!!!
Haha did you have an argument like in my little intro zoom call? 🤣
As always, great video. I tried keeping styles organized and now I don't even need to think about it. Perfect!
Fantastic, we absolutely love prettier and having tailwindcss automatically sorted for us is a no brainer, quite literally we don't use our brain when ordering tailwindcss classes anymore!
Soo much good stuff in the tailwind world. Took me a while to make the move from bootstrap but so worthwhile.
This is such a time saver. I can't believe I wasted so much time spacing manually.
I know right? It's like formatting indentation and semicolon stuff before Prettier 😅
Wow.. I've been using tailwindcss for almost 2 years now and this is the first I've seen this plugin, absolute game changer.
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
Guys you are super cool! I was always arguing with myself how to order those classes :DD
Haha so it was not just me!
Thanks Simon giving a brief but powerful introduction for this. Now, I can introduce to the developers of Taiwan.
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!
instead of hover:bg-red hover:font-xl = hover[bg-red font xl]
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
Hi Simon, great work! I have a question: does the Prettier plugin work in case of conditional styling such as in React applications?
I want to know too
It does
@@smabm2779 Works.
Amazing!!! I started using tailwindcss 4 months ago and it has been AMAZING 🗣
i learn so much from any of your videos. thank you .
Is it possible to automatically place a long list of classes onto multiple lines? Just like Prettier does with stuff like long arrays.
Now if only Blazor was supported by Prettier. Keep up the good work!👌🏻
Really!
Feature Request: Play the sound effect in vscode when classes are reorderd.
lol I don't think you actually want this 😂
Gonna drive you nuts 🥴
@@jonathanreinink1193 That would be fun for 1 day and then...
I learned css from tailwind best ever tools love u
How does prettier differs from the Headwind plugin when sorting classes?
Good question
first of all your content is top notch!thx for the vids!
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
This has been very helpful as I like things structured and easier to follow. Thanks for this extension to help with sorting.
Thanks. You're the only one who helped me to set it up.
Anyone able to make prettier break long class name lines? It seems it’s not supported yet.
thank you for the plugin as well as intuitive rules that prettier plugin sorts with
This plugin saves from a lot of headaches, Thank you!!
Is there a way to break the long Tailwind CSS class into multiple lines, in order to make it readable?
Alhamdulillah....
This was my last concern about tailwind ....
It's gone now😙😙
man these videos are pure gold... thank you so much
more easily to see a lot of classes. I somehow used too much brain to think which order helped me to come back and edit easily. Now I'll be able to save more my brain power to do others that more matter
I’ve been waiting for this, thank you! 🙏🏽👏🏽
Wow, these guys definitely know their game
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.
Tailwind is heaven on earth for CSS developers....
Who here agrees??
As i am mostly working with laravel framework which uses blade and prettier is throwing error that it
can not format the blade files.
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.
05:52 This Class Sorting thing is not here to avoid Bugs and Issues but Purely for Organisation and Consistency Reasons !
of course prettier is a code formatter so a prettier plugin is only going to do it's job
Thanks for the video
please which font do you use in your vs-code editor
I can't get this to work on laravel blade. Does anyone know how to install it properly on laravel?
Prettier currently had no parser for blade. There is a bounty of ~$2500 for the first dev to do it.
I'd also like to put related classes into separate lines but prettier ruins that unfortunately…
e.g.
class="
mx-4 my-8
flex flex-col
w-full h-24
border-2 border-gray-300
"
Do I need to install it for all my working directory and also create a .prettierrc file? Are there another option to do it once and will apply all my working directory?
lol kudos for finding a way to say “npm install prettier-plugin-tailwindcss” stretched out to 10 minutes
Couldn't get it to work on vscode mac. Fix is to install Headwind extension, in addition to Tailwind.
This is cool, for a long time I tried doing just this, it was a bit of a pain but the outcome is more readable code. 1 question does it work (or might work in the future) with the @apply directive?For ex i can create a long directive full of classes and it will sort them and break them based on max line specified in prettier? - that will be a beast . Tailwind is the best lib for css you guys killed it. Thanks for your efforts
ohh so f.. sweet just tested and in works in apply directive as well
you shouldn't use @apply, in future it will throw a build error
Your prettier-plugin-tailwindcss does not work with vs code. Can you please give any quick solution for this?
Thank you for this info, however, I had hard time with getting this plugin working with pnpm.
Oh god, did I just see a Shiba at first?😍😍
What about getting rid of extra spaces between class names?
className=" mx-auto my-auto text-white "
YES that would be so handy - this does my head in and I manually fix it all the time 😅
Awesome utility for the best css utility !
what if I am using react or nextjs
This plugin is not working properly on the current version of VS and prettier. Had to switch to Headwind instead.
Thank you! Is there any way to sort attributes in dynamic classes? To fix something like
Thank you for the tips! Fantastic! Anyway, may I know what font you are using?
Been dying for this!!
Amazing as always
Would this sort JIT classes as well? Been using a third-party vscode plugin for this, but the biggest headache is it doesn't work with JIT classes in place. (eg. pt-[36px] )
How do you get an emoji to appear on your terminal?
Why doesnt this work on my .php files, or on ad wordpress project ? Prettier works fine but it doesnt sort any classes
I'm using Tailwind in a Next.js project and couldn't get this to work. Not sure what I'm doing wrong? Anyone else set this up with a Next.js app?
Check Imran Tailwind Next.js series
@@alexandersamokhin I've got Tailwind and Next.js working together, just not the class sorting (yet).
It should work right off the bat. I set it up in my application for nextjs
@@davidgwyer5169 What about official Tailwind Prettier extension for VSCode? It sorts classes.
@@megasanjay 🤷♂
I can't get it to work with the Panic Nova Prettier plugin which is a huge disappointment. I love Nova, but the lack of plugin support is really a drag.
How’s the support for using the classnames npm package and with custom tailwind prefixes?
How would you integrate this with eslint?
If you're here for learning how to setup prettier for TailwinCSS then jump to 3:40
Great video. Thanks!!
0:45 1. Im using flask + tailwind cli. Should I watch the rest?
How to wrap those goddamn html lines?
4:30 That did not work for me. Prettier is adjusting the file, but it's not reorganising the classes, nor the styles.
My .prettierrc file is empty with only "{}"
I have removed the .prettierignore file, just to make sure it's not that causing it.
Okay so I see I was missing this, but it still doesn't reorder the tailwind classes, however this did NOT solve the issue
.prettierrc
{
"plugins": [
"prettier-plugin-tailwindcss"
]
}
The only way I could get this to work was to use a different prettier plugin "prettier-plugin-tailwind-css"
does it work for components using @apply?
Extremely pertinent question. Wish there was some straight answers.
@@SirDamatoIII Is not a matter of just trying it out?
Sad that it has peer dependency broken in Node 20 and newest version of prettier :/
Thanks a lot for this plugin!
Does this work only for Tailwind V3? I can't make it work in my Laravel project with Tailwind 2
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?
I can't get the extension to format the classes in solidjs
How to make prettier break lines for each group of tailwind classes?
Imposible to install this. I just can't get it to work even though I didi a step by step install with Visual Studio.
Whoaaa, this is awesomeee
Does anyone know what font is being used in the code editor?
More videos please!
Very nice video. Thanks :) It's working also if I'm using in own class in own .css file where I'm using apply? Like: .card { @apply rounded-lg overflow-hidden bg-slate-100 text-black shadow md:shadow-xl lg:shadow-2xl; }
Yes, it is
How to change font for "class", "html", "lang" and other html props?
I just use a theme (Night Owl) that happens to have _italic_ settings for attributes 👍
Hi. Thanks for the video. By the way, I wanted to know, how to style a mail with tailwindcss. It's possible ?
someone tell me what font he's using in vscode....?
Which font are you using?
So, this basically replaces Headwind, right?
I noticed that custom classes are placed last in Headwind and first in the new plugin. I think I like the new approach more. I might switch.
Excellent!
Is there any way we can set class and modifiers next to eachother?
Why didn't I see this video before? thanks
So good, thanks
Yes, Love it ❤️ Thanks for the plugin. (Time to uninstall headwind lol)
thank you
Please make a video on how to prevent class copy on production. Thank you
What do you mean by class copy? Do you mean avoid having multiple elements with the same group of classes in a project? The answer to that is component abstraction. Create one reusable component, where the classes are maintained only once.
Install it globally and no need to worry about setting up a tailwind project...
npm install -g prettier prettier-plugin-tailwindcss
Its not working for blade! Any workaround?
could someone tell me if this works with attributify classes?
Thank You!