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
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
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!
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
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
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
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.
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?
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 "
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.
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?
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] )
@@sebastianarrieta9678 Had to check my settings because it wasn't showing for me. Turns out I just had to click the arrow in the menu to show it. 🤦🏼♂
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.
If you're solo dev, use whatever you like. But for consistency across the team, the prettier plugin is better. Because it'll work on CI or git hooks. So your teammate can use whatever IDE/Text Editor they want.
At last! No more philosophical existential questioning about class order 🖤🖤🖤
I second this 😂
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!
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?
Wow.. I've been using tailwindcss for almost 2 years now and this is the first I've seen this plugin, absolute game changer.
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 😅
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 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? 🤣
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!
As always, great video. I tried keeping styles organized and now I don't even need to think about it. Perfect!
Guys you are super cool! I was always arguing with myself how to order those classes :DD
Haha so it was not just me!
Soo much good stuff in the tailwind world. Took me a while to make the move from bootstrap but so worthwhile.
first of all your content is top notch!thx for the vids!
Amazing!!! I started using tailwindcss 4 months ago and it has been AMAZING 🗣
i learn so much from any of your videos. thank you .
I learned css from tailwind best ever tools love u
Thanks Simon giving a brief but powerful introduction for this. Now, I can introduce to the developers of Taiwan.
Thanks. You're the only one who helped me to set it up.
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
This has been very helpful as I like things structured and easier to follow. Thanks for this extension to help with sorting.
man these videos are pure gold... thank you so much
Now if only Blazor was supported by Prettier. Keep up the good work!👌🏻
Really!
I’ve been waiting for this, thank you! 🙏🏽👏🏽
Wow, these guys definitely know their game
This plugin saves from a lot of headaches, Thank you!!
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.
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
How does prettier differs from the Headwind plugin when sorting classes?
Good question
instead of hover:bg-red hover:font-xl = hover[bg-red font xl]
Is there a way to break the long Tailwind CSS class into multiple lines, in order to make it readable?
Been dying for this!!
Anyone able to make prettier break long class name lines? It seems it’s not supported yet.
Awesome utility for the best css utility !
How do you get an emoji to appear on your terminal?
Thanks for the video
please which font do you use in your vs-code editor
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
Thank you for the tips! Fantastic! Anyway, may I know what font you are using?
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
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...
As i am mostly working with laravel framework which uses blade and prettier is throwing error that it
can not format the blade files.
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.
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?
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
"
How would you integrate this with eslint?
Thank you! Is there any way to sort attributes in dynamic classes? To fix something like
Whoaaa, this is awesomeee
I can't get the extension to format the classes in solidjs
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.
Which font are you using?
Oh god, did I just see a Shiba at first?😍😍
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"
what if I am using react or nextjs
Couldn't get it to work on vscode mac. Fix is to install Headwind extension, in addition to Tailwind.
Does anyone know what font is being used in the code editor?
Thank you for this info, however, I had hard time with getting this plugin working with pnpm.
Thanks a lot for this plugin!
Your prettier-plugin-tailwindcss does not work with vs code. Can you please give any quick solution for this?
0:45 1. Im using flask + tailwind cli. Should I watch the rest?
How to wrap those goddamn html lines?
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 😅
How to make prettier break lines for each group of tailwind classes?
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.
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?
This plugin is not working properly on the current version of VS and prettier. Had to switch to Headwind instead.
Is there any way we can set class and modifiers next to eachother?
What's the name of the theme that you are using???
Alhamdulillah....
This was my last concern about tailwind ....
It's gone now😙😙
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
Great video. Thanks!!
How’s the support for using the classnames npm package and with custom tailwind prefixes?
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 that extra panel on the right that shows the css at 5:02 ?
With the Tailwind plugin on vscode
@@sebastianarrieta9678 Had to check my settings because it wasn't showing for me. Turns out I just had to click the arrow in the menu to show it. 🤦🏼♂
@@somdobomk Yep there is a little arrow to open the secondary panel. The little cross of the secondary panel will close it when it becomes annoying 😅
@@somdobomk happens to the best of us
My prettier doesn't work? Please someone help me
Amazing as always
Why doesnt this work on my .php files, or on ad wordpress project ? Prettier works fine but it doesnt sort any classes
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.
Sad that it has peer dependency broken in Node 20 and newest version of prettier :/
Can the plugin sort tailwind classes applied in css files ?
someone tell me what font he's using in vscode....?
hi, how do i set this up on my wordpress project?
If you're here for learning how to setup prettier for TailwinCSS then jump to 3:40
Hi. Thanks for the video. By the way, I wanted to know, how to style a mail with tailwindcss. It's possible ?
Does this work only for Tailwind V3? I can't make it work in my Laravel project with Tailwind 2
How can I make that work with tailwind CDN ?
Tailwind is heaven on earth for CSS developers....
Who here agrees??
There was a vs code extension called headwind that did automatic class sorting in tailwind css. Is it not recommended to use it now?
If you're solo dev, use whatever you like. But for consistency across the team, the prettier plugin is better. Because it'll work on CI or git hooks. So your teammate can use whatever IDE/Text Editor they want.
how to do that P+P or *+* all child combinator
Yes, Love it ❤️ Thanks for the plugin. (Time to uninstall headwind lol)
could someone tell me if this works with attributify classes?
doesn't Headwind vscode extension do that?
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?
There are no directions on how to configure .prettierrc file to include the tw plugin? A
Unless you've given your Tailwind config file a custom name/location, you don't need to configure anything for the plugin to start working!
Its not working for blade! Any workaround?
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 👍
Ahhh love this!
lol kudos for finding a way to say “npm install prettier-plugin-tailwindcss” stretched out to 10 minutes
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.
this is really useful
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 🤷♂