Tailwind CSS is the worst…
Вставка
- Опубліковано 23 вер 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!!
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!
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
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
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.
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.
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.
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
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.
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 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.
About the first problem, you will nerver need to name things if you use scoped styles of libs like Vue and Svelte, and even without them, you don't need to add an id or a class to every single DOM Element, if it was the case, add an id or class just for the first Element and use the appropriated selector for that, like ".main-navbar > ul", using SCSS or any PostCSS nesting plugin this is even easier.
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
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♥️
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 started using tailwind almost a year ago and from that point of time, I have used it in almost all of my projects. It's always the first priority unless the project strictly requires something else. It saves a lot of effort of naming classes and a lot of time of creating and managing CSS files. Especially if the HTML structure is deeply nested, it gets hard to name things. So tailwind is a great option in my opinion.
What I've found really useful as opposed to tailwind is SCSS modules for components that import standard UI stylings from a master file. That way you get the usability of compact, descriptive classes for components without breaking styling in other parts of the app if styling changes need to be made in this part of the app.
It is just what I was thinking now. Like, if they managed to learn scss, it would be revolutionary to them.
should i learn scss or tailwind? what do u recommend
@@yvng4697scss is better imo
@@yvng4697CSS of course. Tailwind might go away in a year or two. CSS has been around since forever.
@@yvng4697 learn to write good css, and scss is a plus. Then experiment with Tailwind and see how you like it. I don't, but you might. I'll just say: like any other abstraction, it's important to learn what it hides underneath instead of just blinding using it as is.
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.
I just started learning Tailwind CSS and got the notification about the new video immediately…
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
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"
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
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 😂
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.
SASS is my way nowadays, and Its pretty fine. css with code nesting is god-like already. Tailwind helped me out a bit early on when i wasnt too sure of standards to use (had poor css writing, many overlapping classes and stylings going on). SCSS keeps things organized for me very consistently, and if I still want to follow a utility based approach, tailwind showed how easy it was to do so imo.
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.
You know he's bout to drop video on the topic when he asks about it in community posts 💀
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.
I think svelte's scoped styling removes a lot of the need for tailwind. If you're composing components correctly then you probably aren't worrying about long class names, or global styles
That's true of any framework that uses scoped styles like Vue. Web components, with their shadow DOM, scopes their styles as well because it's shadow DOM.
Did you know that scoped styles downgrade performance especially on big projects?
@@Andrey-il8rh any source? I'd imagine the build stage gets rid of this in modern frameworks
@@Andrey-il8rh So much nonsense in so few lines. Plus, what an arbitrary criticism. People who talk about performance issues have literally never worked on project where a millisecond would ever matter.
@@punsmith can you send me a link to at least one "big" project you did in your life that gave you a right to call things that you don't understand a nonsense?
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 ✌️
Separation of concerns, NOT code. If CSS and HTML have the same concern then colocation makes sense.
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 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
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
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 personally firstly split my HTML into multiple components and then use different element types to use for my CSS selectors instead of only divs with classes. Not only does this save me a bunch of code ( - ), it is also a lot prettier, complies web and accessibility standards (Using lists to list elements instead of jamming a flexbox onto a random div) and even after months of not looking at the code I can directly see what rule does what, as I use selector nesting (nav > ul = Navigation links for example).
I personally hate the jquery/php way of just giving everything a separate class. That is not what they are meant to be used for.
" I use selector nesting (nav > ul = Navigation links for example)" It makes sense, but with component based frameworks like React, you would have a component NavLinks that would be re-used (you just pass a different prop) so you can use Tailwind directly in that component, because that component is re-used. If you don't use component based framework then your approach is much better. I think that Tailwind would not even exist if there were no frameworks/libraries like React, because you cannot reuse divs so if you have the same css for different navigation lists it is better to have that css defined in another place.
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 just learned it 2 days ago and did the first project yesterday with it. I dont like to clutter my code with inline style but to be honest, its not too bad. Good thing about doing it with React is that you have a lot of compenents and it breaks up the code in differnet files so it doesnt seem cluttered. Now that extension, i am definitely going to be using it!
Atomic design helps. Template components hold all my layout CSS. Using cascading correctly helps a ton too.
Yes, it is meant to encapsulate the style of a single component.
You dont have to worry about the change you make to a component break all other components
Another problem that was not added here, is the fact that the HTML will usually not be cached (if you use SSR), compared to the CSS, which is usually cached. That means, that you will increase the size of each response.
But this is usually fixed by still using classes for elements, but instead of vanilla CSS in the classes, you use the Tailwind preprocessors.
Anyways, nice video, really helpful.
I imagined the opposite, if the tailwind stylesheet is similar between multiple sites, and perhaps even come from the same URL for a few (is this how it works? I haven't used it) then I'd imagine the browser can cache more of the code that reaches it.
@@theodorealenas3171 Your Tailwind stylesheet won't be the same between multiple sites. Have you seen the size of full Tailwind? It's 3 Mb or something.
With scoped CSS in modern frameworks like svelte components, the need to give class names is massively reduced. For the example you showed, I would just have my nav link selectors as "nav ul li a". Keep your modules small so there is no possible collision. It's good practice regardless of the CSS naming anyway. Regarding collocation, this is something you can do in regular CSS also. Just put 95% of your CSS in the component where your template is. In svelte it's litterally the same file already. I agree that having CSS coming from 5 different files and figuring out which parts apply to your particular element is going to waste more time than it will save. The shorter syntax of tailwind is a nice plus, but also something you can mostly solve by using a CSS preprocessor like stylus, so you don't have to type curly brackets and semicolumns anymore.
There is a select few utility classes that are nice to have from frameworks such as Tailwind or any other CSS framework, such as layouts, grids and font-weights.
However, I find that large tailwind projects are hard to maintain, it quickly becomes a mess, it gets hard for new team members to join the project and quickly understand what happening.
I'd rather spend a little extra time and create my own CSS for my need, it makes it a lot easier to work with in the long haul and ends up saving time, makes it easier for colleagues to join the project. Not only do I write my own SCSS, but most of the time I can completely reuse my SCSS structure for new project, saving me A TON of time.
If you're somehow saving time with Tailwind, I suspect people don't actually know how to write good SCSS. As I said, a bit of extra one-time investment creating a good SCSS structure, components and perhaps a few of your own utility classes. But after that, it's incredibly easy.
Tailwind has addressed some of the core problems brought about by all the historical cruft and technical debt in CSS. It's innovative, but I think it's not quite there yet. Hopefully it will prove to be a stepping stone towards a much neater solution.
Completely agree. I like it because duplicating styles/components between projects is a breeze, and then refactoring to fit the new project’s design is so simple.
I enjoy writing pure css but it's true that it can become bloated quite easily.
I often use tailwind for most styling when I need to be faster and and just add custom css here and there when doing something fancy.
But from time to time pure css is the way for me, I think I learn more from doing it directly :)
same here
I don't hate Tailwind. I really don't. I just really really don't like questions like "How do I move this box over in Tailwind CSS." Now there are 2.7 trillion of those. I don't hate dogs either. Just most dog owners.
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.
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.
Never fails to bring happiness as I see a fireship video.
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
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 love tailwind but lately I've been hooked into using sx props from ui libraries like mui and mantine etc. This allows me not only to select pseudo classes but nested classes of an element especially if it's a third party component that uses multiple elements inside it.
+1 for this. Been researching about Mantine and just used it on a small hobby project for my portfolio and I gotta say been loving it! Not a pro at designing things and so that's why I prefer ui libraries as compared to making my own styled components with Tailwind or Css.
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.
i really like Tailwind, but as someone that has been writing vanilla CSS for ages, I feel that if someday CSS adds the ability of breakpoints and states (like hover, focus, etc.) directly on inline-css, Tailwind will fall into the same category of Bootstrap's utility classes.
In Tailwind, you can use hover:color-red-500 to change the color of the text on hover and do it inline as with everything else. Not sure how CSS adding the same feature affects Tailwind.
@@essamal-mansouri2689 yes but if CSS allowed to do that inline as well I personally would not see the need of using it (the native CSS feature could be similar, something maybe like style="hover::color: red")
@@lakelimbo you still wouln't have a design system and your html would be more bloated. Tailwind has sane defaults, allows you to build and use a design system and is way cleaner in html (compare padding-top: 4rem; to pt-4)
inline styling is bad.
I've been writing CSS for 18 years and disagree. As @Niwla23 points out, TW gives you a design system to work with, and a configurable one at that. It helps developers and designers stay consistent, helps the codebase remain maintainable, and makes changing values to affect the entire system a breeze. Bootstrap is very inflexible in comparison.
'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.
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.
Right now im using Material UI with React, and it saves me tons of time, with the "sx" prop i can make some small customisations, and if i want to fully customize it i can style the components globally. It is my favorite choice for now.
Starting point. Pl comment.
Sir I am a new to the web development. I am am confused in where should I put my efforts. I am also thinking of starting with material UI . Is it a sensible
@@anuraghere4997 me too .. confused where to focus my time learning , im thinking of learning tailwind that's why im here reading comments .. im learning REACT Js now and a bit familiar with MATERIAL Ui .. Since im already in REACT , i think im gonna learn Material Ui instead of tailwind .. Material UI is like bootstrap , . , but i will still do more research on tailwind ..
Love the conclusion.
I used to be very opinionated about coding styles, frameworks, etc. However I learned to simply adapt to whatever the team I'm joining in is using. I just don't join teams who use Angular, Ember, Vue Ruby, PHP, Python, Rails, Laravel, Django, Bootstrap, Foundation, Bulma, Elm, read more...
2:25 Fun Fact: There is a something called "inset" that do these job. For example "inset: 50%;" will mean "top:50%;right:50%;left:50%;bottom:50%;"
i think
Best way is to use tiny utility-classes frameworks like bulma (or bootstrap / whatever). It already has classes like p-5 or size-2 but it's includable by one line of tag.
Tailwind is awful especially when it comes to display heavy-styled 100 elements in loop and you end up with 2 MB HTML output 😐
They try to cover 100% cases by classes which is just impossible and ridiculous.
Besides - it is slow, heavy, must be installed, plugins have to be installed, it has to be build on production etc.
I'm glad I started before all these frameworks and tools, all the choices must feel overwhelming for new developers. Our biggest problem back then was getting things to work on old IE
this is why i left web development, i was too overwhelmed by all the new tools and frameworks
Absolutely agreed
and the annoying thing is that you learn a certain technology or tool and find that the company that hired you uses different tools or technologies making you relearn again, not to mention a learning a technology you dislike because it has more job postings
@@conradmbugua9098 the basics don't change, the rest is syntactic sugar i.e. the frameworks.
So true, good old internet explorer 5, 5.5 and 6 lovely times to make things look the same in all browsers.
Providing a class name: `text-center` to ensure text is centered might save you a few characters, but it does not give you one of the true benefits of separating style and markup. Ideally I (personal preference) would love to have my HTML contain the contents, in semantically meaningful tags, with minimal extra clutter. Whether text is centered or red or blue, is a design choice, and the design should be easily changed by simply changing the CSS file and not touching the HTML. But by adding verbose tag names, like text-center to a tag, I am mixing style and content. What happens if the context I use it for is no longer something I want to center? Then I'd have to replace all text-center class names on all instances of the context.
I am not saying it is a bad framework, but I do think it goes directly against the benefits I see in separating concerns. But then again I have stayed clear of front end development for so many years it doesn't really matter anyway :)
The thing is, nowadays frontend framework dont even have a big, central css file any more
A typical FE src consist of hundreds of components, each have their own html css js that is only encapsulated by themselves
Like vue have Single File Component where you write html css and js into one single file. Or react where you have "LoginForm.tsx" and "LoginForm.scss" in a folder named "LoginForm"
So even if you write your "text-center" in the css part, if you decide to change you need to go to every single component relevant to change it
I do full stack development and I never liked writing css. All the naming, media queries etc. i just hate doing it. Learning TailwindCSS only took a few months for me and now I use it in all my projects. It makes building a website so much faster and easier for me.
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.
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.
As a Svelte user you should talk about how Svelte lets you have your CSS right inside your components and how it also highlights the unused styles. A lot of tailwind’s benefits are working around react issues.
The guy behind it mostly seem to have used Vue and Laravel tho...
My friend is really big on Tailwind. He is a lead dev for MetaMask and since he uses Tailwind his whole team has to switch to it now 😂 He's loving it.
I’m the Lead at my company and I’m making everyone learn Angular because I like it muhaha
@@CodingAbroad All I see is a good lead for once
@@charlesm.2604 aww thanks 😊 we’re a small team (of 3) who needs to manage our own cms and also doing a normal public website.
The forms in the cms are too complicated for react to handle. Considering the size of the team I can’t justify using angular for the cms and nextjs for the public site. So Angular for everything
@@CodingAbroad Yeah and I mean if you already have a trained team comfortable with angular there is no reason to switch over the stack to React for the public site anyway, why change something that works ? haha
I’ve been using and teaching BEM to junior devs for years now. It’s very hard for me to like this. I understand it can be useful in large projects and to back end devs. As you said use what you want, nobody cares if it is your project 😊 client projects are a different story 😅
The client also doesn't care, as long as it looks the way they want.
Agreed, I use BEM myself and it makes so much sense to me. Looking at the code @1:42 gives me nightmares. 13 lines of class names for a single element...
@@coolhunter3 depends on the client :) If they are the end client, they don't care. If you work for an agency they care a lot :)
Some people hate tailwind some hate bootstrap.
but the truth is that you will have to know both || or adapt (at some point in your journey) to be a good web dev.
Ofcourse i am not saying to learn both at the same time, but all these frameworks are ours to use and you can stick to what you like.
1:42 omfg lol you front end guys have completely lost your minds
There is no debate, css gives you so much features that no framework can even compete.
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.
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. 😕
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
For me, BEM gets round the naming problem with CSS. You only have to come up with a name for the block element really. And being able to name blocks is kind of a requirement when working on a website/app anyway. Tailwind is a headache, the team I work in have decided to use it because back-end devs want to be able to make changes without doing any real CSS. A disciplined team using BEM or similar naming convention is the best approach IMO
100% agree. Name the block, use combinators to style what you need inside the block. Using Tailwind with Vue or Laravel Blade, where you have not only html, but also ifs, fors, keys, makes things even more cluttered and difficult to understand.
If we only use what we liked, then maintainability would plummet, some could argue that's the state of things already, and I wouldn't stop them. My gripe with Tailwind, is that no matter the circumstance, it's swimming against the current, because you are dragging the responsibility for design back to HTML when that's supposed to be the role of CSS. SASS makes a lot more sense in almost all circumstances, because it keeps the styling element where it should be, requires less to setup, invites the potential for style remixing, and is much easier maintain.
2:23 🤓☝ Akchually you can just type "inset: 0;" in regular css too
well played
I really enjoy using tailwind.
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
After working on a bajillion projects in my career: whatever your tech stack, just be consistent and try to write code that plays to its strengths. I don’t care what you’re using so long as you keep things sensible, we’ll-written, and organized.
One thing: the "purge" method where it's pre generated all variants, then removed the unused ones is a legacy mode. Since 2.1 the default mode is JIT and generates the CSS classes based on the class names used in your HTML/JS code.
So you don't need to put purge in the tailwind config anymore?
I'm a noob programmer and one of the things that I really hated was using boostrap because somehow my mind can't understand how it works so I could never made any of the cool pretty things they advertise on their website. All I had to do with tailwind was copy and paste and it frigging worked. And I even managed to acommodate it to my project. It was the first time I actually managed to make my website look good by myself. so, I really don't care what other people think. I'm sticking with tailwind until I find something better for me
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.
Used bootstrap, CSS, SASS and Tailwind... its the ideal middle ground between SASS and Bootstrap. For me its a easy way to do custom CSS (like you would in SASS or vanilla CSS) with less mess.... just command + K to search for whatever you want... the documentations is super good!
Completely agree with the conclusion.
Back in the day, i researched a lot about which tech i should pick for front end dev. I came to the conclusion that all these choices are simply tools to make the same end result and i think it applies here too
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.
instead of Tailwind:
- component files (like, .vue)
- scoped styles
- nameless selectors (like, .my-component > div > div > a > strong)
- some css preprocessor
- and a number of mixins, doing what tailwind classes do
This way you'll get the best of the Tailwind approach, but without the horrors of it.
Bootstrap can be customiseable if you use frameworks like angular that can isolate css/scss/sass styling.
Remember folks css class styling is preferred to avoid inline style attribute.
Now tailwind is just modernizing inline styling into inline class styling. Which should be avoided at all costs.
I'd rather stick with bootstrap styling coupled with isolated css/scss/sass styling which Angular and React(after modification) provides.
For me personally, I feel like it takes me maybe 10 minutes to create practically any view with basic CSS. I use SASS, but honestly have never felt the need to grow beyond it. Tailwind just seems like one of those things that eventually comes full circle lol. Like React went to Next.js.
It's not about going beyond SASS, it's entirely different things. Tailwind just gives you ability to have your styles right where you have something you apply it to. Also, i don't really see how it can even be turned into something entirely different like React was a base for Next. And also, React is still alive and will be alive for this year at least.
I think tailwind is a great tool if you know how to use it and when to use it, for the problem of too much classes over an element I would suggest to extend tailwind classes into one using @apply so if a group of tailwind classes are used often and they are too many then is good to have a simple class like .app-nav with all the @apply tailwind classes required.
Anything is a great too. If u know how and when to use it🤣
I've been using Tailwind CSS + Next JS (typescript) with a client for the past 10 months and I really like the flow :) Works really well for making component based designs for an app-like website.
Me too! Its extremely quick to done anything, and have patterns in styled.
I really like, create components using TailwindCSS is more pacific way.
Does it not cause problems for you when you go back to a component that was written by you a while ago or by someone else, and it's difficult to read and understand all those tailwind classes?
Yeah but it works well if you wake up at 3 am and has to rush a feature to deliver by the daily that morning?
@@amcsi I handle most of the front end design, but 3 other engineers have had a fine time writing and all using the same tailwind classes. We've extended it a bit using some custom css and headless UI, and that's ended up being a really good foundation for the whole app.
I just made a 5 minute loom to intro using tailwind and it's been enough to get people started, and then I review and fix any conventions on their pull requests, and after a few PRs their code was pretty much fine.
@@rawallon yeah, I love how easy it is to make quick components that are really close to design spec. I hate standard CSS lmao
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.
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
I have used bootstrap most of my earlier time and its easier to use the predefined styles, components. The cons that in that time no purging feature was available + my modified and added styles easily get more than 400 + KB of size (lots of unused styles though). Nowdays started using tailwind, i barely get 30 - 40KB of final css bundle. I don't have much issues with readability cause i can create mental model reading those classes. And not switching between css and html is best thing for me.
Generally a pretty solid video. One gripe I have is that you point out flaws of standard CSS approach and how tailwind solves it, then you list tailwind flaws and show tools that can help deal with them. The thing is - anything compared to basic, no-tool CSS approach will be better. But there are things that help you make CSS still be CSS and solve the issues that you mention (SCSS, style scoping, stuff like that).
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.
I used to stay away from tailwind and design in raw css, and encounter weird errors,
2 cool things I like about tailwind is :
1. responsiveness - easy to make responsive sites
2. cool UI components
not like - code duplication
In many enterprise applications, I do not want to override components/modules but I do want to change their style and layout.
Tailwind is great. Not standalone but paired with Component frameworks like React, Vue, Svelte or even Laravel Blade, It's absolutely beautiful to work with. I will ALWAYS pick Tailwindcss if i'm using a component based framework. Sure, most of them have support for encapsulated CSS, but the other power of tailwind in my opinion is that it's somehow easier to work with than actual CSS. Having presets for spacing, font sizes, widths, heights and colors is underappreciated.