Check out a free preview of the full Intermediate React, v4 course:
The "CSS Libraries" Lesson is part of the full, Intermediate React, v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian discusses the differences between TailwindCSS and other popular CSS libraries like Bootstrap and Emotion. Choosing the appropriate CSS library for a project often depends on the overall design goals or architecture of the application.

Get Unlimited Access Now

Transcript from the "CSS Libraries" Lesson

[00:00:00]
>> Good time to check in as how enraged am I a Tailwind at the moment? [LAUGH] It definitely is, it's challenging to what people think that how we should do CSS. But I'll tell you that I think it does help, It helps me go fast, particularly when I'm prototyping something.

[00:00:24] But here's the trade off here. These class names are unruly, right? These get kinda long. And as you might imagine, this is not that long. [LAUGH] They can get significantly longer. As you guessed here, this number represents the lightness. Actually, 100 being the lightest, and then 900 being the darkest version of it.

[00:00:51] via is a middle stop. So, I mean, just to demonstrate, you could have made this go via-cyan-count, it does. Then you get this just sack of goodness. [LAUGH] But it's the middle stop, right? If you're familiar with gradients, you can put stops in them, that's what via is.

[00:01:18] Margin-bottom, width-full, right, you can also do like width, dash, yeah, 6 or something like that. There's a various different ways of doing that. text-center, center the text, padding, all that kind of stuff. And then text-6xl, you can do small, medium, large, xl, double xl, up to 9xl, that's the largest, and then hover.

[00:01:48] So if you look here, when we hover, it goes a little darker. It's probably kinda hard to see on my screen, but you can probably see it on yours. The way that you do that is with these hover: whatever you wanna add, right? So you could do hover, I think, does it text, I gotta remember, text-, is it underline?

[00:02:16] Anyway, you can do whatever you want. I'd have to go look up how you do underline. But anything that you put under hover will only be applied on hover states. So this is a terrible idea, but right now it only centers when you hover over it. I think focus is one of them as well, there's several of them.

[00:02:41]
>> People are saying they were having a hard time, given it's showing up. And this solution seems to be deleting the Parcel build and the dist. Or some peoples were saying holding Shift and then hitting Refresh worked for them.
>> Sure, yeah, so if you're having a hard time at this point doing it, I'll show you how to do a full rebuild.

[00:03:06] If you really wanna let go totally nuclear and just do everything, remove .parcel-cache, parcel-cashe dist node-modules, and then run npm install again. So I would do that, that's gonna take a second cuz there's a lot of packages. npm install, That'll take a second to reinstall everything. And then you can do npm run dev again, it might take a second for it to get started because it's having to do a full rebuild.

[00:03:38] Then go over here, I would say just close the tab that you're on, and then open it again. And that should get you into a better state.
>> Do you have a huge style.css now that you're including Tailwind?
>> I mean, look at what it's including here. It's probably a development build, but let's see what's in it.

[00:04:03] It's 8.91 kilobytes at the moment. The idea with Tailwind, is obviously we have width one, width two, width three, all the purveyors' different permutations. But because of the way that PostCSS and, Tailwind and React and Parcel all work together, when you actually build this for production, you're only including the styles that you're actually using, right?

[00:04:31] So for example, you can see my code here, I'm not using p5 anywhere, right? So when I build this for production, p5 will not be included in my file, in my final style sheet. In theory, your CSS should be much smaller, significantly smaller. And it has a logical max in terms of if you use literally every piece of Tailwind CSS, it still can only be a certain size, right?

[00:04:58] Because it cannot expand beyond a certain size. Whereas, I remember when I worked at LinkedIn, our CSS was two megabytes. Yep, that was a whole another story. Anyway, I got a bit of trauma coming up there for just a second. [LAUGH] You can't hit that with Tailwind, right?

[00:05:19] Tailwind has a logical max of how much CSS I can actually ever include. So, in general, I would say that your Tailwind build should be much smaller than normal builds of CSS. The question is just how well does your current CSS zip? My guess is not well, [LAUGH] even if it's maximized, Tailwind can probably beat it, yeah.

[00:05:41]
>> Could you contrast Tailwind versus Bootstrap and some of the other options?
>> Emotion.
>> Yeah, that actually bears talking about. So let's start with Tailwind versus Emotion and styled-components and JSX styles and all those various different permutations of CSS and JS libraries. In Complete Intro to React version 5, so that would be Intermediate React v1, I taught Emotion.

[00:06:12] And before Emotion I taught styled-components, which are both awesome libraries, I actually know both of the authors really well. I was literally just texting with Kai right before I came up here and started talking, who is the creator of Emotion. They're awesome, they're super useful, tons of companies are still using them.

[00:06:33] So I'm just showing you one of the various different approaches to CSS and React. But there's lots of really valid reasons to use the other ones. Emotion and styled-components, which are very similar in terms of their approach, I'm fine if you choose either one of those to use.

[00:06:48] In general, I tend to use a Emotion more, it's just because it's the one I'm more habituated to using. But styled-components, especially recently, has really upped their game, it's a great library. If you have a lot of programmatic manipulation of your CSS, you need your JavaScript to be managing your CSS a lot, that's where Emotion and styled-components really, really shine.

[00:07:14] Because they've moved all of that to the JavaScript layer, which allows you to basically then use React to manipulate it, right? Whereas here, we're just putting tags, right? We can control what tags go in there, right? And that would work just as well. But if you wanna do computation of color and hue and saturation and lightness and things like that, that's where something like Emotion and styled really shine.

[00:07:41] Whereas something like Tailwind is a lot harder to achieve that with. It's not a typical use case, right? I'm totally fine as well if you just choose, why I like Emotion anyway, it's a totally fine way of doing code. So Tailwind, Emotion, styled-components, all achieve the same thing with different approaches.

[00:08:03] I think that's kinda what I want to say about that. But they're still just tools to use to write styles, they're just different methodologies. Something like Bootstrap, and there's lots of them out there now, things that are similar to Bootstrap. Bootstrap is one that I used for a good chunk of my career, particularly when I was a lot earlier, like Bootstrap 2 and before, it's a style system, right?

[00:08:28] So they say, all right, here's your input control, here's your modal, here's your jumbotron. Here's all those kind of various different things, and it's premade components that you just put the components on your page. These are awesome, if you don't really care what your website looks like, and you just need it to look generally nice, right?

[00:08:52] So I'll use the example of a company intranet. You don't want it to look like this, where it's just someone just throwing out HTML and style tags on the page. But you want it to be laid out nicely or something like that. Use Bootstrap, dear God, do not write that CSS yourself, there's no reason to, right?

[00:09:09] You don't need to look on brand for your company, you just need it to be readable and useful, and it looks plenty nice. The reason why I say don't put that on maybe your production consumer facing website is, there was a hot second in the industry where every site looked exactly the same, because everyone used Bootstrap.

[00:09:27] Every company used Bootstrap, present company included, I did. We used it at Reddit, we used it at Needle, which is the company that I worked at before Reddit. Everybody used Bootstrap, it was the hotness at the time, right? Eventually it was like, hey, maybe all websites shouldn't look the same.

[00:09:47] It was a novel thought at the time. And so that's when people kind of moved away from Bootstrap. But that's when you wanna use Bootstrap is when you just need something to look nice and you wanna be quick about it. Okay, yeah, I think I'm pretty satisfied with that answer.

[00:10:06] Cool, other questions? All right. So I showed you hover, but there's also disabled is another one that you can put here. So if something's disabled, it'll do something different. Focus, right, which is different than hover. Stuff like that.