Tailwind CSS is the worst…

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

[@DarylMalibiran]

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.

[@Smartercow]

I use it for big and small projects, haven't seen any better alternatives yet.

[@brokula1312]

@@Smartercow .....ammm, regular CSS with classes is just fine.

[@benasmockus6988]

@@brokula1312 nope. With regular css you always end up with shit ton of unnecessary lines.

[@sk_jay]

@@benasmockus6988 exactly

[@HossinAzmoud]

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!!

[@kylemckell]

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 :)

[@ambyjkl]

except it's not supported by safari

[@kylemckell]

@@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 😬

[@emonadeo]

@@ambyjkl Haven't checked, but I bet there is a postcss plugin that handles that

[@kylemckell]

@@emonadeo there definitely is polyfills for it, ye.

[@matthewtrow5698]

@@ambyjkl Hi Mom!

[@dalebradleygordon]

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.😎

[@erikslorenz]

its the best part by far

[@gonzalobruna7154]

definitely understimated by most people, but it's probably the best thing about tailwind

[@adrianooo3658]

is it actually LPS? or LSP?

[@somerandomchannel382]

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.

[@LtdJorge]

​@@adrianooo3658Language Server Protocol

[@MobiusCoin]

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.

[@BrianGon89]

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.

[@m.caglartufan2454]

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)

[@person9627]

​@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.

[@DKprojects9]

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.

[@LoberoxD]

@@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

[@craigmcinnes1212]

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.

[@iamtheV0RTEX]

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.

[@rareschiuzbaian]

This is a great explanation

[@anatolydyatlov963]

Yes, just like CSS properties...

[@anonanon7368]

underrated comment

[@TheMegabam5]

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 :^)

[@charlesm.2604]

@@TheMegabam5 Unit testing and dependency injection enters the chat:

[@asthmaticpathic]

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.

[@juanpablolopezfracaro6437]

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.

[@stas_khavruk]

Nah, lets better create Component with Tailwind styles for buttons, text boxes and etc. No CSS

[@andreaho]

@@juanpablolopezfracaro6437 Agreed! BEM was the king until developers realized that they were still exhausted in naming things. Badstrap was bad, indeed.

[@robinspanier7017]

inline styles are nice for failing codereviews randomly. 😂

[@rakadoank_]

​@@stas_khavruk huh, i misunderstood. Tailwind itself is CSS, it is just a tool.

[@benemma5602]

Ones you go tailwind you can never go back

[@sergeygultyayev4828]

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.

[@FalconTheFries]

Not really, it’s very easy to go back

[@italktocomputers1901]

@@sergeygultyayev4828 we build a design system with tailwind + story book to create a components library. worked amazing no draw backs yet

[@rickvian]

as easy as this tailwind come, as easy as it go

[@User-w8t4t]

Once you find bugs with css library. I am using css and sass now.

[@colinmarshall6634]

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.

[@ImHansana123]

"An idiot admires complexity, a genius admires simplicity"

[@kotimara8711]

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.

[@richardmcsharry]

This is the way.

[@conorcoder7196]

Blue pill or the red pill 💊

[@leonardohidalgo5127]

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.

[@unpunnyfuns]

This is the way.

[@IStMl]

design tokens ftw

[@Rikonardo]

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

[@theodorealenas3171]

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.

[@omlachake2551]

You can create classes with tailwind too, just like normal css.

[@progressisbeautiful1541]

If you know how to write a propper SCSS, you won’t have problems, and HTML will be much cleaner.

[@datoubi]

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.

[@thienhuynh7962]

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

[@1Chitus]

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 :)

[@DxAce]

Facts!!!

[@djciur]

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.

[@sazaraki]

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

[@dexter-wy5bo]

wait till you learn how to use brackets ;)

[@MobiusCoin]

@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.

[@samuelharris6513]

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.

[@carloss3028]

You could learn BEM ✌️

[@DanielRios549]

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.

[@Taernsietr]

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_

[@markoobradovic5098]

Same here, mostly had my own .flex, .j-center and such 😆

[@HugoBernardo]

That’s me. Same experience

[@datguy4104]

I did the same but ignored tailwind because I just assumed it was bootstrap 2.0. Mine wasn't super in depth, though

[@astrosoup]

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.

[@jalolkhamroev5634]

