What is Tailwind CSS

[00:00:00]
>> If you're new to Tailwind, if you're like, I've heard a lot about this Tailwind thing, but I have never used it, cool, welcome, let's do it. Tailwind is a, I won't go as far as to call it a, they'll call it a framework, that's a loaded term.

[00:00:17]
But it is definitely a set of tooling that allows you to write what is called utility-first classes. And this is maybe partially the controversial piece that we'll deal with here today. I am probably not as staunch on some of the same principles that I think the Tailwind team is as well.

[00:00:41]
I'll bend the rules occasionally when it behooves me, but you can see even on the screenshot on the page the basic vibe that we're getting here, right? And so if you've kind of maybe in the past favored semantic CSS, where it's like, okay, this is gonna be the blog post title.

[00:01:01]
Maybe it's BEM, where I've got blog, underscore, underscore title, so on and so forth. And when I first used Tailwind, and I was like, what is this, right, I don't know about this. But then I thought about it a little bit, which is I am guilty of the following move, right?

[00:01:18]
It's like I'm gonna start off fresh, I'm gonna use semantic CSS, and it's gonna be the blog title, and I have blog author, but then you know what happens? Look at that blog title. My blog title is really just some bold text, maybe a little bit bigger than the rest, maybe with an underline underneath it.

[00:01:37]
And the next thing you know, I got something else, maybe I got a page title somewhere else. I'm like, all right, I got this style, I'm gonna rewrite this over and over again, right? And so all of a sudden, your semantic styles start to kind of crumble. And it's really hard when you run a team to kind of keep all of that in place, too, because there is always the goals of perfection that we all seek.

[00:02:01]
And then there is reality cuz there's an outage or something along those lines or some major thing that we have to get done. And running a big codebase is a game of bartering with reality a lot of the times. But then there's also some very, very practical pieces, this idea of utility for CSS.

[00:02:26]
Tailwind is going out of its way to make sure that it is helping you to provide the smallest bundle of CSS possible, right? Let's say that I was a better person than I am, right? And I was super good at writing all this semantic CSS, where I was writing the same styles over and over with different names, right?

[00:02:49]
Well, those are a bunch of classes that I need to now ship in my codebase that all do the exact same thing, right? It'd be a lot easier just to have a few classes of like, make this extra large text, cuz that is one class, right, where I can see that.

[00:03:05]
And then also, back in the day, there was a lot of separation of concerns, right? I'm already writing JSX or Svelte or whatever, I'm already writing markup in my JavaScript to begin with, might as well bring it all in together as well. And so you get this very, what might feel a little like, you can kinda see it's going off the screenshot here, right?

[00:03:30]
And that feels a little bit much. But then in a lot of cases, it becomes very ergonomic to be like, okay, I'm looking at this thing, I roughly know exactly what it does, I don't have to jump back and forth between two different files. Or even if you're using something like Vue or Svelte, where you can put the style sheet in the same file, up and down that file, and don't get me started on React.

[00:03:53]
And so having a lot of that in place has been super powerful. The one thing that I will kind of mention is there's a page on the site that is talking a lot about this utility-first CSS. And there's a little bit of extra justification of, it's totally cool, you're using probably a templating language anyway, right?

[00:04:15]
And so in a lot of cases, you will kind of wrap these things into the components as you go along. It goes a little bit into, and then you have multicursor to edit a lot of styles at the same time, I'm like, okay, that's a little much there.

[00:04:26]
But I will say, even if your initial sensibilities are like, I don't like this, I would implore you to give it a chance, because I have to say, that was my initial reaction. And now, there's not a world where I would start a project probably and not use Tailwind as my first choice, right?

[00:04:45]
Once you kind of get into the rhythm and routine of it, the level of productivity becomes incredible and then you don't really want to go back. And there's a bunch of really interesting things to kinda notice even in this little screenshot. And we will explore all of this kind of, and I'm just trying to setting the kind of scene.

[00:05:05]
Which is you've got some syntax like this here, which is just basically all of your responsive design breakpoints. You just write in a single line, it's not like keeping track, I've had the style and then I write the media query somewhere else. It's the actual ergonomics of the flow become incredibly powerful once you kinda get into the rhythm of it.

[00:05:28]
And I think that is part of the selling point there as well. And the cool thing is also that everything in Tailwind is completely customizable. It's not like certain other CSS frameworks that have existed in the past, where it's like, let's just say it, let's just call it out, you know when that site was built with Bootstrap, you can smell it.

