In frontend we're so good at solving problems we've created for ourselves by choosing to use YAF (Yet Another Framework) that then turns out to need YAP (Yet Another Plugin) for YAF in order to tame the annoyances.
I agree for the most part but I like to believe that there is a general uptrend in DX even if the line is more stair-step than straight. I think the JS ecosystem was unfortunate in that the demand for more and more complex web applications superseded the progress in developer tooling.
WARNING! Do not use "prettier-plugin-tailwindcss" and "eslint-plugin-tailwindcss" simultaneously; it caused unreal lags in VSCode and I wasted a week resolving it. I recommend using the plugin for ESLint if you are using ESLint in your project.
Use "Headwind" instead. Does the same with less complications. The only problem I've found so far is when u use [ ] custom values. In this case, classes do not sorted out and u have to do manually. Other than that, it's amazing! 🤘
"custom-values []" also working fine now, tried and confirmed it and loving it. anyway thanks for the suggestion, as the plugin mentioned in this video not worked for me lol
THIS IS A LIFESAVER! Sometimes I have 2+ lines of just tailwind styles and it's a pain in the arse having to go trough it all looking for a simple p-3 💀, specially when applying different styles for different screen sizes
Since it would it is a dev dependecy and would probably only be used locally on your pc, i think installing it globally would be great instead of installing it as a dev-dependecy on every project
Good plugin but it makes saving a file a pain in big projects. I had to stop using it in big projects as it would cause vscode to freeze for like 5 mins while trying to save a file.
bigger prob for me is that astro seems to hate multi-line classes, even in template strings. I'd like to be able to have them structured by attribute, so `row-start-4 md:row-start-6 lg:row-start-2` and then cols on a new line.
How can I use it in the NextJS project in Webstorm IDE? Does anyone know how? I tried installing and saving the file, but unfortunately, it doesn't do anything.
Well, you forgot to mention that to it work as you said you need to have Prettier extension installed in your editor and set it as default and if it's VSCode you must need to turn on the formatOnSave options on settings.json.
@@ZiPMo85 You need to tell all the people on the project and every time someone new comes to use vs code and to install the extension. That's the need of the dependency.
didnt worked for me, added the " .prettierrc" file in the root directory as per the official documentation of tailwind.css, restarted the vs code, still the code formating didnt worked. meanwhile form this comment section, saw about "Headwind" vscode extension, tried it, it worked absolutely perfect,even for custom tailwind class
I’m a developer for over 20 years, and frameworks like tailwind where you design with classes goes against every best practice rule that was ever taught to me. It forces the user to put the design into the markup, rather than separating concerns. In addition, you end up with dozens of KB or so of CSS that will never be used. Just my $0.02
i don't know why but this does not work for me for some reasons I'm nextjs's app directory with eslint and this plugin does not work for me. any suggestions?
Bootstrap vs Tailwind recommend anyone ? How can I use Bootstrap without CDN also in my react app without react bootstrap which is really complicated??
I still don't understand tailwind. If you have one class for each style property+value, why not just use the style="..." attribute? It is what you're effectively doing.
Does this work with React components as well? Can it only format classes directly assigned to className? What if the classes are stored in a separate string?
I'm using tailwind in my current react project and it works great. It sorts classes assigned to the "className" property for react components just fine. I'm not sure what you mean in the last question. Classes stored as a string in a different variable? If so,. I'm not sure as I haven't tried doing that. But if you're doing it to reuse classes for common components then there's a better and more semantic way to do that in the tailwind config file.
I don't think it will work if you're assigning a variable or a const. But storing classes in a separate string and this plugin achieves the same thing minimising visual clutter so not sure why you would need both
@@wildanm2 because it doesn't solve any problems, the real problem is that no one wants to learn CSS properly. We have web components and CSS custom properties, you don't need Tailwind at all, it's just the Bootstrap of the Z generation.
Every time you hit the save button, it all flip flops, then you realize you made a mistake although you haven’t moved your cursor yet, and end up editing the wrong class cos it switched positions. So you gotta undo a few times. My biggest problem with it.
Do you think that on a comparison between two versions of a big, heavily css decorated page, the first with tailwindcss, the other with a wisely optimized SCSS (mixins and stuff) one, would be there a significant reduce of workload on the browser behalf? My opinion (but I'm open to hear different ones) is that given real, enough complex web pages, tailwind results in less stuff to download. I may be wrong, didn't benchmarked yet.
would be nice to have a visualization that shows conflicts in the class or property inheritance or situations where one property is overridden by another
WOW, it wasnt a big problem, it was my MAIN problem. hehe. Thanks for sharing Kyle
In frontend we're so good at solving problems we've created for ourselves by choosing to use YAF (Yet Another Framework) that then turns out to need YAP (Yet Another Plugin) for YAF in order to tame the annoyances.
While this critique might generally be valid it does certainly not apply to tailwind
I agree for the most part but I like to believe that there is a general uptrend in DX even if the line is more stair-step than straight.
I think the JS ecosystem was unfortunate in that the demand for more and more complex web applications superseded the progress in developer tooling.
🤣🤣
WARNING! Do not use "prettier-plugin-tailwindcss" and "eslint-plugin-tailwindcss" simultaneously; it caused unreal lags in VSCode and I wasted a week resolving it. I recommend using the plugin for ESLint if you are using ESLint in your project.
yeah, I had the same problem
Someone should open an issue
Why do you prefer the eslint plugin?
@monotype1110 Does this issue exist now?
I should have read earlier!😢
Use "Headwind" instead. Does the same with less complications. The only problem I've found so far is when u use [ ] custom values. In this case, classes do not sorted out and u have to do manually. Other than that, it's amazing! 🤘
"custom-values []" also working fine now, tried and confirmed it and loving it. anyway thanks for the suggestion, as the plugin mentioned in this video not worked for me lol
Modern solutions require modern problems
THIS IS A LIFESAVER! Sometimes I have 2+ lines of just tailwind styles and it's a pain in the arse having to go trough it all looking for a simple p-3 💀, specially when applying different styles for different screen sizes
Thanks for the package, Kyle
Yeeeesss! I was just thinking about whether there is an extension that reorders classes.
that library is not working in my vscode. But I downloaded extenstion called "headwind" and it worked.
Since it would it is a dev dependecy and would probably only be used locally on your pc, i think installing it globally would be great instead of installing it as a dev-dependecy on every project
Is it just me or does this guy look like handsome real life gigachad
I really appreciate this... This will really help me to improve
thanks man.
I can't understand how this is better than bootstrap. Not that I like the latter either.
Has more range than Bootstrap
Super. Soo helpful. Thank you so much
Good plugin but it makes saving a file a pain in big projects. I had to stop using it in big projects as it would cause vscode to freeze for like 5 mins while trying to save a file.
Thank you
bigger prob for me is that astro seems to hate multi-line classes, even in template strings. I'd like to be able to have them structured by attribute, so `row-start-4 md:row-start-6 lg:row-start-2` and then cols on a new line.
There are a few like this. I use one for eslint and it works very well.
I too, like many people, got caught in this time sink. Just too many issues with getting it to work.
Super helpful ty
I've been using this method for normal css.
I just use an extension that does that (headwind)
thanks for the recommendation much better than messing up prettier as it causes alot of different conflicts
thanks
Thanks bro, it is really helpful 😍
Lifesaver, this comment. Prettier Tailwindcss plugin has all sort of problems.
give this man a nobel price
As someone who learned CSS when it was new in the 90s... What the **** is this Tailwind noise?
Tailwind is a more efficient way to write css
There's an vscode extension to right, HeadWind CSS
thank you for this
Theo said the same thing ☺️
I do that without noticing it hahah just be organized
as always great content
That's why I prefer writing pure css in classes and add class to html. How convenient? And readable too.
how convenient naming everything hahaha
How can I use it in the NextJS project in Webstorm IDE? Does anyone know how? I tried installing and saving the file, but unfortunately, it doesn't do anything.
neovim tho
Well, you forgot to mention that to it work as you said you need to have Prettier extension installed in your editor and set it as default and if it's VSCode you must need to turn on the formatOnSave options on settings.json.
thank you for this
Guys how to properly install it? It doesn’t work for me…
Insane
why i cant find that plug in :(
preach!
Isn't there a vs code extension for this already???
I use headwind for this yeah
@@Jacob-ch8qj yeah same. Unnecessary dev dependency
@@ZiPMo85 yeah makes sense
@@ZiPMo85 You need to tell all the people on the project and every time someone new comes to use vs code and to install the extension. That's the need of the dependency.
So you prefer tw over bootstrap
Copy paste installation:
npm i -D prettier-plugin-tailwindcss
Isn’t it better to do “py-3 px-2”, rather than “p-3 px-2”?
Life saver 🎉
didnt worked for me, added the " .prettierrc" file in the root directory as per the official documentation of tailwind.css, restarted the vs code, still the code formating didnt worked. meanwhile form this comment section, saw about "Headwind" vscode extension, tried it, it worked absolutely perfect,even for custom tailwind class
🙏🏾 🙏🏾 🙏🏾
That's really nice 👍
Why it is not working in my project , HELP please!!!
isn't that the same as the headwind extension?
How can I break each class on a new line?
I’m a developer for over 20 years, and frameworks like tailwind where you design with classes goes against every best practice rule that was ever taught to me. It forces the user to put the design into the markup, rather than separating concerns. In addition, you end up with dozens of KB or so of CSS that will never be used. Just my $0.02
you do know that unused css can get purged before production right
What is the name of this plugin?
It is no longer working with prettier extension. Anyone having the same problem?
i don't know why but this does not work for me for some reasons I'm nextjs's app directory with eslint and this plugin does not work for me. any suggestions?
for me too, it doesnt format at all, prettier formats the html or js text but not the tailwind part
Sick🔥
Tailwind I'm still learning you but I have a filling you would be the best
Filing 💀
I’m not a fan of adding 56 classes to a div.
This is a game changer, how does it work with clsx though, I feel like it could screw something up
Is there a similar extension on vs code for CSS. Like when format document it arranges the css styles in either alphabetical way or logical way
can I install it globally instead? Or configure my prettier vscode extension with it?
Awesome 👍
Bootstrap vs Tailwind recommend anyone ? How can I use Bootstrap without CDN also in my react app without react bootstrap which is really complicated??
Tailwind Anyday
forget bootstrap just learn tailwind
will it work with cva library also?
Don't use too many plugins
I still don't understand tailwind. If you have one class for each style property+value, why not just use the style="..." attribute? It is what you're effectively doing.
What happened to Bootstrap? It changed its name to Tailwind.
Bootstrap sucks tbh
Bootstrap died a long time ago, the day CSS grid came. And Tailwind has nothing in common with Bootstrap.
Does this work with React components as well? Can it only format classes directly assigned to className? What if the classes are stored in a separate string?
I'm using tailwind in my current react project and it works great. It sorts classes assigned to the "className" property for react components just fine. I'm not sure what you mean in the last question. Classes stored as a string in a different variable? If so,. I'm not sure as I haven't tried doing that. But if you're doing it to reuse classes for common components then there's a better and more semantic way to do that in the tailwind config file.
I don't think it will work if you're assigning a variable or a const. But storing classes in a separate string and this plugin achieves the same thing minimising visual clutter so not sure why you would need both
Does this install globally?
just use tailwind styled components to get rid of that long ass class names
Can i use it while on tailwind cdn?
And it is still a mess
U bought a second guitar but still never played us something
Do not use this plugin if you use daisy-ui or any other tailwind extensions alike
Why
WOW
You are nice :)
🌝
🎉❤ Wow
He only said a few words and his head is all over the place! Just calm down! A simple back rest might stabilize your neck!
@apply
ughh, still horrible.
npm i -D prettier-plugin-tailwindcss
Not prettier than you 😉
How you add background image with tailwind in react
npm i -D prettier-plugin-tailwindcss
// prettier.config.js
module.exports = {
plugins: [require('prettier-plugin-tailwindcss')],
}
Tailwind is shit man, idk why ppl are so hyped about
why tailwind is shit?
@@wildanm2 because it doesn't solve any problems, the real problem is that no one wants to learn CSS properly. We have web components and CSS custom properties, you don't need Tailwind at all, it's just the Bootstrap of the Z generation.
What is the name of this plugin?
npm i -D prettier-plugin-tailwindcss
Every time you hit the save button, it all flip flops, then you realize you made a mistake although you haven’t moved your cursor yet, and end up editing the wrong class cos it switched positions. So you gotta undo a few times. My biggest problem with it.
Run it in a pre-commit hook instead, and thats solved. Then its also going to work in all editors, Notepad and Word included 😅
Yep this is my issue too, i removed the plugin
Sounds like a skill issue xd
TW=Classes hell. Just have reusable SCSS/LESS mixins functions, which can just use 1 or a few classes.
Do you think that on a comparison between two versions of a big, heavily css decorated page, the first with tailwindcss, the other with a wisely optimized SCSS (mixins and stuff) one, would be there a significant reduce of workload on the browser behalf? My opinion (but I'm open to hear different ones) is that given real, enough complex web pages, tailwind results in less stuff to download. I may be wrong, didn't benchmarked yet.
Waiting for Next Js to get full support of MUI & Chakra UI
What do you mean by full support? Dont they work perfectly as is?
@@askeladden450 MUI only work on client mode , no server component afaik.
That did not improve anything 😕
Theo from McDonalds
❤
Taiwin always feels like an inline css on steroids, I always prefered separate css with html - much cleaner and maintainable
would be nice to have a visualization that shows conflicts in the class or property inheritance or situations where one property is overridden by another
The liner for tailwind works underlines overlapping classes. Its in vscode
Yes by default it is zig-zag orangish underline
It's hilarious. Makes a post like this then suddenly makes a post that says, don't use tailwind, use CSS.
I feel sick of hearing that word...
Is there a similar way for pure CSS?
That's crazy! Thanks Kyle as always 👍
I think Tailwind is unusable without Prettier.
Yeah easy for me but sometimes use bootstrap so this library also work in bootstrap
what if auto save
SCSS mixins > tailwind