I just started learning Tailwind CSS and got the notification about the new video immediately…

[@stephanekiss]

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.

[@spacewizards9039]

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.

[@ViktorSarge]

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.

[@matthewtrow5698]

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!"

[@ra2enjoyer708]

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.

[@matthewtrow5698]

@@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."

[@matthewtrow5698]

"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!`}

[@bootsycoll]

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 😂

[@Mohd_Zaid_khan]

You know he's bout to drop video on the topic when he asks about it in community posts 💀

[@lethatsinkin]

Guyss! I finally learned enough 🎉this was the first time I was able to relate and understand what this guy was saying, completely 😊

[@安然-x9t]

lol same

[@nicklasbryntesson1789]

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.

[@kandiesky]

Not supported on Safari < 15 tho

[@d.l.3807]

@@kandiesky Supported since Safari 14.1

[@ionut-cristianratoi7692]

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.

[@theodorealenas3171]

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.

[@CodecrafterArtemis]

@@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.

[@Randalandradenunes]

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.

[@benasmockus6988]

It weights too much

[@jshstuff]

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.

[@Randalandradenunes]

@@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.

[@Daktyl198]

@@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.

[@jshstuff]

@@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

[@sumeetparmar4383]

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.

[@akanahketo5823]

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.

[@DetectiveNoir_]

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

[@Mabi19]

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.

[@ifelseprog]

Can you give examples of React-isms? I really don't see any

[@spookyskellyskeleton609]

@@ifelseprog component style

[@Mabi19]

@@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.

[@ifelseprog]

@@Mabi19 oh ok I see, thank you

[@TruthAndLoyalty]

@@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.

[@uiedbook7755]

I don't like tailwind, I keep trying to find it hard to compose I just keep going to css

[@blklgnd]

I didn't at first too, but once you get used to it, it just flows

[@thedigitalceo]

I must be the only person who actually likes writing CSS 🤡

[@lightning_11]

Probably. Sounds like you have some unique skills that should get you a nice job...

[@andybrice2711]

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.

[@JulasssPL]

1. Read about directives in Tailwind 2. Read about arbitrary values in Tailwind 3. Love Tailwind forever from now

[@rawallon]

how do you like them apples

[@haza102]

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

[@u4yk]

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.

[@Andrey-il8rh]

Did you know that scoped styles downgrade performance especially on big projects?

[@haza102]

@@Andrey-il8rh any source? I'd imagine the build stage gets rid of this in modern frameworks

[@punsmith]

@@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.

[@Andrey-il8rh]

@@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?

[@lbirkert]

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.

[@srki22]

" 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.

[@amans6504]

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.

[@jshstuff]

to me this is one of the more valid critiques of css

[@Daktyl198]

So instead of changing the font on 10 files, you now have to change the font color on 50 elements?

[@amans6504]

@@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.

[@ExpeditionCirkus]

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.

[@ra2enjoyer708]

"A library of CSS classes" is just Bootstrap and it existed since the dawn of time. And yeah theming in tailwind is terrible.

[@arjix8738]

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)

[@PanosPitsi]

@@ra2enjoyer708 the ring in tailwind is dead simple you are confusing it with the nightmare that is customizing bootstrap

[@vukkulvar9769]

The way to go!

[@ra2enjoyer708]

@@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.

[@bilmoleque2]

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.

[@anuraghere4997]

Starting point. Pl comment.

[@anuraghere4997]

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

[@lyndonraya7769]

@@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 ..

[@Alex-wl1sp]

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.

[@smokeyoak]

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

[@conradmbugua9098]

this is why i left web development, i was too overwhelmed by all the new tools and frameworks

[@codeloch]

Absolutely agreed

[@conradmbugua9098]

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

[@J90JAM]

@@conradmbugua9098 the basics don't change, the rest is syntactic sugar i.e. the frameworks.

[@Evi01]

So true, good old internet explorer 5, 5.5 and 6 lovely times to make things look the same in all browsers.

[@ArduinoTurkBatu]

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

[@djrmarketing598]

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

[@vincviertytaccount2608]

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.

[@johnnyapplesmith]

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.

[@CodingAbroad]

I’m the Lead at my company and I’m making everyone learn Angular because I like it muhaha

[@charlesm.2604]

