🤔 Why So Many Tailwind Haters?
Вставка
- Опубліковано 13 жов 2024
- 🤔 Why So Many Tailwind Haters? After a flurry of Tailwind haters commented on one of my recent UA-cam shorts, I had to ask why the negativity when it comes to TailwindCSS and show what I think are the top 3 benefits of Tailwind.
💖 Support me on Patreon ➜ / davegray
👉 My free Tailwind CSS course: • Tailwind CSS Full Cour...
💻 Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGra...
🚀 Discord ➜ / discord
👇 Follow Me On Social Media:
GitHub: github.com/git...
X: / yesdavidgray
LinkedIn: / davidagray
Blog: www.davegray.c...
"it looks ugly" - Person that would rather go from file to file to understand what is happening
Fr
To be fair, using dev tools right in the browser saves you from needing to go into any files. That includes tailwind declared CSS. You simply look at what it says the element styling is. And I do personally think it does look ugly with 40 differnet utility classes declared on a HTML element.
@@nustaniel It is ugly, but for the same reason that it is ugly, it is 10x more readable. And i hate when people start abstracting stuff for the sake of readability, when it means navigating through files to see even uglier, and poorly written classes, where i have to remember what each class belongs to. This is the same with functions that are used once etc.
Dev tools are powerful. But i'm not going to start selecting each and every element. That sounds just about as bad
@@chrikke Well in example px-8 isn't readable of you're unfamiliar with Tailwind utility classes. How would that automatically mean padding-inline: 8px; to someone? How do you know it's not a p paragraph element? Poorly named CSS is still straight forward when you know CSS.
Tailwind often reminds me of inline style= styling. It gets worse and worse to read the more you style something. You got to keep so many utility class names in your memory as well, so I find it harder to read with all the noise on the various styled elements. But dev tools to the rescue by clicking on specific elements to find the one I need. You shouldn't need to hunt down any CSS in multiple files regardless with vanilla. That's an issue with the project if that's the case. One file is enough.
But really though, if you're not going to click an element in the dev tools that you wonder about, why or where are you reading the inline tailwind styling in the first place? You manually hunt down the right elements? Isn't the whole point that you check what the styling is for something specific? You don't open the dev tools to look at the CSS on every single element one by one, do you? Click the location of interest, then all the information is right there. Tailwind or not. Plain easily readable vanilla CSS and class names related to the element with info on where in the CSS files they are defined exact lines, on what line the HTML element is, everything you could ask for. There's no way you should need to read through files to find what you need. That's you making a problem that isn't realistic.
@@nustaniel Oh, it will not be equally readable to someone who has never tried the library? Consider me checkmated
the burn in that negative tool comment...LMAO
😆🔥
Yah making fun of tailwind is just showing how much you don’t get it.
TailwindCSS has helped me learn things about CSS that I never knew existed. Whenever I see my editor autocompleting a tailwind class that seems new or strange to me, I try to learn more about it. That way, I learn both Tailwind and CSS 😃
true.
"it is basically inline-styling but in the class tag instead of style tag"
then css is just inline-styling in css file lol
you got to write your code somewhere , personally I love JSX when every aspects of the web page comes together
Thats basically so stuped
@@xzex2609 Try out Vue or Svelte and suddenly you'll hate it. Believe me. JSX isn't the best, especially when mapping arrays into HTML... Ugh the nasty memories...
The point they are trying to make is that the old school stablished the philosophy of separating styles from your tree structure, keeping things cleaner. It was a sin to mix the too
@@gabrielh5105 Exactly, it's old school and should be done away with for good.
It has no place in modern development where the component is the concern, not a CSS or an html file
One thing I have seen throughout learning to code is many developers like to think their opinion is the most important so they can pretend to feel smarter. I spent a lot of time learning pure CSS, I tried tailwind and hated it, but like most things, when many people are saying something is great I keep trying it more to see if I can find what they love about it. I do this food even, if I don't like a popular food at first I will keep trying it and many times I eventually end up loving it, but not all the time which is fine.
Tailwind for me is so much quicker and easier to work with than a separate CSS file, even though I know how to write a CSS file. Also the way it approaches responsive CSS compared to writing @media is so much cleaner to me. I actually think tailwind is much cleaner and clearer than normal CSS. I also use an extension Headwind, which orders all of your tailwind utility classes automatically, so with time and use it even gets easier to read because I learn to look in the same areas for things when I want to change things.
I love Tailwind, but I understand why some people would prefer to stick with CSS, but I realize they are just both opinions and it is stupid for people to be rude or think they are better at something because of their opinion of one tool or another.
I have even been thinking about giving Laravel and PHP a shot. I hear lots of bad things online about PHP and people mocking it and people that use it, but I know a lot of people seem to really like it, so there must be something about it. Maybe I will stick to what I use, but who knows, maybe I will like it better and it increases my productivity even more just like Tailwind did.
Tailwind helped me practice and learn more about CSS ✨
Good point! It can because it applies one CSS style at a time.
I really love Tailwind. I was one of those people who did not understand the point of it, but once I tried it, I never looked back. It's up there with the best things I've learnt like docker
I have tons of "never used css class-names" in every css files I wrote.
The long Tailwind class names look ugly, but the unused garbage css class names are messy because I don't remember where they are and what they are.
I can handle the ugly code I wrote,
but stuck in a messy room is a totally different problem.
That says a lot more about your coding habits to be fair. How in the world do you end up with tons of classes you never use? Do you have tons of JS functions that does nothing too? Do you have tons of HTML tags wrapped around other tags that serves no purpose? What kind of argument is that? I have bad coding habits, so TW is better?
@@nustaniel damn, getting all defensive over this? he didn't even say TW is better lmao.
there are tons of css elements, and unless you've planned an entire structure of css classes before even writing a damn html code, small mistakes are expected if you use vanilla css.
@@theswordslay3542 No, that's not defensive, rude perhaps. Realistic?
I do find it strange to have tons of unused CSS classes. I don't see why you are making a class without even writing the HTML for it that will be using it. So how are you ending up with unused css classes in your projects? If you change the element's CSS, why are you making an entirely new class over changing the class it already had assigned? If you do make a new class that you instead assign to the element, why didn't you remove the old one? If you remove the element, why are you not removing the class? It says more about your own coding habits than vanilla CSS if you have tons of 'never used css class-names' in all your projects. That's pointing out the obvious. That's not me being defensive.
It's no different than leaving in-line class styling on your Tailwind-styled HTML elements that are basically "unused". Example; maybe you assigned a display flex through TW to an element that it has no effect on anymore. The argument for vanilla CSS being messy is silly when it's based on you having bad habits of keeping your code cleaned.
I don't care if you want to use TW. I think it's pointless and ugly, but it doesn't hurt me if you want to use wrapper libraries for your projects. But I'll say it again, to advocate that it's better because of you leaving a bunch of unused code in your projects says more about your habits than whatever solution you use.
@@nustaniel the one that makes you sounds defensive is the way you quickly jumped into conclusion that op thinks "TW is better".
no need to lecture me about how tailwind css is basically vanilla css, or how unused classes are bad, i already know that, duh.
I'm not used to tailwind yet, I've always used cssModules and mainly styled-components for React projects as we can add props into it and style everything based on props if we do want (which I know is possible also with tailwind), but I am eager to learn about tailwind and expand my knowledge in front end tools. Those who be complaining about everything are the ones who are losing the experience and losing opportunity of learning a useful and job-driven tool.
Naa i have tried tailwind css and went straight back to vanilla css because when project scales it become very hard if you want to change design.
To each their own 🙂 I feel like Tailwind scales very well.
Exactly, especially if you have a complex setup things like this end up getting in the way more often than not.
That's why you gotta set it up with changes to the design in mind, making your config the source of truth... It doesn't get easier than this in my experience so far
This is non-sense
The same thing happened to me when I realised that using tailwind was not the best idea
Nice pfp BTW
I've met way too many junior devs who only know Tailwind and can't deal with large, existing CSS codebases. Tailwind has its place, but it reminds me a lot of people who learned JavaScript via jQuery. Frameworks are great and help you code faster, but over-reliance on them will eventually come back to bite you.
Imagine you need a freaking vscode extension so you don't see your 15 classes on a html tag anymore....
Imagine using vscode
@@roccociccone597 what's wrong with vscode?
Yeah, like it was a solution to the problem... But the problem still exists, the extension is just hiding it. What a crap.
I've always loved this way of writing CSS, and in the past, I've designed a framework similar to Tailwind and used it in many projects with my teammates. but, Tailwind took this idea to an advanced level, and I always say: don't be very fanatical about a particular technology. Every project has its requirements
Although i love tailwindCSS and it has definitely boost my productivity since I started using it, but vanilla CSS still my number one go-to way of writing CSS, for me i feel like tailwindCSS is just a js plugin, it also blocks a lot of modern vanilla css awesome features
Nothing wrong with that. I was glad to see the :has selector added, but overall, I can define custom classes and use arbitrary values. I don't feel like Tailwind has limited what is possible.
@@DaveGrayTeachesCode you're perfectly entitled to say that, the thing is that i can't really elaborate how it has limited me but trust my word it sometimes does
Can u share some limitations ?
Cuz i know tailwind doesn’t have text-shadow, but for this case i just creating custom class .my-shadow and using it
To be fair, you can make those short utility class names yourself in regular CSS if you really like those. The question is perhaps also how many utility classes do you really need? Specifying flex as an utility class instead of doing display: flex; on a specific class that styles an element seems kinda unnecessary.
Personally I prefer more descriptive names than py-8 px-8 and so on, but that's personal preference. Not a huge huge fan of massive long class lists on HTML elements either. I also always try to think about someone who will potentially read the code, if it is descriptive enough to be easily understood, and if not, then I don't think the name is particularly good. In example px-8 and py-8 has very little meaning to someone who don't know what that stands for. I can look up that it is related to padding left and right, and padding top and bottom and infer that it is likely using 8px for padding-inline and padding-block respectively, but it's not descriptive at a glance.
At any rate, I don't see that argument as a perk for Tailwind. I can understand the argument for it being nice because it removes unused CSS declarations automatically however. But I can't say that has been a problem I've typically faced. I declare classes when I need them, rarely do I decide to remove them, and if I rename them, it's not like I create a new class instead of renaming the previous class I used.
I've been hating tailwind because I started learning css 10 years ago and I couldn't easily migrate, but now I really feel like it's good and decreases my bundle size ALOT, it also made me much productive and faster, I don't need to think about naming my classes as before. I don't like it but it's so cool that I can't stop using it 🤩🍀
I have never tried Tailwind in my entire life; I still use CSS and Sass until now.
Sass is dead.
There's absolutely no reason to use it in 2024
@@JoshMarom-zx9mv LOL
@@JoshMarom-zx9mvDead? 😂😂😂
@@rajraiz3058 Absolutely.
I mean. You can still use it if for whatever reason you like having an inferior, non-native technology in your pipeline instead of getting it done using natural modern CSS, but that's just like using jQuery in 2024. You simply don't need it.
@@wielomarian Thanks for the insightful reply!
I totally agree!!! After eight months learning (and enjoying) vanilla CSS, I tried Tailwind. Man, I fell in love with it!!! I think I would never write CSS in the old way again.
1 year ago I tried tailwind for the first time, and I've never touched a single line of custom css again. the ability to quickly switch from prject to another and don't have to care about css is a huge + .
People who say people, that those who use Tailwind don't know CSS, always confused me.
Knowing CSS before using Tailwind is an absolute prerequisite, like how would I know the css properties I want to change without already knowing about it in CSS-land.
There’s a ton of junior devs that only know tailwind and can’t do half the things they copy from the internet in raw css themselves
@@roccociccone597 copying from the internet can be an argument for any styled classes. Same for the UI generated by AI.
Like I said in my original post, to actually use TW, you need CSS knowledge. Without out, you are stuck. This is not the same as bundled bootstrap classes, since each tw class maps to a one-liner into normal CSS.
The main thing is that if you like Tailwind, use it, and if you don't like it, don't use it, nobody cares
Well then tell them to use Assembly instead of using JavaScript to build applications. Lol
My computer science professor who has about 32 years of experience told me once that in his era his colleagues used to say that if you are not building software in assembly you are not a true computer scientist.
Nowadays no one will advise you to build an application in Assembly because we have better tools built on top of it to save time, resources, and be more efficient.
When you have a business, the business doesn’t care about what technology have you used to ship the product the business only cares about efficiency and meeting business goals that’s it!
As an end user I only care about the usability of the application and that’s it.
As a team member I am happy that me and my team are following the same conventions when creating user interfaces
Also we don’t have to rewrite the same code when moving to a new project and worry about the bundle size
I like your computer science professor! 🙌 Well said 💯
I have good experience with both. I think it's a trade-off: when you work with high-end, more sophisticated products, Tailwind can be an easy tool to use due to its flexibility and direct implementation. On the other hand, if you are working with more template-based products, sticking to classic CSS for that global framework is the way to go. Excellent content, by the way!
Thanks! I agree with your consensus!
since im using react, it gives me a bunch of opportunities for styling. to choose which technique is the best, i have tried almost all of them. if you are using a basic global css file, it is gonna be real mess so to say. if you are using css modules, you are gonna have to create a new file for each component. at first module was the best to go. but once my project became much bigger, i had to create a css file for a single component, and even annoying import styles in each file. that's why tailwind is the best. it is sometimes annoying due to the classes, but it is so so much easier, and keeps our file structure a bit clean
haaaa?
I've just learnt it and it's ammazing dude
way better and customizable than bootstrap and much simpler than plain CSS, the best thing that you are styling normally with CSS attributes but without having to go from one file to another to write styles or to check class names that you always forget, and the optimization in it is so adorable
I really love tailwind it's very elegant short and concise, very useful, specially in large projects it really helps, I hope it would be around for a long time.
There's only one thing I don't really like about the official TailwindCSS *extension* .
It doesn't automatically arrange its classes in order. I'd very much prefer if it arranged it in order of display, then margin, padding, etc. Group related properties together. *Without* having to download yet another extension to do this.
Also, I truly agree that one should really learn the basics of CSS before using Tailwind. Especially the cascading part. In CSS deduping is easily achieved by the cascading but that's not immediately clear when using Tailwind classes, hence the need for yet more packages like twMerge.
Other than that, yes I agree that Tailwind is great and it's even made its way to other platforms like software development via Electron, mobile app development as NativeWind for React Native, etc.
I like writing code. So it depends. If I am making money, then yes. But for personal projects, I write my own utility classes.
I'm sorry bad or rude comments . People can simply not to watch your tutorials.or when it comes to choose a language out of several that they overlap each other I come to your Channel to see which one you prefer to teach and I choose that and When I wanna learn a language or framework I first check your tutorials Dave because as I said before, you are perfectionist and you say some very tiny details that so many people don't care about . Please don't get disappointed you have many avid fans . ❤
Tailwind is fine if you know what you're doing and use it appropriately, but a lot of tailwind users use it because they are bad at CSS.
If you ask "what's wrong with my styles" and post a tailwind snippet you're not ready for tailwind yet
Sounds like gatekeeping. Anyone can need to ask a question.
@@DaveGrayTeachesCode It's not about gatekeeping, it's about effective learning. Adding a layer of abstraction when you don't understand the thing you're abstracting makes it a lot harder for new devs to actually learn.
@@pokefreak2112That's false. Using tailwind took my regular CSS skills to a whole new level, due to the speed at which it allowed to iterate through ideas... I do write custom CSS from time to time to cover for complex stuff that might be lacking in tailwind, but the point here's that saying what you just said as an objective fact is in fact false
@@pokefreak2112
U r taking css way too seriously. And if you're going to do that you should know that tailwind with proper extensions basically shows u ever piece of css that is being written when u hover over the class with your mouse.
Lmfao ure making it sound like tailwind is an operating system API abstracting out the complexities of managing processes and input output hardware
@@pokefreak2112 this is definitely gatekeeping, tailwind is literally just CSS, do you think the person who's you called "not ready" for tailwind would do any different if they stayed in CSS?
Hi, I've just focused on CSS,
I cannot agree with you more
Everyone should know CSS before trying Tailwind and the others,
You've helped me a lot in my programming journy.
Thank you so much Dave.❤
Glad I've helped!
as a backend developer. it is easy learn twcss because i dont know basic css styling, so i cannot compared
You use tailwind for backend??? 🤔
I was not on Tailwind side until I used it, it was very small project consist of just 3 pages, yet while working for different projects with MUI, I really missed Tailwind.
Your video about tailwind css makes me to learn tailwind css. This one awesome....Still I am experimenting..
After starting using Tailwind, we migrated around 13 frontend projects away from all other utility libraries and custom css. New policy was to never write custom css class, if it is not supported by Tailwind, we won't use it. After 2 months of refactoring, no one ever wanted to even look at custom css ever again, only Tailwind.
If you hate tailwind structure, try out the tailwind-styled-components package
I'm not a fan of tailwind because it reduces the semantic nature of HTML 5. If you need to debug a JS or CSS bug, it's tricky to pinpoint the affected element when there's so many utility classes
I prefer Sass with the BEM methodology 🙂
Nothing wrong with your approach. Tailwind Fold will hide those classes for you though.
Tailwind has its uses for sure. I use it all the time for getting going quickly especially when I’m learning other technology and I just want to get styling done quickly.
However, I also think tailwind is probably the most overused technology around. It has become popular through content creators using it to scaffold projects that will never need to scale. This encourages people to launch products quickly and then tie themselves in knots when they realise that they need an actual design system and Tailwind is specifically designed not to be the choice for that.
@@ollymarsters6308 Nothing wrong with your opinion, but I have a different one. It scales nicely with reusable components and a system like ShadCN UI. Everyone's on the same page with class names, too.
@@DaveGrayTeachesCode but there’s a difference between scalability for a personal project when you are in control and when you are working in a team with other devs, designers and constantly changing requirements. It might feel like it scales well when you’re in control but the composability of class names can become hard to track in code review and even harder to change wholesale when you have to experiment with something totally new.
Whenever I’ve used it for long enough it hasn’t been long until I’ve reached for the @apply directive despite that being counterintuitive for tailwinds central philosophy.
I think there are tools that might not enable you to move quite as quick but save you time later by allowing you to write far more maintainable UIs. But each to their own opinion what I don’t like is the evangelism surrounding Tailwind as if it’s the natural choice for every project, when so many other choices could be a better fit.
Twas like this at first, until I outgrew the skill issue behind it
My problem with Tailwind is that it just feels like inline css, except it's a bit shorter to type.
To elaborate:
I'm having the same thought process as when working with CSS, but with classic CSS class name at least I can use multiple rules at once and then call that class on different elements. With Tailwind, I have to type all the utility classes over and over again.
But with that being said, I am not against utility classes in general, I like them because they offer quick modification.
In those cases it's always better to reuse the component instead of classes
I dont care how it looks it takes twice as long and feels like learning css all over again
Twice as long? Yeah, you obviously never used tailwind or looked at the docs.
@@cryMoreLoL Let's say you are a Tailwind purist as an extreme example. You never use regular CSS. You don't even know regular CSS because all you've ever used is Tailwind. Your project has grown to use a certain style for a certain element that is reused 50 times across the project. Today you need to update that style. With regular CSS you had a single class you could go to and update. It took a few seconds. With Tailwind you had to go to each element and update the inline style. It didn't necessarily take too long, but it still took a lot more effort and you couldn't be entirely sure you caught them all by using Ctrl+f since someone on the team may have been a bit naughty and put the Tailwind class names a bit in the wrong order instead of copy-pasting the established styling. Again, extreme example, but it's one of the flaws with inline styling.
@@nustanielYou understand that with tailwind, if you have a particular pattern that you reuse throughout your project, say 50 times, as you mentioned, you can just make a custom tailwind class. And if you need to change that style, just update the singular class that you created. Tailwind works extremely well with design systems.
@@Showmatic So you are doing what you'd do without Tailwind. What was the benefit of Tailwind in that scenario again?
@@nustaniel the benefit is you wouldn't have to create a class in EVERY instance. Especially the arbitrary ones. The fact that you didn't even know it was a possibility, much less how it's implemented, shows you haven't even given it an honest try to make a unbiased conclusion. I say this as a previous tailwind hater who shit on it every chance I could, even though I hadn't given it a proper chance.
So what to use as a alternative of Tailwind?
I like chakra ui better (still haven't look into panda properly) which is not too different, but while I don't consider myself a fan of tailwind I also don't see the point of criticising / judging others for using it..
I’ve just started using it. Much prefer it over regular CSS already.
I was a tailwindcss hater... until I learned it and used it. Save me time, and my sanity meter.
I recently started using tailwind after deliberately ignoring it for a few years, and I’m so disappointed in myself for ignoring it for years. I love tailwind
I really love tailwind css and I really know the css because I used to work with css but when I got the tailwind css I combined it with Material UI and my UI was the best
When u say.... 😅😅😅
I just started a new project and am trying out tailwind, never used it before tbh, so far so good
tailwind is the best. I always wanted to do this way and tracking the css is extremely easy don't need to go through all the css file which is affecting it.
Thanks, I agree. When it gets lengthy I will Convert it to CSS sometimes and put it in a css file to keep it clean. I might try the Tailwind Fold extension, I forgot that one. I like Tailwind for the Media Queries.
What is different from Tailwind's implementation and the vanilla CSS media queries? I mean it's not doing anything different than what vanilla CSS does.
@@nustaniel It is easier for me to write text-sm xs:text-lg sm: text-2xl md: text-3xl , than writing out several lines of @media and {so on, and so on}. True , it does the same thing. I like to build in Tailwind and some times break it down after if it bugs me . I just assign a className to everything, you have to anyways. And then just hit ctrl + shift + f and it will appear in the search bar in VSCODE and it will show up in the CSS file it it is used there also.
@@MyBaBB Your CSS shouldn't really require that many media queries tbh., if it does, it might be time to look at more responsive solutions with min and max, clamp and calcs. There are times when you simply have no other choice, in example I recently had to make the middle of three flex items pop down first as they wrapped, so I was forced to use a media query to change the order at its very specific breakpoint, but overall most CSS can be written to keep the design scalable and clean without a reliance on too many queries.
I love tailwind,..since i started using it i never going back 😅 i just cannot see myself going back and forth trying to fix something small,..
Everything depends on the project at hand.
Good luck using tailwind when you try to create complex designs with grid where columns are not equal, where you have to use css variables or css functions like calc or clamp.
In cases like this tailwind falls short and it’s faster to use css or scss.
About the unused styles and css specificity issues. Yes tailwind life a million times easier but this is where the “knowing css” part comes.
If you write css following BEM or some other methodology then you can keep it clean and lean.
Most bundlers have cssnano or some other tool to prune unused styles.
Having said all that, I use tailwind everyday for one very simple reason.
Coding style is unique to each developer and if you’re working in a big team chances are the code could be hard to read if you’re not the author.
Having tailwind “forces” us all to write the same way thus making it easier for newcomers to start (assuming they know tailwind) and keeping all the team in check about how we style things.
I wish there was a tool for html as well that forces us to all use proper semantic tags.
Spot on with everything you said here - I completely agree!
I'm rotting with css
Thinking it would take lot of time to learn new framework
But guess I'm wrong
they're just salty because things are a lot simpler nowadays as opposed to back in the day when you had to maintain css the old fashioned way. There's always going to be elitist haters with everything in life
People are just people, they hate things they don't understand
They also don’t like things that aren’t very good.
That explains why Tailwind enthusiasts hate regular CSS 😜
@@nustaniel 🤣
@@Darkpill-2
They also are extremely bad at distinguishing things they don't understand and things that aren't very good.
The problem is that those does not have experience of how hard to maintain old css code base written by other people.
It's not typically a problem to read CSS written by other people. CSS is overall very simple. It's not Javascript with potentially complex logic. You may not understand my
function bufferToHex(buffer) {
const byteArray = new Uint8Array(buffer);
return Array.from(byteArray).map(byte => byte.toString(16).padStart(2, '0')).join('');
}
function hexToBuffer(hex) {
let bytes = [];
for (let i = 0; i < hex.length; i += 2) {
bytes.push(parseInt(hex.substr(i, 2), 16));
}
return new Uint8Array(bytes).buffer;
}
and why I use them unless you know it's related to cryptography, but you should easily understand
display: flex;
align-items: center;
justify-content: center;
width: 2.75em;
height: 3em;
border: 0.0625em solid color-mix(in srgb, currentColor 30%, transparent);
border-radius: 0.25em;
position: relative;
outline: none;
cursor: pointer;
Maintaining Tailwind isn't any easier than maintaining regular CSS. When the styling is inline and the project is huge, how do you easily know what elements are sharing the same styling with Tailwind? Let's say there's two kinds of buttons used in the project, regular and primary buttons. You are asked to change the styling of every primary button used across the entire project. Instead of updating the one established class the team had agreed to use for primary buttons, are you going to have to search for every button with a specific inline styling to adjust it across the entire project? That is where I find Tailwind to be bad more so than how ugly it looks with inline styling.
God, you're an awesome instructor! I love your work, and have learned a lot from you.
"long class names". What year are you living in? CSS Module scripts (the native CSS module API) > Tailwind.
I use css with the full page styles. Then for indiviual components i use inline
you got to write your code somewhere, and it's hard for me that web developers having problem with writing it inline, specially when it is shorter. personally I love JSX where every aspect of the web page comes together, maybe a little ugly but web codes are always ugly
I think tailwind is pretty good.
But if you do fullstack, tailwind is probably going to be tiring
You just made an argument that you prefer shorter tailwind classes over longer custom classes.
Just skipped out on the fact that these custom classes can are a couple words, while tailwind gets you an entire WALL of unreadable code. You want to look up the structure of your page? - gotta sift through garbage.
Prefer - that word indicates it is my opinion, choice, preference. Yes, I do prefer Tailwind. You don't have to. However, I provide good some strengths of Tailwind. I don't think it is unreadable code or garbage. YMMV.
It should be readable you just put your mouse over the class to see the css.
"“Opinions are like assholes, everyone has one but they think each others stink.”" trying to convince people of things where logic is of no consequence isn't a fulfilling endeavor.
learning curve of tailwind:
little at first,
big at lastly
i mean you spending more effor for learn when beginning but lastly lowest
Is it hard to learn?
I using Tailwind my self and got zero issues with it but also had to work on some of the worst examples of Tailwind of developers that clearly not understood the First C in css they put full classes on every single element. Making those extremely painful to edit!
Because cascading doesn’t scale. So just setting all styles for an element within said element is 10x more scalable.
As someone who has written css for 20 years, Tailwind is incredible. I honestly don't want to see some custom style sheet with some custom naming conventions that were made up ever again.
This! Totally agree!
I want to like Tailwind, and you can produce beautiful results with it... but it produces SO much duplication of utility class names and makes the HTML really hard to read. Not sure it's for me, but that doesn't mean it's bad or wrong for everyone.
In a world where the component is kinda, this is not necessarily a problem...
Using it with regular html and js tho, must suck
Me and the company I’ve worked for previously hated on it on the basis that it’s basically inline CSS. They were also far more experienced than I was but I agree on the concept that CSS doesn’t belong inline… and although I still think that’s true, it’s not exactly what TailwindCSS does. After learning what it’s capable of, how to configure it and how to use it… oh my god. I’m never going back. It’s truly amazing to work with.
Yeah! No need to learn, memorize components props/attributes or refer to any docs once you work in a while.
Could you please make a video about responsive design using tailwind css?
You are the best Dave! Screw the haters!
Not my problem, lol. This is exactly why I fucked off to be a backend dev as soon as I realized what frontend work entails.
CSS is a nightmare. I still struggle a lot while giving a class name 😅😅
The struggle is real.
CSS without classes, have you heard of that? It's a dream
It can be a nightmare yeah, it's important to find or cultivate a good working method to creating css.
People complaining about people using tailwind clearly doesnt know enough about it, not even to the point where one can merge the two (tailwind and css) together to have the best of both worlds. One will always loose by having the mindset those people have, and in my experience, those people have not had alot of experience.
I feel those who don't use Tailwind tend to have a better understanding of CSS. They aren't going to say that maintaining CSS written by others are complicated when CSS in itself isn't complicated to read. Well I guess modern CSS is getting a bit more complicated;
label[data-floating-label]:where(:has(> :focus), :has(> :not(:placeholder-shown)))::after
😂 Still, it's pretty easy to read, a with the data-floating-label attribute, be that blank or ="specified" where the child has focus or it does not have a placeholder-shown, style the ::after pseudo-element.
that tools punchline was perfect
😆
Thank you Dave! You da man! 👏🏼👏🏼👏🏼
Never understood developers who have such hate for this library. There is a reason why it got so popular.
Yeah, you might have to look up some classnames but in the end, you're just writing css without the need of taking care of duplications.
You can even use both, normal css and tailwind together if you really have issues with letting go of your beloved css and sass files.
Okay, let's say you got a rather large project. Let's say this project has maybe 200 buttons across various pages and elements. I'm exaggerating a bit here, but bear with me.
Let's say with regular CSS you established as a team that you simply style button with a default button class, and you add a primary sub class to further style button to give it the project's primary call to action color so it stands out and such.
With a team that uses Tailwind, everyone has to copy paste the agreed upon inline styling for every single they write into the HTML. Now yes, you can use a combination as you said, but let's be a bit extreme here and say you either use regular CSS or you use inline Tailwind.
Now after let's say a year, you and your team decide you want to change the primary button design, maybe fix a flaw with it. With regular CSS you updated the primary class and that took care of every single button of the project. With Tailwind, you had to go to all 200 buttons and check which ones were using the primary styling and adjust those to the new styling.
Now, this is an exaggerated example, it's not realistic since you don't have to do it like that, but it's pointing out through extremes where I find flaws with the Tailwind approach. For large projects. To maintain the Tailwind styling gets very annoying since you have to hop to every element that reused the same styling to update the styling that could have been updated in a single class to take care of it. You can speed this up with Ctrl+F and there are Replace All functions we can use in our editors and all that (which isn't strictly going to catch every button styled since maybe a few has a couple extra Tailwind class names thrown in), but I still find it much less maintainable.
I also dislike how it looks, it makes the HTML code harder to read which may include other things like aria and data- attributes and even necessary style="--variable" adjustments applied through Javascript, etc.
Do I HATE Tailwind? Not really. But I certainly think it isn't helping anyone learn CSS. You learn Tailwind and may even think CSS is complex, when it's really not.
@@nustaniel I hear you, and that extreme example definitely shows a potential downside of Tailwind for large-scale projects. But, to be fair, traditional CSS can suffer from similar maintainability issues if not managed carefully.
If every button is truly unique, then yes, updating 200 of them one-by-one is a nightmare, regardless of whether you're using Tailwind or plain CSS.
You wouldn't be copy-pasting inline styles 200 times. You'd have a Button component that handles the primary styling. A design change would mostly involve updating that component, not every button instance. It's similar to how you'd update a well-organized button.css file.
Of course, there's always the risk of someone making a "quick fix" that overrides styles elsewhere, leading to a hunt for the "fix". This can happen with both Tailwind and CSS.
I've worked on projects of all sizes, and I've found Tailwind to be a joy on larger projects, especially when working with established designs.
That being said, I agree that Tailwind doesn't exactly encourage deep CSS knowledge. It's more like a power tool - great for those who already know their way around CSS and want to build things faster, but potentially overwhelming for beginners. It's like knowing how to use a manual screwdriver is essential, but a power drill can be a game-changer once you're comfortable with the basics. But that's the same discussion, whether you should learn plain JavaScript before you even think about touching any JS framework.
I see Tailwind as an alternative, not a replacement. If it helps teams iterate and ship faster, it has its place. I've worked with CSS, preprocessors, and Tailwind for the past 10 years, so I've seen the pros and cons of each.
I remember working on a Drupal 7 site with a minimal Tailwind setup. It wasn't ideal because we didn't fully adapt our workflow to leverage its strengths.
Later that year, we adopted a component-based approach with Twig templates, and suddenly Tailwind clicked.
As with any technology, you have to choose the right tool for the job. If you expect Tailwind to be a drop-in replacement for CSS without adapting your workflow, you might be disappointed.
@@nustaniel
> [With a team that uses Tailwind, everyone has to copy paste the agreed upon inline styling for every single they write into the HTML.]
My immediate problem with you, this is just blatantly false. You can quite literally just create reusable components (as you should) instead of copying and pasting the same button 2000 times. This way you can literally just write it in one single place and reuse everywhere else.
@@diadetediotedio6918 "My immediate problem with you," selective reading. I said it was an extreme example, not that it was realistic. Also if you are using components, why not use regular CSS then? That is effectively a CSS class. You write it one place and reuse it everywhere else as a class.
Tailwind otherwise is basically inline style="" CSS but using the class="" which is meant to house the classes that styles a component.
And sure, Tailwind is classes styling components to be fair, but to the extreme when it comes to separating out everything into mini-classes that does basically one thing. "flex" instead of "display: flex;" in example. I read an article saying "Tailwind flex", as if it was something Tailwind did that CSS doesn't do natively.
Use it if you want to use it and find it useful, nobody is going to stop you and if you find it better than simply using regular CSS and that it helps you develop better products, all the more power to you. I find it idiotic and it's pretty much impossible to properly use for querySelectorAll() and such with JavaScript unless you are basically creating a custom CSS class as a component.
Tailwind CSS really saves up lots of time
I don't understand why this hatred is for , maybe tailwind has its own downsides but surely there are lots of benefits that I've personally experienced useing tailwind
What are the benefits though? Are there genuine benefits, or perceived benefits? How easy is it for you to re-style something you have reused a number of times in your projects? Can you update one thing or do you have to go to each element you placed these inline class tags on to, effectively inline styling, in order to update them all to the new style?
I used to hate tailwind too because it makes the html "mucho texto". Until it all make sense ☠️☠️ now tailwind is the love of my life
It sounds like most of these people never heard of vs code or extensions and probably write all their css in notepad. I can only imagine how long it takes the company to get the ball rolling on any project 🤦♂️
Writing Tailwind is not really that much faster than writing regular CSS if you know regular CSS. VSCode auto-completes styles as you type them. Write dis and you can tab it to display: ; with the cursor in front of the ; and a context menu ready to select the various valid values, narrow that down by typing or for that matter tab again to complete as a very basic example. Once you wrote a class, you simply write the class name on the various elements that share that styling, same way you'd copy paste the inline styling with Tailwind once you wrote it once. Simple enough.
The benefit in regular old CSS is that you update one class that you have reused over going to each element that shared the same styling with inline Tailwind classes. You can of course use a combination of both, but I would rather have a well organized project using regular CSS over one that uses Tailwind.
@@nustaniel It doesn’t matter what I say to anyone that already has an opinion of tailwind especially when they lack the basic understanding of how to use tailwind. I would suggest to read the docs because it covers all the topics of “tailwind is bad because .” If you really have no interest in tailwind then disregard all this, you’ve already made up your mind.
@@cryMoreLoL You're saying people not interested in Tailwind must be coding in Notepad. It's not like Tailwind is faster with the right IDE and plugins. You can have efficiency and speed with vanilla CSS too. You can have plugins that looks for unused classes and prompts if you want to remove them or not. You have auto-completion. There's no real perk with Tailwind because VSCode and plugins exist as if that isn't the case for practically anything, vanilla or in relation to other framework wrappers.
If you have to resort to @apply in a larger project where it becomes unmanagable to use inline Tailwind to style components you reuse frequently, by using Tailwind classes inside a custom .class, then what was the real point of Tailwind in that project?
Tailwind is bad because it makes a lot of new developers never really learn CSS, they learn Tailwind classes. Otherwise, why are people asking for "How do I do this in Tailwind?" on most tutorials that are using any other framework or vanilla CSS and it's the most basic mundane simple thing and should be straight forward to translate from one to the other. Tailwind is bad because it takes the old practice of styling inline on the HTML tags in the style="" attribute, and moves it to class="" instead, it's taking web development back to the early 2000s. Tailwind bad, because it's not really necessary. It does nothing technically speaking unique. It's a collection of classes to shorten the code a tiny bit. flex is simply display: flex; mr-10 is margin-right: 10px; It's hardly groundbreaking.
Tailwind hurts their egos - it invalidates the time and torture spent learning the horror of CSS.
Hi, i learn css i make some projects simple I want to ask should i learn tailwind or bootstrap
I'd stick to vanilla CSS, it's not like it's overly complicated and you don't rely on a wrapper dependency to write your styling.
@@nustaniel thank you for your advice but I don't know js i know only django
since youre new, id suggest learning the basics of css first.
the basic is enough, don't go too deep in it since you wont use like 50% of the css property.
and if you want to try css frameworks, tailwind is more customizable, but bootstrap is easier to use.
@@theswordslay3542 thank you for your advice i really appreciate it
Those who did not experience the terror of naming a css class would hate tailwind 😂
Tailwind is the best thing happened to css lol, I don't think that even the latest styleX from meta can replace it
I hated it but not anymore, thanks for the tailwind fold extention
But with tailwind - how can you do the design not just from head, but the exact like on a templete. For example with margin 23px
With arbitrary values. You can also create a custom class for a specific size like that.
@@DaveGrayTeachesCode But why do I need to use Tailwind, if I still need to create custom classes... I am a bit confused
@@kirillzlobin7135 no you don't, you only need put "mx-[23px]" on your html element and tailwind will take care of it.
yes you can replace 23px with any other value and it'll still work, no need to create custom class, that's just how complete tailwind is
@@kirillzlobin7135
Tailwind for the general case, 80%, CSS for the resting 20%
But that's said, you can do m-[23px] in tailwind and it will work, it accepts arbitrary values and compiles them for you.
For the frontend developer, the goal is the better UX/UI, not the CSS.
Yes!
Those same people don’t know CSS either. Don’t sweat it.
So, what exactly is tailwind?
A CSS wrapper library making some common styling into pre-cooked class names that you place inline in the HTML to style various elements. Just like the video said. It's largely a overhyped pointless wrapper that becomes very hard to manage in large projects where you end up doing regular CSS anyways with at best a bit of Tailwind since you can't keep updating every single element that shares the same base style every single time you make a change to that style over simply updating a single class that will update all the elements at once. The ironic part is that Tailwind class names aren't always that much shorter than writing the regular CSS yourself. Also a lot of people may never really learn proper CSS, same way a lot of React devs don't learn proper Javascript, why you often see "How do I do this in Tailwind, how do I do this in React" comments on tutorials that uses vanilla syntax CSS or JS.
A different way of styling your components.
Basically instead of splitting your HTML and CSS, you join them in a composable way with very tiny and customizable classes provided by the library.
An example:
centered element
this does the same as writting something like:
centered-elements
(css file)
.center-elements {
display: flex;
align-items: center;
justify-content: center;
}
and just centralizes the styles in one single place with good defaults.
I'm not here to sell it, this is just a general example and explanation, you can give it a try and see if you like it.
I have been hated/Insulted by people in Telegram groups
I use tailwind because I am lazy, I don't know how to structure css and I have no ideea how to name classes. Wihtout Tailwind I could not do any web app and I would have been unmployed, even homeless
Seems exaggerated, but if true, check out the CSS course on my channel. It will help you learn CSS which will improve your Tailwind usage, too.
Tailwind is sweet 😋
Well said Dave!
Thanks for that your tailwindcss class video
Im working on web optimizing and one of the big problem that ive encountered is the unused css which shared across all pages due to manual css or scss. But with tailwindcss it only used the utility in the build when needed which is greatly amazing to be done 🎉. People dont realized this thing if they dont experience the problem on optimization
I genuinely do not understand why you'd have unused CSS. That is sloppy development. Once you write a class for an element, why are you writing a new class for that element instead of updating the style it was originally given? If you do decide to update it to another class, why aren't you removing the old one since it is no longer used? Does Tailwind magically make sloppy developers not leave pointless styling in the inline class styling?
And is it just as amazing to update the styles on various elements sharing the same styling with Tailwind? Let's say you have to update a style used across all pages on various elements on each page. Let's say for simplicity that it's a button style that is either a regular style or a primary button style. Sometimes with a bit custom styling modifying the default style a bit.
With regular CSS you used a few classes to default style and slightly adjust that default style. With Tailwind you used inline styling through various class names and they're not all the same so it's not necessarily as easy to Ctrl+f to find all the same ones sharing overall the same style. I don't really see the benefit.
It's always about sloppy developers in favor of Tailwind. As if sloppy developers can't make sloppy Tailwind syntax too.
@@nustaniel
> I genuinely do not understand why you'd have unused CSS.
This , it is the pit of despair that is problematic.
@@diadetediotedio6918 You can get extensions that check for unused CSS and JavaScript and so on forth if that is something you struggle with. It's not like that is something you can only do with Tailwind. Can't you potentially end up leaving a bunch of little microstyling Tailwind classes on elements too here and there? Is that something that will never happen? I mean, there's more likelihood of that happening than leaving a full on CSS class that is unused anywhere in your stylesheet. Maybe you didn't need the margin-right: 10px; or I mean mr-10. No compiler is going to warn you that your mr-10 isn't necessary, because how would it know. A plugin can tell you that your .menu-right or whatever class is not used anywhere though by scanning through the HTML markup and JavaScript code. Also what pit of despair? It's a pit of despair to leave an unused CSS class? It doesn't do anything besides bloating your CSS a tiny bit. Sounds a bit dramatic to call it a pit of despair.
This short bangs
To me I learned deep in css because of tailwind.
Grats on learning what actually happens under the hood. Not everyone seems to care to learn, I see so many "How do I do this in Tailwind" comments whenever I watch a tutorial that uses vanilla syntax.
Yes you are right. In vscode the tailwind extension allows you to see the actual code behind the utility class.
How it responsive ?
Love this message ❤
Tailwind is so excellent. It's a life saver. I don't and will never care what the haters say.
Wow that comment I wrote like 3 months ago lived rent free in your head.
In all seriousness though we struggle with things like tailwind at my work every day. Using css tools like this ends up complicating things greatly when you're working on a large platform and you often times find yourself (and your teammates) writing lots of custom rules to override the rules provided by already in-use tailwind (or Material UI) classes.
You sound like an awful person and a horrible colleague.
No, but the replies to my short from one month ago made a good discussion topic.
From your comment about "tools like this", I can tell you don't quite follow how Tailwind utility classes work. It's not Bootstrap or Material UI here. They just apply one CSS style per class. You don't need to override them like you would a Bootstrap button.
Seems you have zero idea about tailwind works, yet you try to bash with absolutely unrelated stuff...
Don't you see how absolutely idiotic that is?
I would love to see why your team is doing that. Material obviously is a problem on itself, but I don't see this being such of a problem with tailwind.
It works for me. that's all I can say!