Tailwind CSS is the worst…
ฝัง
- เผยแพร่เมื่อ 28 ก.ย. 2024
- People have been debating the merits of Tailwind on twitter recently, so let's look at the pros and cons of this popular CSS library.
#css #webdevelopment #TheCodeReport
💬 Chat with Me on Discord
/ discord
🔗 Resources
Tailwind Docs tailwindcss.com/
Source Tweet / 1613595843059404800
Tailwind in 100 Seconds • Tailwind in 100 Seconds
Pico CSS picocss.com/
VS Code Inline Fold github.com/moa...
🔥 Get More Content - Upgrade to PRO
Upgrade at fireship.io/pro
Use code YT25 for 25% off PRO access
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Should I use tailwind?
- Why is tailwind popular?
- Tailwind vs CSS?
- Tailwind pro tips
- Twitter drama about CSS and web development
I used to hate Tailwind but when I used it for a really big project that's when I started to appreciate it. It saves me hundreds of hours in styling.
I use it for big and small projects, haven't seen any better alternatives yet.
@@Smartercow .....ammm, regular CSS with classes is just fine.
@@brokula1312 nope. With regular css you always end up with shit ton of unnecessary lines.
@@benasmockus6988 exactly
I had the same experience, I hated it when I was using css directly but when my css bundle sizes started to get ridiculous, I just switched to tailwind directly, I love it now!!
It seems like people forget you can still have CSS classes and style tags in your app’s CSS file for the more universal stuff like buttons, text boxes, etc. Inline styles are just super nice for single use things like navigation headers, etc.
Let's deal with the fact, we are lazy and BEM always was bullsh*t. So when we try TailwindCSS we fall in love. Also, the documentation is fast to use. That's a big difference with Badstrap.
Nah, lets better create Component with Tailwind styles for buttons, text boxes and etc. No CSS
@@juanpablolopezfracaro6437 Agreed! BEM was the king until developers realized that they were still exhausted in naming things. Badstrap was bad, indeed.
inline styles are nice for failing codereviews randomly. 😂
@@stas_khavruk huh, i misunderstood. Tailwind itself is CSS, it is just a tool.
Ones you go tailwind you can never go back
Easy. Very limiting. Very cluttered class name value which is hard to digest. For React I get why this would be good. For other normal frameworks with built-in CSS encapsulation I'd use Tailwind for utility only. Not for styling everything. They do a great job of tree shaking everything that's not being used. But use it to build a design system - never.
Not really, it’s very easy to go back
@@sergeygultyayev4828 we build a design system with tailwind + story book to create a components library. worked amazing no draw backs yet
as easy as this tailwind come, as easy as it go
Once you find bugs with css library. I am using css and sass now.
I had been using the utility classes of Bootstrap for years before Tailwind came along. Because of the limited features of the Bootstrap utility classes, I had to augment it with SASS for more bespoke styles, now I can do 95% of my styling using Tailwind with a tiny tiny global plain CSS for those real edge cases. It's great.
It's just funny how things cycle through time. It used to be undesirable to shove more ambiguous custom classes into the markup. Now we've taken the old idea of helper and utility classes to full press.
I have 2 questions. 1) Does tailwind come with a fully cobfigurable grid system like in bootstrap? If you were to compare both, which one has better grid system and why? 2) Isn't it a bit ugly to add, lets say" "d-flex flex-column aling-items-center" and tben write some custom CSS to add another class to that element to create highly custom elements? In the end your own CSS code just doesn't include those added utility classes. I don't like this way of doing styling. I think that when you need to take a look at a code that you write long time ago, you need to consider both added classes and your custom CSS. Am I false? (I may be since I don't have experince with tailwind, thanks in advance)
@m.caglartufan2454 tailwind comes with grid and grid controls but with no defined system that is forced upon you. you have to add your own media queries to handle such cases or you can use clamp, auto-fit and other such features. it's like writing plain css without worrying about the classnames and breaking other components if css is shared.
about custom css in most cases you can write down custom edge cases in the tailwind class itself for example w-[clamp()] or make extension classes in config and for real edge cases using tailwind @layers to add a custom css.
in my experience i never needed custom css unless it was global such as defining body styles.
kinda funny cuz i was the same, had been using bootstrap utilities for years then jumped into a big project full of tailwind. My result was different tho, I hated tailwind and still do. These giant bricks of inline styles are terrible to me. I would rather use bootstrap utility classes to cover the vast majority of use cases and then write a few custom classes per component when needed.
@@DKprojects9 When I use Tailwind in large projects and when a component styling is ready(let's say a card)I use @apply and replace all the classes with one single class in the html that includes the other ones
Been using it at work for three years now and I love that it provides some guard rails while still letting me build any design what so ever. But having lived through the inline styling of the 90s it did feel absolutely wrong to use utility classes at first. In older versions I there were a few things missing I sometimes needed, but TW3 has so far natively had everything I use for work.
In the past, css styles were written in the index.html and in tags. Then I learned to put css in an extra file and was happy with it. And nowadays you use tailwind where css is again crammed into a tag. I don't understand that.
Tailwind makes everything even more confusing than the former css.
You do realize you can still use CSS classes as an inline code & then apply tailwind features like padding, Col size, row size, Colors and many more in that class inside the external css file.
This gives you lot of freedom over your code design while also keeping your HTML code minimum & clean
You know he's bout to drop video on the topic when he asks about it in community posts 💀
Great explanation, I have an interview next week, and the whole day I was looking for a better explanation of tailwind, went through many yt videos, but was confused, thanks, I got the perfect explanation which I was looking for.
I tried Tailwind before learning much CSS. I felt like I was having to learn CSS to understand how to use Tailwind. I switched to plain CSS for now and got so much more done.
You could learn BEM ✌️
Very good video with valid criticism. I do like Tailwind but I don't use it, especially on big projects, because it's extremely hard to maintain it. I lost count of how many times I had to re-write a whole component because there was so many tailwind classes I had no idea what was going on. In my opnion, Styled Components solves all the issues with vanilla CSS without losing the power of CSS.
It weights too much
But the fact that you can quickly dispose of, and redo a piece of tailwind code without needing to track down old CSS code could be an argument for using tailwind?
I’m not in the tailwind camp though, I mainly solve this issue using CSS modules or styled jsx to write vanilla looking CSS that’s scoped directly to the component.
@@jshstuff Yeah, it is an argument for tailwind when compared to vanilla CSS. But Styled-Components solves this issue because it's scoped to your component. So you can have all your styling for a given component in the same file. No need to look for it elsewhere.
@@jshstuff I've never understood why people have such a hard time tracking down CSS. Don't overcomplicate your site with 50 nested divs and styling is never an issue. Name your classes well. Tailwind has proven that people don't care about class names being 1000 characters long, so just be descriptive with your classes.
@@Daktyl198 for me it’s not so much about finding the css. It’s usually that I delete the markup but the styles remain in the stylesheet and only get deleted a year later when I realize they’ve been orphaned. It’s one of the reasons I love things like CSS modules/styled components where you can more easily delete everything at once
I've been having to work with a system that uses Tailwind CSS that another company wrote and none of it made any sense coming from bootstrap. This really helped understand why there was no "baseline" style I could find like Bootstrap has. Thank you! Liked and subscribed
While I haven't used Tailwind much, I much prefer just using plain SCSS. Quite a few of the problems that Tailwind is designed to solve are just React-isms in my opinion, and I don't use React. One of the advantages that I do think Tailwind has is that it makes it harder to introduce visual inconsistencies and the way it's structured lends itself to good visual design. Overall I still prefer writing SCSS, though.
Can you give examples of React-isms? I really don't see any
@@ifelseprog component style
@@ifelseprog React makes styling really difficult. In Vue (3 with SFCs), scoped styles really simplify how styling components works and there really isn't much in your global stylesheet. Also, changing the stylesheet in a component generally can't break things outside it (I say generally, because you can opt in to affecting your children in a scoped stylesheet) This is made even better by SCSS with its mixins and such.
Also, modern CSS also has quite a few composite properties like the inset shown in the video.
The fact that it makes making things look visually pleasing is easier is an advantage, but not a big one in my opinion.
With scoped styles, selectors that don't go anywhere will be highlighted in your editor. (This does not apply to the global stylesheet, but I don't have much in there anyway.)
Finally, Tailwind is just terrible to read. The inline fold extension is just a hack on top of it.
@@Mabi19 oh ok I see, thank you
@@Mabi19 I was looking for someone else to mention scoped styles. This isn't just a vue thing, btw. Scoped styles are an html5 feature.
I tried tailwind on a project and it was a terrible experience. IMO, all the problems tailwind solves are solved better with other methods, including the aesthetics. If you're looking for visually pleasing with little effort or knowledge of how to accomplish it, just use a component framework. They have utility classes too, but have sensible default styling, so it requires fewer.
Not really 3:04. I'm using Bootstrap but my projects aren't looking like bootstrap apps. It's because you can change many elements in bootstrap, avoid some of styles and combine all togeter. All thanks to scss files.
I once had the same idea that Tailwind is based on, before it existed, and created my own library of css classes similar to Tailwind's. But I didn't like the html being cluttered and not having the styles separate. I also like to theme things, and that also became more difficult. Since then, I learned to fully master scss/sass and think it's much more powerful , creates more legible code and is easier to maintain. I'd never go back to plain css though, at least at it's current state.
"A library of CSS classes" is just Bootstrap and it existed since the dawn of time. And yeah theming in tailwind is terrible.
for the react fanboys here, I highly recommend mantine!
It is great for themes, and it has some features from scss (but everything is in js/ts)
@@ra2enjoyer708 the ring in tailwind is dead simple you are confusing it with the nightmare that is customizing bootstrap
The way to go!
@@PanosPitsi The fuck are you even saying? Theming in tailwind is literally doubling the amount of declarations on every single classname.
But it is understandable why a typical tailwind user would struggle with overwriting other rules, they don't know what specificity is because they don't know CSS.
I don't like tailwind, I keep trying to find it hard to compose I just keep going to css
I didn't at first too, but once you get used to it, it just flows
The major concern with css for me is the decision fatigue, in big projects you've multiple levels of abstraction, if you wanna change the color of some font, it has to be changed in multiple css files, there's heirarchy of css patterns in big projects like root element will have these classes by default etc. In tailwind i dont need to care about that, just add the classes wherever is needed.
to me this is one of the more valid critiques of css
So instead of changing the font on 10 files, you now have to change the font color on 50 elements?
@@Daktyl198 yes I'm comfortable with the wood work rather than changing the font on .root_element > h1 {}, main_content text {}, and .. 100 others. In this kind of system, there's always a fatigue to make things more efficient, a design pattern is required. I don't wanna take that headache, I'd just add the font wherever it's required directly.
I have looked at tailwind multiple times over the past few years, however I feel like many of the problems it tries to solve are already solved by component frameworks like Vue or React when the styles of a component are scoped to that component only. That way you can have good class names without having to worry about breaking something somewhere else and without having the ugly html and toolibg hassels.
One of the biggest things I love is how it handles things like media queries and state. Being able to write something like "flex flex-col md:flex-row" saves several lines of CSS, and tells me exactly what it does.
1. Read about directives in Tailwind
2. Read about arbitrary values in Tailwind
3. Love Tailwind forever from now
how do you like them apples
Honestly, Tailwind is mostly used by devs that just don't know how to use css preprocessors. There is nothing Tailwind solves that wasn't already solved. But what it does do is break the guidelines of html and css. It's disappointing to see we get all these things just because people don't know how to use existing tools. Have these people ever looked at sass for example?
Same for machinecode
I have my react components and separate scoped/modular SCSS files for that component - this approach is so much cleaner and easier than bloated jsx elements with tailwind.
It's also so much easier to debug in browser and make changes.
This is the way.
Just when I thought of making a project to learn tailwind 😭👍🏼
Just make it. I hate writing css (I am a backend developer) but tailwind makes me love it. You don't need to write long classes in your Html tag at the end, you can use @apply and convert that long classes into one class.
My main issue with Tailwind, isn't even about Tailwind itself. But I've seen a lot of newer, starting web developers going to Tailwind immediately, and I worry that this is resulting in those people having less understanding of how it works under the hood. CSS may be a bit cumbersome to write, but in learning it you come to understand many core underlying principles of how the browser's actually work and render your page. I've seen people using Tailwind who don't understand what cascading means, and are constantly redefining things that are inherited. Understanding Tailwind doesn't necessarily make you a better CSS developer, but understanding CSS will likely make you a better Tailwind developer. Understanding CSS itself also makes it easier to switch between styling libraries, people who learn exclusively Tailwind and haven't spent time understanding how CSS works may find it harder to switch to other frameworks like Pico as stated in the video, may have a harder time wrapping their head around the differences. I feel Tailwind is best used when you already know at least some CSS.
I would venture to rebut this. If new developer end up using Tailwind, if they are good natural-born developers in the first place, they will naturally see what is happening behind the class name. Once that happens, they will be able to learn about writing GOOD css rather than stumbling about and writing way too much crap.
That will always be a problem with every technology ever: React before JavaScript, Spring before Java, power tools before hammers... I could go on. It's up to the learner to be responsible and learn what's necessary before using tools meant for the experienced.
If you learn the easy framework and skip the underlying tech, you will always eventually get stuck.
not to hate on tailwind but
- you are not suppose to name everything, especially if you are using a library/framework that is scoping your styles. you can just go relative. like `.menu > *` or `.menu .items > *`
tho you never need to do something on the items, while you are using css grid
2:23 🤓☝ Akchually you can just type "inset: 0;" in regular css too
well played
That's the best report on Tailwind i've seen !
I'm an old Frentend dev. So i saw and followed tech evolution on styling since... the css exists... Except Tailwind haha 😄. But i "have to" learn it now... "like everybody" 😉
I read the doc, watched a lot of people on youtube telling how wonderfull it was. But if i agree on some pros, and regrets some cons, i never understood the "wow that's marvellous" tone i heard everywhere. Like an exagerated enthousiasm, making each person who didn't already understood that feel like an idiot. I certainly have css/sass preferences, but i try to understand others point of view to think against myself and progress. The debate on being IN or OR out THE Tailwind Team makes me feel like some Tailwind fans really don't sell it right. 😕
I honestly cannot understand the appeal of tailwind. My current job uses it and I really don't understand how it saves time. I would love to be convinced otherwise.
I know in the video it is mentioned that it saves you from naming things. I personally don't find that hard and is abstracted away by just for a class if you have trouble finding it.
This just all falls apart to me on two particular notes.
The first one being browser editing.
I honestly have no idea if everyone who loves tailwind just writes perfect styling the first time but I definitely don't. Most of the time I write css in browser to make sure it looks correct in the actual content and then I take that into a css file. In this instance I have to basically convert code I already wrote into the same code just named differently.
The second one being the inline styling. In this video the approach to simplifying the process is to just use an extension to hide the problem. I don't really understand what you do here if you have a complicated style, you end up having a really really long inline code that just makes the actual code more confusing.
I just don't get it. I wish I did because my company uses it and it feels like its making my job take longer instead of less time.
I absolutely love tailwind and use it in combination with DaisyUI since my Frontend Skills suck so much. Easy to use, easy to extend on.
thanks for the rec. DaisyUI looks useful.
I gotta be honest, when building custom UIs with React I highly prefer Chakra UI since it is way easier to build dynamic styles. With Tailwind I always have to use template literals and looks so blowed up. In Chakra every CSS property is just a prop with a value and you even have prestyled elements like a Modal or a Card for instance that look pretty decent.
And the most annoying thing is the spacing system... I mean comeon I always reduce the root fontsize to 62.5% so I have either to create one spacing value for each rem value in the tailwind config or I go with brackets... I don't know, Tailwind does not look to good to me but maybe I am just using it wrong.
'Nobody cares about your choices'... looks over shoulder and sees Enterprise Architecture daring me to even try loading up Tailwind.... I love my in-house developed language agnostic UI framework that everyone must use. Help me, someone. Please.
I also never liked or used tailwind css - not until i started working on a project that uses it, after a while, I use it for almost every new project. I'm a fan now.
I wonder your opinion on the "PicoCSS" you mentioned at the end. Because very simple things are magic, the key is whether there is flexibility in customization. I look forward to your opinion.
I like tailwind, it makes sense for me how it is structured. it takes a bit to get used to, but once "it clicks" then is easy to follow. The documentations helps a lot too.
After struggling with finding the best way to organize CSS for almost a decade, I've come to the conclusion that classes and IDs are intrinsically detrimental to the entire goal of styling a web application. I think most people are using them 1. wrong and 2. unnecessarily. People uses classes for items that only exist once on a page or they uses classes/IDs on elements that only serve one specific purposes regardless of ID/class. My suggestion is to try not using ANY classes or IDs and see how far you can get. Favor rethinking your markup before adding a class or ID purely for the sake of styling something. Ask yourself if you're actually utilizing HTML tag semantics to their fullest. If you are, why do you even need classes? You have more than one or ? More than one ? You can't determine how or tags should be styled just via their inheritance and context? I think if your IDs and Classes aren't doing something cool and fun with JavaScript and/or tabular data downloaded from the web server, you probably don't need them as much as you think you do.
At first I hated Tailwind but, I kept going with it. I started to really like it and used it for nearly two years. But, more I used it more I started hating it. I felt like my brain was going soft with CSS. Plus, I saw a high school student using it. Then he came to be and started asking basic CSS how to questions. Why learn CSS when you have Tailwind. The file size is ridiculous. I started moving back to SASS. OMG, I forgot how much I love SASS. I made the switch back to SASS and never looking back. Sticking with SASS and never jumping on these CSS fads any more. Plus, take a look at the "State of CSS" 2023 survey. Tailwind is starting to fade away. Maybe it will come back. But, if I had to bet ten bucks on it, I'd say bye bye.
to be fair, we should care about what other people use because the more community, the more support that goes to it
if everyone switched to assembly tomorrow, you may have trouble asking for help with your COBOL code
Just started using tailwind on my react project, day one. Hated it to start with but by the end of the day I understood it a bit better, not fully sold on it yet but still early days in this project so we'll see how it goes.
Man in the morning, I get a cup of coffee, hit play on one of your videos and just smile and enjoy. You are making the life of us developers a happy life, interesting, and getting us out of this hellish boredom of coding! You just make coding and news of new techs much more interesting to listen to !
Bro just to mention the " 66% fewer characters animation" omg! I cannot stop laughing .If anyone is interested to fast-forward to the spot, the time is 2:34. hahahahahahahhah Man you are honestly full of humor and I love it! I cannot stop laughing man seriously. My tears are coming out of my eyes out of laughter.
1- Modern framework has scoped css so no problem to change some properties in your class without breaking all the site.
2- Good practice forces you to use a component for only what it is suppose to do. So don't build complexe component and you will not have to keep in mind what class do what.
3- Utility classes is a good option because longer the project the more tiring it is to choose how to name your classes, but it's not a complete solution has you can see. It can help in some case.
The reason tailwindcss does not suffer from separation of concern issues is because it is a utility library for css.
And since we make a lot of [standalone] components these days, the tiny ass template containing the styling is not an issue.
Actually using semantic classes can become bothersome in such a SPA project.
could you please make a video over Lodash
This came up in my feed at the perfect time. I've been using Bootstrap for awhile because I'm lazy, but I've been looking for an alternative for small projects which Pico is perfect for. Plus it makes me think of Peco, the little mutant onion character from "Breath of Fire 3" so, bonus points there.
I haven’t used tailwind yet, but I’m struggling to understand the benefit over styled components, material ui, chakra etc
I tried almost all possible solutions in last 12 years.
The best is tailwind for sure.
BTW, before tailwind gained popularity, there was a css utility package that i used almost 8 years ago called “bass css”, that package used the same approach as tailwind.
When Iooked into Tailwind last year, one thing that was missing (?) was an official up-to-date free starter template. I had to follow the doc to build my own from scratch.
I'm not bothered by tailwind _looking_ like inline css, but it _being_ inline css and coming with many of the same drawbacks as inline css. It's bad habits distilled in a library. Of course those bad habits were already prevalent, so it can still feel like an improvement, as it mitigates some of the effects of the bad habits. However, it also prevents you from growing out of the bad habits.
That is an uneducated opinion. I have only seen people use tailwind, not experienced that supposed joy myself. But that's also a bias in the poll: those who don't like it at first look are less likely to use it, so the ones who do are bound to skew more towards liking it.
And you are right, I can just choose not to use it. It does annoy annoy me a bit that every css technique is compared to tailwind these days. And I probably will end up needing to work with at some point. But who knows, maybe I'll end up loving it...
I don't like Tailwind CSS because my HTML get messy in 5 min. And HTML is normally just about structure, not styling.
Instead I use less.css, which we can create a more readable CSS with powerful new tool like mixin
Tailwind is great for productivity, but ironically I've seen a fair amount of developers get hung up on styling because of how convenient it is. Styling is important, sure, but none of it matters if what you're supposed to be shipping is buggy/insecure/inefficient. Links that don't go anywhere or go somewhere unexpected, animations causing noisy fans, whac-a-mole popups, poor accessibility, or a site that's just plain slow-it just takes one of those to kill a user's interest.
I always looked at it as it's like advance, better, smaller version of boostrap without overhead of entire library.
3:21Also setting up tailwind takes like 10mins, you can literally use it for every size of project.
I hate to admit this, but yeah, I was a big hater on tailwind until I used it on a huge project and now I can't stop. I still feel gross about it but it's faster when combined with component architecture.
You can still use postcss and separate the classes with the @apply rule with Tailwind. You don't to need to place all the classes in the HTML directly.
1:00 Add Nextjs to this list. Its hard to go back to React and Node because Next.js can handle both with ease.
Can not having 100% Reusability a con for Tailwind?? I mean like in quite a few cases the styling is directly applied to the element at hand. we could of course extract a few components for reuse
I just wrote a script that sets up shadCn and tailwind for my react js project. Lot of work evaded.
ok, or you can just use the style attribute directly like we did back in the jquery days. so the solution you give is to collapse the class names, then the solution to the named classes would've been an editor extension that shows the styles.
honestly I think the solution would be that html allows to insert xml and having the tags as the semantic thing and then style it with tailwind.
they should rename it Tailwind SS because at no point is it cascading. I inherited the UI for an app styled with Tailwind. It is a very tedious to replace EVERY instance of tailwind code because they want more padding and larger font sizes throughout the entire application. It's just inline styling with extra steps.
Nice video, thanks, but "Nobody cares about your technology choices except for you" is not correct when you work in a team and especially considering that the team members will change in the future.
I really hate to setup tools for frameworks. I successfully make 100k figures a year as a freelance web developer just with vanilla html, vanilla css and vanilla php. Only exception is javascript, there I go for jQuery, haha. And I don't use an IDE, just Notepad++.
Just casually mentions the inline fold for classes -- I wish I had know about this, that is so helpful.
It's good, especially in tandem with Elm
I use tailwind for quick markup styling but for large styling I use custom classes.
It’s a bummer that Fireship didn’t spend more time trying to understand the dialog on Twitter. The initial post was never about if tailwind was good or bad, useful or not and I think if he would have taken some time he would have seen that instead of feeding into the drama by simplifying and ignoring the point.
Why use tailwind instead of styled-system/chakra-ui like
My personal opinion : Start with CSS, then Bootstrap, then Tailwind
We're just gonna ignore the fact that scoped CSS exists, which allows you to keep it close and separate concerns without mucking up the html?
Also, "nobody cares" only applies if nobody else is going to be maintaining the nightmare you created.
So tailwind is just the reinvention of inline styles.
Look at this Tailwind example, then identical inline CSS:
They are effectively identical.
So congrats for just proving that people shouldn't've abandoned inline styles in the first place.
Your first point was incorrect. If you use something like BEM, you don't have to scrabble around looking for names for classes OR wonder which class is for which element. Once you get used to it, it becomes obvious what name to use.
Also easier code reviews ! Have fun reviewing CSS in code reviews on two separated files. Now you can just read CSS in review with TW.
Literally no one cares about your technology choices but you
*Team enters the chat*
i tried tailwind, and yes. it's good, but it's too cluttered. i basically put the code inside scss and then just call the class name in my html
Tailwind is fine. I had to use it for a couple projects at work recently. It's fun. I'm just a bit surprised that it's fans consider littering the page with a cryptic slush of class names to be an improvement, in terms of that cognitive load it supposedly helps with. A separate tool to hide the classes in the IDE to make it more bearable sounds like a solution as bad as the problem. A proper red flag. :P Good, self-documenting CSS class names can actually help identify chunks of HTML and their functionality. Pretty much all of the 'cons' of vanilla CSS mentioned in the video come off as more a failure of the programmer, than actual problems for Tailwind to 'solve'.
Except, modern reactive framework doesnt even have a html file any more
Everything is break into components.
So even if you are writing css in modern framework, you still have to define it or each component
Hey @TobyDeshane, shut up. Tailwind is cool. And yer butt likes mangoes.
you got me convinved. I will have to make the switch to tailwind.
pro tip: In react, use tailwind-styled-components to make jsx elements both more short and more importantly with meaningful names (the first rule of clean code, right?)
I hated tailwind but when I was forced to work with it I still hate it. It doesn't solve anything. Separation between HTML and CSS is done because of separation of concepts not because someone said you cannot write CSS in HTML. The thing is you SHOULD name your CSS classes by domain specific language used in HTML. You SHOULD define your bounded contexts of your components to which the ubiquitous languages is applied. Technically it's using domain driven design on top of Angular.
I expected "inline styles" under the scooby doo villain mask lol. Anyway, I love tailwind for quickly putting together a front-end. It cuts out a lot of work.
Regular css with nesting or scss works magic and good control over styles. But requires one to be knowledgeble to handle the raw power. Only in large projects with freshers with no knowledge or interest on the impact of poor styling lead architects to choose tailwind like frameworks to write css better
love the humor in this, and the crash back to reality you give devs that have lost sight of what's important. Great work as always, keep it up, and thank you.
The amount of effort the Tailwind team has put into adhering to research-backed best design principles is a highly under-appreciated aspect of Tailwind. The ability to produce high-quality UI with very little knowledge of things like optimal typography sizing and complimentary colours is incredible. You can read up on the science behind it on Refactoring UI. Adam and his team have done an incredible job making UI best practices accessable to developers without design know-how.
Couple this with IntelliSense, Language Processing Servers and Autocomplete extensions for most major IDEs and you have an abstraction that truely adds an immense amount of value. Not only lowering the build-out time of applications, but also making them more scalable and maintainable.😎
its the best part by far
definitely understimated by most people, but it's probably the best thing about tailwind
is it actually LPS? or LSP?
the missed one. Components.
Imagine in your project you have not "divs" but separate component that you use.Containers, Cards, Headers etc.
Building a component library makes things easier, because once you have.a component. using that one is just as simply as ..., and even if this require many classes. reading what they do with tailwind or by using "utility classes" makes life much easier.
@@adrianooo3658Language Server Protocol
As a small note: inset is an actual property in CSS which is a shorthand for the directional properties top, right, bottom, left. Much like using padding or margin to shorthand padding-right and margin-bottom. It's not TW exclusive which means you can use it in your own CSS :)
except it's not supported by safari
@@ambyjkl yeah that's why tailwind compiles it to top, right, bottom, left. But it's not a tailwind invention, is what I was meaning to say.
Safari over here being the new IE 😬
@@ambyjkl Haven't checked, but I bet there is a postcss plugin that handles that
@@emonadeo there definitely is polyfills for it, ye.
@@ambyjkl Hi Mom!
I must be the only person who actually likes writing CSS 🤡
Probably. Sounds like you have some unique skills that should get you a nice job...
I just started learning Tailwind CSS and got the notification about the new video immediately…
I've tried many ways to write CSS over the years. For me, the most scalable way of writing CSS is "CSS modules with global variables". When we are following a _token based design system_ , we can have pre-set values for colors, spacing, font scale etc to help maintain consistency. Additionally, CSS modules resolves the issue of naming conflict which otherwise was difficult without a proper naming convention that everyone in the team had to follow.
The issue I've noticed with Tailwind is that it makes component look ugly with way too many classes. However, it does increase productivity, no denial about that.
This is the way.
Blue pill or the red pill 💊
True, while tailwind is for large projects, the point is that in large projects you can use frameworks to split and structure app logic instead of style frameworks. Which greatly solves the complexity of names and selectors. Added to a more semantic syntax in the html, the code that is obtained is more readable, compact, less tedious to maintain and does not require extra configurations. Of course, this leaves you with pure css code to style your components. If you want to save time, you can use this logic with a less cumbersome styling framework and simpler syntax to speed up. Which makes the use of frameworks like tailwind unnecessary in large projects, at least in my experience.
This is the way.
design tokens ftw
Tailwind vs plain CSS is, really, an extension of the old "composition vs inheritance" debate. The "cascade" in Cascading Stylesheets is inheritance, defining a broadly-scoped thing that is then refined and overridden in a hierarchy. On the other hand, Tailwind is compositional, where individual tiny pieces are assembled as-needed into something larger.
This is a great explanation
Yes, just like CSS properties...
underrated comment
Except for the fact that pretty much every object-oriented thinking head now preaches composition OVER inheritance which would inversely mean that tailwind is just better than vanilla CSS... Which I won't deny as being my opinion :^)
@@TheMegabam5 Unit testing and dependency injection enters the chat:
I tried Tailwind a couple of times, but decided to stay with good old SCSS. I personally think classes do a great job making your html/jsx self-explanatory. It's much easier to distinguish between, for example, buttons and text links by looking at their class names rather than a bunch of tailwind styles. In Tailwind projects I saw it was solved by creating hundreds of separate components most of which were used only 1-2 times in the whole project. This not only turns codebase into an unreadable component hell, but also sometimes seriously impacts performance.
SCSS actually resolves all CSS issues I had. You can create mixins to reuse huge sets of css properties, and most frameworks support scoped styles which solve class name collision issues.
I don't hate Tailwind, it does its job, just in a different way with different issues. I personally prefer having clean markup and readable git diffs for styles
Excuse me if I misunderstood, you use as few classes as possible and only add a class to a parent element? I'm a newcomer to CSS and it's been a "catchy" approach. It works while the HTML and CSS match. I don't know how well it can scale though.
You can create classes with tailwind too, just like normal css.
If you know how to write a propper SCSS, you won’t have problems, and HTML will be much cleaner.
Tailwind classes can be used as an identifier. Thats another reason I love it. I go to the html file in the browser, copy the classes and chances are theres only one place where that style is applied.
Honestly, people have been under appreciate scss for so long that I couldn’t understand why. It gives you total control over styling while giving you an easier time managing your css code. That said, I have to disagree that tailwind makes your components unreadable. Having a good design system helps your tailwind code a lot easier to read and manage. It is also worth mentioning that tailwind reset all cssom default styles before apply its style which saves a ton of time (I don’t know why style reset isn’t a thing for many other frameworks, people have to realize that default cssom styles isn’t how they’re supposed to be doing style since html tags are designed solely for readability and accessibility, not styling)
And I do wanna mention a pro that most people forget is that tailwind’s styles is written so that it’s supported through browsers, which you have to write yourself in scss or many other css frameworks
I went from thinking Tailwind was stupid because "its not difficult creating classes and SASS makes this easy!", then I began working in a company that uses tailwind exclusively for styling (as little manual styling as possible) and after 3 months of using tailwind I am loving it 100%. I even remade my passion project to include tailwind due to how easy it is to use
just because you're used to working with it.
@@hoangndst it's easy to get used to working with it
@@hoangndst Exactly, it is because I am used to working with it. If I wasn't used to working with it I would still have the same mindset and still be confused every time I open my projects, trying to remember which css class does what😵💫
More so, adding to my comment; Creating and managing themes has never been easier, especially with component systems 🤩
I still prefer Sass and using utility classes as exceptions for the case versus being the very building blocks. But I never thought it was stupid, ugly sure, but Tailwind is usually found in app projects with a design system and custom components that “hide” that ugliness, plus the IDE extension as Fireship mentions.
I really enjoy using tailwind.
Never used Tailwind, and I still can't bring myself to..
Similar to replacing terminal with git guis, I think it helps a _lot_ with learning to use the original CSS where you are writing properties and seeing the result.
I'm also a big believer in very tidy HTML, with minimal classes. It shows the dev in a single glance what that page is doing, and how it's set up.
If you don’t know the css you will never understand Tailwind
I agree with everything, except that I'm a believer in classes in most, if not all, elements and single class, as flat as possible specificity.
@@vercieli that's flatly untrue. Many kids nowadays are learning tailwind directly and never touching plain css. Tailwind is an abstraction, that's inevitable.
I started using Tailwind like two weeks ago and I have to say: although it's not easy to get started in the beginning, a lot of things actually make sense. I don't have to worry about the precise px values anymore and I think it helps with understanding the "mobile first" approach. I have been doing frontend for a couple of years now, but for the first time I feel like it is quite easy to tell the components how they should actually behave. Less code, more CSS classes :)
Facts!!!
How this is different from Bootstrap? You don’t even need to write class names with it. And when you want to customise it you just need to touch one of its 1000 sass variables.
If I could only choose one advantage to using tailwind, it would be that I don't have to ever THINK about writing media queries. Just straight up ignore it completely
wait till you learn how to use brackets ;)
@Andrew He's saying that Bootstrap also has utility classes, and you can generate new ones to your heart's content. I would say that the big difference is Tailwind's JIT compiler. In Bootstrap you have to deliver every utility class you generate. In Tailwind, you only different the classes in your DOM (and in your JS), no extraneous classes.
Inset-0 is the same as inset: 0;
And is totally valid css in itself.
Personally i tried tailwind and decided it was not for me.
Not supported on Safari < 15 tho
@@kandiesky Supported since Safari 14.1
Or you could just use CSS Grid with scoped classes to immediately remove one of the two major problems that Tailwind helps solve. If I had to choose between the problem of naming classes and the problem of extremely convoluted CSS that messes up my templates, I choose the former. Naming is just not that big a deal, really.
I started using Tailwind like two weeks ago and I have to say: although it's not easy to get started in the beginning, a lot of things actually make sense. I don't have to worry about the precise px values anymore and I think it helps with understanding the "mobile first" approach. I have been doing frontend for a couple of years now, but for the first time I feel like it is quite easy to tell the components how they should actually behave. Less code, more CSS classes :)
Totally agree. I was confused what's the charm of tailwind at first, but when i truly use it for my job it's really useful. Responsive design and layout become much more easier, all things done faster and safer, much easier to trace and debug the UI because its styles are individual on every component
Until they change a class name and break everything.
@@Xinthose Why would they change a class name? Also, it wouldn't break anything because they use semantic versioning.
@@jacksonbourne they’ve done it in MDBootstrap multiple times over the years.
You don't have to worry about precise pixel values using vanilla CSS either. That's what em and rem values are for, along with vh and vw. The only thing Tailwind makes easier is the design process, once you have a design down, it makes you write more code (and more bloated code) to achieve the same result as traditional CSS classes.
as a react developer, i just can’t deal with bloated jsx, especially when i have to write a lot of conditional classes, styling and internal functions
You might like PicoCSS then.
JSX will always be bloated, you can't really get around that. It will look ugly with or without tailwind
Use clsx + cva
@@spikatrix1486 not necessarily
Use styled components
My interest in tailwind began when I tried to basically reinvent it without noticing. Started composing ~sort of standardized~ classes on a project which, when I compared to Tailwind, some were even _identical_
Same here, mostly had my own .flex, .j-center and such 😆
That’s me. Same experience
I did the same but ignored tailwind because I just assumed it was bootstrap 2.0. Mine wasn't super in depth, though
I guess that's why I picked up tailwind so easily. It's like a whole standardized library of helper classes that were much better than my own.
It does make me consider how many younger developers understand where we've been with CSS and where it has led us - I mean, sure, these woods look awful scary if you are in them, but step outside ... hell, you just want to light them on fire.
So, concepts like Tailwind are a LONG time in the making - look up "block-element-modifier" if you don't believe me.
If you want to go back further, go languish in the Zen Garden, some real home truths were presented WAY back then - before some of you were out of nappies. Look it up - launched in 2003.
Now, ALL of this absurd confusion can be totally ignored if you are building a small website or a simple application.
Seriously, just use plain old CSS.
This _only_ make sense in the world of massively complex web applications used by millions of people.
That's cool, because those apps are so massive and so complex, they form black holes, eat themselves and somebody decides to recode them every 2 years, so they can justify their senior developer role... "Who coded this shit! - we need to start again!"
"Gosh Darnit! - this page loads like 40kb more CSS than it needs! - we need MOAR POWER and PERFORMANCE! - I suggest we spend the next 12 months eating up the entire budget of our department to shave 30kb off that and load pages 100 milliseconds quicker!"
Wonderful - then marketing and SEO comes along and bloats your supercharged performance powerhouse of a website with 1MB of render blocking tracking scripts - JOB DONE! - wh000t!
"Sorry developer nerds, we need to keep our SEO-Juice - you just suck it down, 'cos the CEO says so, mmm'kay?"
Some time later:
CEO: "Why is our website so slow!"
Charismatic marketing type SEO dude that kisses CEO ass: "Yeah, that's the web devs - they suck!"
CEO: "Bring me the severed head of the principal engineer!"
My favourite part of SEO-related coding is how it's impossible to debug locally and how sparse SEO-related documentation is. And you can get punished for not getting it right first try. Same with e-mails too.
@@ra2enjoyer708 Yep - the SEO-related documentation is sparse, but the volume of SEO related spam you get when searching how to implement some arcane part of the solution is nothing short of "hand me that gun, I'm going to blow my head off."
"We need our own design system" ... if you hear _anyone_ in your team say this, get your CV (resume) ready and hand in your notice.
... unless, of course, the company goes along with the idea and you are part of the team doing it - then you have years of fun building a unified design system that will be out of date by the time it ships. You'll also cause mayhem within multiple different teams, half of which will say "I'm not using that" or "How does this work?" or "Nobody told me about this." or "We're using Bootstrap 3.x" or "We're using Bootstrap 3.x, React _and_ JQuery in an unholy matrimony of ${`we don't know WTF we are doing!`}
THIS! Google analytics, tag manager, Facebook pixel, twitter, hubspot, hotjar, sales force, cookie consent etc etc..I had the misfortune to work on a site once that had nearly more marketing snippets in the markup than the actual site code..and they were wondering why it was slow! I actually love the cookie law because it drives the marketeers crazy 😂
Love the honesty here. I went to try it on my last project thinking it'd be as easy to use as bootstrap. It definitely has a learning curve, but I also see the advantages. Also, the setup really isn't THAT bad, but learning how to use it is a curve.
"An idiot admires complexity,
a genius admires simplicity"
Never fails to bring happiness as I see a fireship video.
I have been backend developer from years. Time to time I used to check some frontend/Css stuff and my site always looked horrible. I was like without designer I simply can't get look, alignment, layout that looks like a Pro work. The chaos with raw CSS was just pushing me behind always. Than I tried Tailwind CSS and boy..I never looked back. All of sudden everything sounds logical and well thought out. Now I'm able to consistently produce high quality site layouts without any designer help. In my opinion what Tailwind CSS brings to the table is order and logic in totally chaotic CSS world. Most of the time you can assume what utility class names within Tailwind CSS. No need to go into complicated SAAS and all other syntax sugar totally avoidable stuff.
I don’t miss SASS!
Sass?
This message has been brought to you by the Tailwind marketing team
as a backend dev I can see that from the few overviews fireship has given of this library. Looks like it simplifies css a lot.
I am also interested in backend, and feel depressing while layouting and presenting a properly designed web, your experience and lessons helped me with things i was confused about♥️
Guyss! I finally learned enough 🎉this was the first time I was able to relate and understand what this guy was saying, completely 😊
lol same
1:42 omfg lol you front end guys have completely lost your minds