​@@CodingAbroad All I see is a good lead for once

[@CodingAbroad]

@@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

[@charlesm.2604]

@@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

[@melski9205]

'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.

[@crocodilecrox3758]

There is no debate, css gives you so much features that no framework can even compete.

[@kodaloid]

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.

[@nepp9574]

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?

[@Ardano62]

Same for machinecode

[@Zszywacz]

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.

[@Saruman_Kaz]

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.

[@richardmcsharry]

This is the way.

[@codingmickey]

Just when I thought of making a project to learn tailwind 😭👍🏼

[@kaansal9523]

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.

[@stevenleonmusic]

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.

[@DreadKyller]

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.

[@mourge101]

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.

[@HandledToaster2]

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.

[@HandledToaster2]

If you learn the easy framework and skip the underlying tech, you will always eventually get stuck.

[@MrEd-qc7vr]

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

[@chrisc2503]

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.

[@githoweb]

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. 😕

[@fancybaguette]

2:23 🤓☝ Akchually you can just type "inset: 0;" in regular css too

[@Fireship]

well played

[@Ethnar86]

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).

[@dougc84]

The thing that made me come around to Tailwind was understanding that utility classes are great... but you don't have to write everything like that. Anything that is repetitive or generic UI elements gets split off into CSS using @apply statements. That means I don't have to load up a component or copy/pasta a mile long declaration of CSS classes just to spit a damn submit button onto the page. And if I need to change how buttons look globally, guess what? I only have to do that in one place, not 476 locations. And that's where I land with Tailwind. It's a great tool to get started and start prototyping, but any app that values a good, consistent UI that is repeatable and easy to maintain shouldn't just have a million inline CSS classes. It's simply not maintainable for an app that has more than a couple pages. Use @apply when you start repeating yourself and you'll save yourself a ton of time and effort.

[@tyaho83]

Best com!

[@aviralvikram9431]

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.

[@darkyelox]

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.

[@p19shelt]

Anything is a great too. If u know how and when to use it🤣

[@pedronunes8766]

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!

[@isaacchukwuka5966]

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.

The reason tailwindcss does not suffer from separation of concern issues is because it is a utility library for css. And since we make a lot of [standalone] components these days, the tiny ass template containing the styling is not an issue. Actually using semantic classes can become bothersome in such a SPA project.

[@MrJohAA]

1- Modern framework has scoped css so no problem to change some properties in your class without breaking all the site. 2- Good practice forces you to use a component for only what it is suppose to do. So don't build complexe component and you will not have to keep in mind what class do what. 3- Utility classes is a good option because longer the project the more tiring it is to choose how to name your classes, but it's not a complete solution has you can see. It can help in some case.

[@juniordev4190]

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.

[@javiasilis]

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.

[@ed1nh0]

When I was young and stubborn somebody told me it's pointless to set the unit for 0 (zero) value, so 0px or 0% or whatever after 0 means just 0.

[@simoncallelaverde]

Inset just worked because “inset” is also a property, which combines by default “top, right, bottom & left”. It is meant to in CSS. It is not a Tailwind thing.

[@jiillescas]

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.

[@codingcrashkurse6429]

I absolutely love tailwind and use it in combination with DaisyUI since my Frontend Skills suck so much. Easy to use, easy to extend on.

[@ShaferHart]

thanks for the rec. DaisyUI looks useful.

[@diwakardayal954]

0:16 plays "How dare you"

[@jaygee_14]

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

[@roblesrt]

"As programmers the hardest part of the job is naming things..." and even so when you are working with teams.

[@jim0_o]

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??)

[@danko95bgd]

