Tailwind CSS is the worst…
Vložit
- čas přidán 15. 01. 2023
- 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/moalamri/vscode-in...
🔥 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 - Věda a technologie
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!
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
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
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 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.
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.
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.
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.
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.
Another amazing video! I haven't used it yet but it did convert me into trying to create utility classes that can be reused all over vs. a all-in-one class which I might have to repeat with a slight variation elsewhere.
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
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
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'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 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.
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).
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.
I just started learning Tailwind CSS and got the notification about the new video immediately…
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♥️
awesome video again thx for this
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
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 using it and mostly use it just for the layout and then CSS for everything else. It just makes sense to me to separate concerns that way while not putting tons of extra lines in my html. I find tailwind easy but my main concern is going back to fix something. finding the right command would be like looking for a needle in a haystack. And if you have "cards" or "containers" that share repeating code you would have to switch it everywhere. Instead of switching one line of code that applies to a class in CSS
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.
You know he's bout to drop video on the topic when he asks about it in community posts 💀
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
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
Love your content. Great videos. Have you done one on PicoCSS yet? Where does pico fit in?
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:
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 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.
One thing it also promotes a css pattern, called functional css or atomic css. Among the other benefits you mentioned, Where specificity is no longer a large concern. Just as inline styles can look ugly and long - selectors can be even worse. This pattern has existed for a long time and can be especially useful in large code bases. Also in large code bases it can actually greatly reduce bundle size! especially for css. I have seen these patterns prevent so many bugs. And no more devs trying to add in !important, or a id selector on top of a class selector, etc... Still, there are pros and cons like you mentioned.
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
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.
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.
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?
Depends on how it's used. If I can't look at a the inline class and know what's going on because it's too long I'll break it into a sass file with standard css but use @apply for useful tailwind classes like my-1 or responsive classes. Gives me all the benefits of speed and keeping things neat and orderly. This way I can have something like @apply sm:text-sm md:text-md lg:text-lg in a single class that I can throw around everywhere without having to copy paste the same thing inline and without dealing with media queries.
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.
2:30 does this abstraction cost anything at runtime or is it rolled out somewhere before this? (Are any of these CSS abstractions computationally cheaper than vanilla CSS minified? or maybe web still stuffs its ear and starts screeching at these type of questions still??)
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.
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.
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
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 love how you make your videos, they always make me laugh meanwhle I learn something useful. BTW I am a part of the tailwaind cult
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.
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 😂
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 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?
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 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 ✌️
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.
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...
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!
@@user-fr2fm3ri3w 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.
Started with Bootstrap as a student. To me Tailwind looks very similar but a bit more customzable, and more daunting for a begginer. However I haven't tried it in earnest yet. Once I get the hang of Bootstrap I might end up switching to Tailwind
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.
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 ..
Never fails to bring happiness as I see a fireship video.
I would like to hear an opinion on Chakra UI, Tama GUI or similar. With them you pass utilities as props instead of class names and they can be type checked and dynamic.
First time using Tailwind, I was lost and didn't love it but also didn't hate it. In Laravel everything was done with bootstrap but I hate it because it's not fun anymore ;) When they added in Tailwind and I got the hang on it, I have to say, I love it. Yeah you could change stuff or so but I think that will come with everything we use.
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
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.
What should i use, if am a front-end dev student, who want to create landing pages for small clients as a site hustle?
i know how to create static sites with raw html, css.
should start to learn Tailwind, and move on to Tailwind UI. which will do the job alot faster and easier and expand my knowledge?
i started styling stuff many years ago with table layouts, yes that time when you had to style shadows with png, or even with jpg without alpha channel. 😂 so i went through many css concepts over the years (SCSS, bem etc.).
i'm working in a web agency and for the frontend team and myself we found that css utility first frameworks like tailwind works the best for us. i think there is no right or wrong - there are many ways to solve problems. for us the big advantage with for example tailwind is the consistency in the styling. you have to use the same for example paddings over the whole project (ex. p-4). sure with "normal css" you can do that with css or scss variables. but the chance you use a custom padding is higher in a css/scss file.
another extremly important argument for big and fast growing project is the overall css file size. with tailwind the file size remain almost the same no matter how big the project is because you always use the same classes and after purge it's extremly small. in contrast to normal css you have to create and download new css files (newcomponent.css) with potentential new css custom properties. often you have to assign special css names just for a simple layouting (aligning 2 elements horizontal with silly names comp__inner). so the css file size grows over time. the webperformance suffer.
there are other advantages like specificity (even with correctly BEM), working in big frontend, teams etc.
...like i said. there are many ways and there is no right or wrong, but i found this is (at least at the moment) the best way for me.
😊
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.
Tailwind really was a game changer for me. The biggest thing is writing predictable classes that just work whether it’s on desktop or mobile. I’d create little bugs and have to hack around to get my vanilla css to look good on mobile and desktop. Just like any technology there is a learning curve, but it’s worth it!
styled components solve many problems and combine the best features of Sass and JSX. I've started using it since 1 week for my first professional project and its really cool. In addition to that, People who says that I write some properties that can be replaced by classes, i tell them that the classes that they write inline css is the same. Depends on how fast you are at typing. and which vs code extensions you are using to help you.
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 :)
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!
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.
How did you highlight the root css of a tw class :O ... mine doesn't work by default ? is that a vscode plugin? I am using tw 1.9.6 atm
I must be the only person who actually likes writing CSS 🤡
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.
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've used Tailwind for a project and bailed on it. What I didn't like about it was trying to learn all of the Tailwind shortcut tags for simple things that I could just do in CSS (i.e. text-center, I mean why??). In addition, when it comes to building an app that can be branded and reformatted for layouts, having the Tailwind tags embedded into the HTML seemed very limiting. However, I have not used it enough to come to any any real conclusions but maybe there are best practices for it that I would just need to understand. I still prefer frameworks like Material UI where the components are mostly pre-built to save me tons of time trying to write the functionality but I can choose to overwrite the CSS myself, but that is a personal bias, curious on other comments.
Why not text-center? class="text-center" is much better than style={{ "text-align": "center" }}
@@spikatrix1486 I’m not a fan of in-line styling either I would have created a semantic css class for the element so I can make it center aligned, right aligned or whatever then the element is not hard wired to a css style.
Tailwind config viewer shows you everything easily.
You can use CSS custom props to define your custom Tailwind styles which then can easily be changed for themes
No matter how ugly it looks or how hard it is to set up, Tailwinds gives the absolute freedom to style! That's what matters most to me.
And I think the haters don't know CSS that much. Because to use Tailwind like a pro you have to know CSS like a pro.
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.
This would be valid except when you work in a team, where you need to get everyone on board. Plus in bigger projects it's good to have reusable classes, so how do you reause the same CSS definition on multiple objects in TW?
Amazing video - super clear, informative, & entertaining!
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 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 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.
Learning through freecodecamp and this was the first video I saw from this channel where I actually understood everything. Feels pretty good to progress.
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
I still use SASS 😂.
I used tailwind but while working with other frontend developer but 99.9 I work alone 👌🏼
Thanks for the Pico tip, I have been looking for something like this. Is what I need to focus on coding and dont get too caught on styles.
some reason to use the typescript are the details on the js which not affordable than java right
I recently discovered tailwind this year, and I personally love it. Ya it adds extra overhead to your builds and such, but I love how composable it is. And as stated in the video, you can define your specific design system and have tailwind integrate nicely with it.
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
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.
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.
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
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.
How is that installing postcss and add some configuration is a cons for Tailwind, are you be doing something on frontend lately?
Hye , buddy material Ui is good choice? To design webpage?
I began using it with the expectation it was going to be like Bootstrap and Material UI.
Then I realized it was a utility helper and saw its power.
It's definitely not the right choice )although Daisy UI can come to the rescue) if you want prebuilt elements. But it's impressive when you are building design systems.
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 feel like all we need is a tool to quickly add some of the functionality from tailwind but for the most part just plain css with sass is better i think. Like I understand that you say we can use class names instead of needing to write 4 lines to achieve the same but we can manually put it in our css aswell to apply it to our elements instead of dealing with installing tailwind.
It looks like inline CSS, it's basically a shorthand version of inline CSS. Your solution to use an editor extension to hide all these ridiculously long lists of classes speaks for itself. You hate seeing these lists. They are hard to reason about. They are hard to edit.
It feels like a massive step backwards. I, personally, prefer SCSS. The markup is very clean. The styling is in its own section. It's beautiful.
Not a frontend dev but I really don't understand overusage of those p-4 or m-5 short names. I hope you would not rewrite p-4 to mean padding: 5 if you decide to add a pixel there, so what's the point and why not just use a name that actually binds the style to the element, and you can easily change?
No, you hide it because you don't need it all the time, but if you have to edit them - it's just matter of preference, but for me tailwind works better than scss.