[00:05:52]
The nice part about Tailwind is that it does come with a default theme, right? But literally, everything in that default theme is customizable, right? From the color palette to the size of the spacing, to the font sizes and line spacing that they align up to, everything is totally customizable, and you can go tweak those things.

[00:06:13]
And the nice part is, unless you're changing the actual units, they ship, you look at that rounded-xl, what if you decide you're gonna use totally different t-shirt sizes? Then yes, you do need to change that, or the colors. But generally speaking, you could basically swap out the theme, change the theme, and completely reskin the app without having to do really anything beyond that, right?

[00:06:35]
But if you are migrating from an existing design system, maybe doesn't align with Tailwind's, you can absolutely customize it for everything you need. Or if you're kinda doing contract work or maybe some consulting, you can kind of create a utility belt full of utility classes, pun unintended, right?

[00:06:56]
And be able to reskin and restyle things and become incredibly productive and powerful as you go through all these things. I've used it across personal projects, everything from a Next.js app to a Svelte app, so on and so forth. And generally speaking, the value prop is absolutely there.

[00:07:15]
>> How much CSS do I need to know before starting to use Tailwind?
>> All CSS you know is going to benefit you, but how much CSS do you need to know? In our time together, I'm not going to assume too much. When we get into some stuff with the grid, having familiarity with it, trying to learn how to do CSS grid in Tailwind and also with CSS grid at the same time?

[00:07:41]
Sure, but I would say, generally speaking, we're gonna take this from kind of the first principles and build up. So I think in our time together, right, I don't think that there's much of an expectation that you are a CSS wizard. And so no, but knowing all the weird ease and peculiarity of CSS, obviously, isn't gonna hurt, right?

[00:08:03]
>> Looking at all of these classes, I'd assume that at a certain point, you would take several of them and make a higher order class of components and etc. I'm assuming you're gonna get into this.
>> So I will get into it, I will. It's like I've mentally prepared for this question very much so, right?

[00:08:27]
The term I was using as I was preparing for this is I will teach the controversy. I kind of mentioned in the preamble in the very beginning, if you read the Tailwind docs, you will see that they have a much more stern stance on, this is fine, everything's great.

[00:08:45]
There are ways to compose higher order styles, and there's very much, if you really need to, but you probably don't need to. I do it, right, I do it when it's useful. I'll show you how I do it. This is going to be the practical introduction to Tailwind, not the diehard version of it, right?

[00:09:10]
And so its gonna be sprinkled in with, this is what they officially say you should do, and this is what I do because I have to, [LAUGH] right? And so we will walk that fine line, and I am prepared for a certain amount of, really, that seems a lot.

[00:09:32]
But we will kind of get a feel, and I'll show you the the patterns that I use. Take what works, right, and ignore what doesn't work, kind of figure out where you wanna go on that spectrum as well. But I will show the things that I do in my apps and in my day-to-day flow.

[00:09:50]
>> Do you use Tailwind and a preprocessor together?
>> So by definition, if you use Tailwind, you do use a pre-processor with it. So for them, Tailwind, theoretically, I think it supports both Lightning CSS and PostCSS, but PostCSS is the kind of most common way to use it.

[00:10:10]
By default, if you just kinda go through the normal steps, you will end up using it with PostCSS, it is effectively a PostCSS plugin. So yes, because I use it with PostCSS, but PostCSS is also like the, it's mostly CSS version. There probably isn't a great use case to use it with Saas or something along those lines.

[00:10:34]
And you probably don't want to because some of the value prop of Tailwind is it uses this library called PurgeCSS, right? Whic effectively what it does is at build time, it scans your codebase and looks for what CSS classes you're actually using, right? And only includes those in the final bundle, right?

[00:11:01]
And so part of the resistance, I think, on the Tailwind side for creating some of those higher-order classes is that all of a sudden now these classes are referenced. But there's not really a great way to tell if then your higher-order class is referenced. I am personally okay with the maybe 1% of unused styles that might make it all the way out there, but that is a lot of the logic and things.

[00:11:28]
And we'll kinda see a little bit of some of the best practices around that, Mark.
>> How does this compare to MUI and other libraries like that? And then would you recommend migrating to Tailwind?
>> I So that's a tricky question for me to answer as somebody who's basically only used Tailwind for the last two and a half years, right?

[00:11:50]
There is definitely not a component library or anything along those line, right? You don't get any kind of, there is actually, if you would like to pay money, there is a component library that you can buy that has a bunch of prebuilt components. But for us at Temporal, we have our own design system that I've built with Tailwind.

[00:12:10]
So I can't really say, and it's better or worse than MUI, cuz the depth of experience I have in Tailwind versus I have played around with the other ones but not on the same level.