Tailwind is a dead temporary tool that gets you in technical debt in general, a big anti-pattern and is used mostly by ignorant people that don't understand css and more importantly don't have the will to at least learn the basics of technology they are working with. First of all, how does it make you faster? Did you test that speed somehow or did you challenge somebody without tailwind to a duel at the same time to compare the speed result? Did you create the same app with and without tailwind or you just think that you are faster somehow, which is not really true because you are checking their docs every second to see if it's font-loose or font-middle or medium or whatever naming convention is chosen instead of knowing the actual css standard. Also the complexity of the initial setup, the tooling and the required build step, learning curve and all the additional stuff that you need is very bad, instead of just writing css. CSS is not a class, it's not a linear thing and it's not about naming or adding p-4 and m-4 everywhere. It has many things like cascading layers, grids, subgrids, media/container queries, writing modes, logical properties, css variables, functions that literally work on colors and stuff, calc, selector families like :has, :where, :marker and many others... That is not something you can do inline and is not meant to be done inline. Just because all of these things, tailwind by design makes no sense because it either has to copy everything in a dumber way with a different naming convention or just not support half of these good things, because you just can't support everything, it is a lot of work. Am i not supposed to use hundreds of css features literally because that dude created inline css library? What about using css grid and its many features like templates, or area names which by design work in multiple lines? What about nested css specification that will probably come in the future, or @supports thing or anything else? I guess i am not supposed to use those at all because some tool called tailwind does not work like that. Also should i wait for the tailwind creator to add every new css feature in the future? So whenever something new gets added, i will have to wait and pray that the guy wants to implement that, for example new media queries, container queries, color syntaxes (like relative colors syntax with `from` keyword and many other things), new color modes (with new gamuts), houdini options and so on. Debugging is painful as well, whole page is flooded with hundreds of classes, good luck finding what you think is wrong, because it usually is like 3 letter class name somewhere in the middle of all those classes. And the argument of "But i can abstract it in the component and it will be only seen in that component" doesn't make much sense either. You can abstract anything in your component, you can use css modules or svelte/vue scoped styles or even stupid css in js libraries (like styled-components or emotion, which will be dead when -from color relative syntax comes out) or just use BEM naming convention with global styles with unique names. Your component is still hard to read, doesn't matter that it is abstracted somewhere, you didn't solve the problem, you just put it in a box somewhere. You also talk about the reduced size of css but you bloated your HTML 20 times more with hundreds and hundreds of classes haha, so nothing is reduced anyway. Tailwind gets worse as the complexity grows. Imagine adding bunch of stuff for custom animations, transitions, gradients... If you use tailwind and if it is even possible to do with tailwind, it will look so bad, and if you are not using tailwind then you have both tailwind and normal css which is kind of stupid in my opinion and is even more messy. Also funny things about tw is that people got excited when tw announced custom precision variables like 13px with some weird bracket -[] syntax, if almost css worked like that where i could add things how i want in the first place. Oh wait it literally does work like that for the last 50 years, you add custom variables when you want and when you don't, you should use ... wait for it... css variables with predefined values. Also people talk about this design system where everything is like nicely defined, but yet the framework still has this stupid thing called @apply and think about what it does ahha. You use tailwind because you don't want to write classes but then you don't like adding all these repetitive classes (why do you not like repeating 100 classes always? how can it be when tw is so amazing but ok) and you specify them inside @apply and then you can write a class that applied those tailwind properties hahaha, this is the dumbest thing ever. Also another thing is that tailwind doesn't work well with accessibility features. Lot of these things can't be done inline, i won't even start on those here... Also the tailwind paid library of built in components is built in a horrible way without accessibility at all, without semantic elements and full of bad practices. Imagine paying money for something that is not on pair with every other open source component library that i have ever used, that is probably the worst thing. That the author just wanted to milk the money out of you with these paid private built in components, just look at them they are horrid. You can have nice things from tailwind (not many) without tailwind, like it's colors or predefined shadows and spacings, if you are not a designer and can't think of those yourself. you can just steal them and use them as css variables. What problem does tailwind solve, can someone tell me? If the problem is that you suck and don't know css, tailwind won't help you there at all, you are ignorant if you think it will, and yes i have seen those comments: "i suck with css so i decided to use tailwind". It's a dead temporary tool that just stops you from actually learning css properly and appreciating its capabilities, it's even worse than css in js phase. And yes sadly i have tried it for a while, but i just can't think of anything good about those people or companies that use tailwind, it's just a bad sign. You should learn from experts like Lea Verou, Una Kravets, Kevin Powell, Adam Argyle and many more how to write actual proper css and it's not an inline string. this guy also wrote a nice blog, just search: "Tailwind is an Anti-Pattern", he demonstrates with images and other things...

[@tedchirvasiu]

didn't read lol

[@danko95bgd]

@@tedchirvasiu I didn't expect from you to read that. You can't read 5 paragraphs because you have a brain of a tiktoker with 5 second attention span.

