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

🔗 Resources

🔥 Get More Content - Upgrade to 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.

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

[DanielRios]

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.

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

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

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

[colinmarshall]

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.

[craigmcinnes]

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.

[kotimara]

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.

[iamtheVRTEX]

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.

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

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

[Chitus]

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

[sumeetparmar]

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.

[djrmarketing]

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

[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

[nicklasbryntesson]

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.

[gyorgykovesdi]

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.

[Ethnar]

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

[benemma]

Ones you go tailwind you can never go back