[@ra2enjoyer708]

I completely forgot about tailwind handling of @media queries. You basically have to write m * n * p classes for each component, where m is the amount of visual states of the component, n is the amount of themes (gladly, it doesn't know how to do multi-theming, so it's always just 2) and p - the amount of @media queries in the component. All of that complexity when bootstrap accomplishes the same and doesn't require jumping through hoops, not to mention it doesn't stop you from slapping custom classes on top.

[@tedchirvasiu]

@@danko95bgd weak clapback, boomer. dnt care abt ur salty L takes n ish. tailwind's bussin rn, no cap.

[@jshstuff]

holes in a number of these arguments but im loving this copypasta energy

[@naykoom]

I bet 95% of tailwind lovers are react developers

[@ggff2269]

I used to use tailwind with django when I was beginner. Now I am react dev too😂😂😂😂

[@blazingelse9104]

In many enterprise applications, I do not want to override components/modules but I do want to change their style and layout.

[@mtnwildernessfamily]

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.

[@AndreMury]

Weird thing is that one time a tAiLwInD ReAcT dev told me that "Boostrap is too verbose and Vue is only for prototypes"

[@nsrc9583]

Tailwind is great for productivity, but ironically I've seen a fair amount of developers get hung up on styling because of how convenient it is. Styling is important, sure, but none of it matters if what you're supposed to be shipping is buggy/insecure/inefficient. Links that don't go anywhere or go somewhere unexpected, animations causing noisy fans, whac-a-mole popups, poor accessibility, or a site that's just plain slow-it just takes one of those to kill a user's interest.

[@nikhilsultania170]

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

[@hx9]

to be fair, we should care about what other people use because the more community, the more support that goes to it if everyone switched to assembly tomorrow, you may have trouble asking for help with your COBOL code

[@imluctor5997]

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.

[@HonoredMule]

As a developer I have an open mind toward tools like tailwind, but as a consumer I absolutely abhor the current slate of CSS processing layers that reduce markup to meaningless gibberish and obfuscate the last home of semantic data. So many mainstream websites have shifted from a UI that's "terrible but fixable" to "terrible and also inscrutable." All my usability scripts are getting borked one by one, with no hope of patching to maintain.

[@1000sh]

I guess it's different paradigm. In my experience, TailwindCSS is so useful together with 'classnames' and 'tailwind-prettier' modules (not sure exact name but like it). At least to me, the time for looking up where's CSS for something HTML class, that was so wasteful. On using TailwindCSS, I realized that I spent so many time for matching HTML and their own CSS styles. Anyway, if you write a code as a atomic design in frontend project, Tailwind's long className wouldn't bother you that much. And TailwindUI is also good to use

[@d4rkd0s]

Try tailwind CDN if you're on a smaller project, its 1 liner and you're off to the races, no custom stuff / builds. But it's quick n' dirty, and works!

[@jacobkorede2486]

I really enjoy using tailwind.

[@mohammadesmaielemadi8480]

You can use tailwind inside SCSS. create a class and use @apply, something like "@apply text-center" and verbosity won't be a problem anymore.

[@mogencheng3829]

Being proficient at tailwind means I no longer have to dread creating new stylesheets. Before I had to contemplate the amount of time it would take to write a react module, and now i can write them twice as fast

[@wkolcz]

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.

[@martapfahl940]

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.

[@ruel1983]

I tried almost all possible solutions in last 12 years. The best is tailwind for sure. BTW, before tailwind gained popularity, there was a css utility package that i used almost 8 years ago called “bass css”, that package used the same approach as tailwind.

[@PhonicUK]

My objection to Tailwind is that it's basically technical debt in a can. Want to do a site-wide style change? Go and hand-edit all of your HTML. Want to implement themes or accessible variants of your site? Forget it.

[@nomadshiba]

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

[@Me-vc4sf]

Dev world : Tailwind is good. You should learn it After 1 year : tailwind is the worst

[@himanshuwiz]

I am looking for the internship and the tailwind become mandatory in every small organization

[@Kyle-rf5mb]

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.

[@MicaelAngeles]

Yep, switched from bootstrap to tailwind, and I don't wanna go back

[@lukas.webdev]

Congratulations! 😉

[@guillermomazzari4983]

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