Introduction

[00:00:00]
>> Steve Kinney: My name's Steve and we are going to spend some time talking about Tailwind, ideally tailwind version 4, but some of this applies to earlier versions. We'll call out where some of the differences are. But yeah, Tailwind, which either a, you've used Tailwind before and you're like, I know what that is, or you haven't.

[00:00:17]
So we can start with that question, which will only open up another question. So what is Tailwind? Well, Tailwind, thank you for asking, is a utility first CSS framework, which then obviously begs the next question. What, Steve, is a utility first CSS framework? That is an answerable question.

[00:00:41]
Which is just a different approach to the way we do classes in css. Maybe more traditionally, you would see stuff like, okay, we're going to have a class for a button and maybe a button hover state. And we'll apply those classes with utility based or utility first css.

[00:01:00]
The ideas are classes are kind of the things that we are doing to that particular component. So you can kind of, even if you've never seen any Tailwind before, you can kind of begin to figure out what's going on and what the styles of this button are based on the names of the classes.

[00:01:19]
So to no one's surprise, even though we cannot see this button on this slide, we can imagine in our mind's eye that it probably has a blue background. The text is most likely white. It might even have a horizontal padding of three. We'll talk about what three is in a moment.

[00:01:36]
And a vertical padding of two right X and Y axes there. And we stack these together. What Tailwind does is it then looks at all of your various CSS classes and figures out which ones actually got used, and then tries to put together the most concise version of a CSS style sheet possible.

[00:02:01]
Your first reaction would be like, yeah, I'm into that. That makes sense. Or a piece of you is philosophically or intellectually horrified. I am not here to defend or whatever. I'm just here to explain. But we'll go into some of the. I'll teach the controversy. How about that?

[00:02:20]
The advantages are one that as you are prototyping, one would argue the JSX argument, which is you can do the kind of interactivity, the markup, and the styling all in one place. There's also the fact that when you are using these single purpose utility classes, the nuances of the cascade and cascading style sheets tends to be less of an issue.

[00:02:49]
But I think more importantly, kind of is these, you know, the fact of the matter is like if you have a whole bunch of stuff, if maybe the kind of normal like padding for the general look and feel of your UI is like a padding of one remote or 16 pixels or what have you, you could argue that putting that on every single card section, whatever component, those lines add up because you can't really minify that.

[00:03:17]
Every time you want to say the background color is a certain hex value of blue, those properties stack up and there's not really a great way to minimize it. Prior to CSS variables we could have also argued there's not really a great way to change it across the entire code base without something like Sass or less or what have you.

[00:03:36]
But I think generally speaking for the purposes of generating a very concise and performance style sheet, having very small single purpose classes that you can stack up is somewhat useful. There are some criticisms at the same time, which is as we will see, even putting together some of my notes and having code blocks on the website, just seeing exactly that running to the first time, line length issues that broke the layout of my own site that I had to go fix before this course, that is a button that had no hover states and very little styling.

[00:04:16]
The number of classes tend to add up over time. A lot of the techniques for maybe trying to limit that kind of are basically antipatterns in a lot of cases. So that is a criticism. You do need to learn these new classes. On top of just knowing regular css there are some tools that help.

[00:04:39]
And again these utility classes are basically trying to express the style like that PX2 is effectively just padding on the X axis and that's not saying what that button is or does in the same way that we might think about with semantic markup, so on and so forth.

[00:04:58]
The one thing I will also add in is that there is effectively a presumption when using Tailwick that you are using some kind of component system. Because if you are going to go through every HTML button in your website and try to put all those classes on it, you will slowly go insane, right?

[00:05:21]
All the multi cursor work in the world is not going to save you at that point. The worst sins that I have ever committed on a code base is getting a little egregious with find and replace. I've dug myself. That's just git reset hard is how you dig yourself out of that one, but trust me how I know.

[00:05:39]
So there is an assumption that you're using some kind of component framework. Now that could be anything that could be React, that could be Backbone, that could be jQuery mounting the DOM nodes onto the page. Something where you can take the idea of a button and apply that multiple places.

[00:05:55]
So then if you change the definition of a button, you change all the buttons on the site. And so we are gonna kind of do a little mix. At some point, we'll just be in a playground, and we're just gonna do regular HTML because getting distracted with a framework and all that kind of stuff is not super helpful.

[00:06:09]
We do have a storybook set up with some svelte code. You do not need to know svelte. It was just what gets the most of the framework out of the way. So we can look at Tailwind. So there's maybe one line for props and that's about it. Otherwise it should look like HTML.

[00:06:25]
But there is some assumption, as I said, that you are using some kind of component system. That said, whether it's web components or React or Angular, you probably are, unless this is a one page site or something along those lines. Even if you are using Ruby on Rails to server generate the page with reusable pieces of markup, all of that is fine.

[00:06:51]
Tailwind is agnostic of any kind of framework. It is effectively just css. And that was kind of true in previous versions, but is very true at this point where all your Tailwind configuration is css. It's all CSS variables, CSS the whole way down. So can I use Tailwind with X?

[00:07:14]
The answer is, can you use CSS with X? If so, then yes. Again, so why it works is if you get that predictable cascade, because again, the way that the classes stack up. There is also the fact that since you are defining most of these shared things with CSS variables, there is very easy to map the design tokens that your designer is using in Figma or what have you with how that manifests itself in the markup.

[00:07:48]
Then Tailwind uses this tool called Oxide, which is just their own internal tool built in Rust, to kind of then rip through your entire markup and figure out what classes do they use, what classes do they not use, and make the most concise version of a style sheet possible.

[00:08:08]
Installation. The answer is it depends, because you do need some kind of build tooling. That's not totally true, but let's work with it. You do need some kind of build tooling to then rip through said components and put everything together. Otherwise you will get one giant style sheet, which I guess works, but depending on what you're using, if you're using Vite, this is about it.

[00:08:29]
It's not that much different for webpack. You can also use it with Post css. Again, it's just a plugin for any of these, whether it's postcss, webpack, Vite, so on and so forth. I'll show you. We're using Vite for most of the projects and examples in this course.

[00:08:45]
So this is literally from my own configuration. As you can see, not a lot going on as Vite pulls in all the different files and processes them. They go in through oxide. Oxide goes. Okay, they did use background color blue 600. Add that one to the list check.

[00:09:00]
They did use a padding of four, which is one REM and cool, add that to the style sheet. They didn't use Fuchsia 200. Rip it out of the style sheet, so that gives you a way to kind of power that. Otherwise you pull in literally everything, which is fine, just suboptimal.

[00:09:22]
And then to kind of load it into a style sheet. That is, once you have partially hooked up to your build tooling and then to add it to your CSS in your. Whatever the root CSS file is, you're going to add that line in there right there. Now this is also build tooling helps here too, because Vite, or Webpack, or what have you will then like go to Node modules, find Tailwind CSS, find the CSS.

[00:09:48]
There's some normal magic that most of our build tooling has at this point will work. There is a CDN version you can put there that actually will like look at the page as it mounts and kind of do something very similar. So you don't necessarily need to use any of this build tooling.

[00:10:05]
You can just drop in. At one point, we'll look at Tailwind Play, which is their little like codepen ish playground is effectively what that is. So you don't even need to do any of this tooling. You could just add one script tag. But generally speaking, if you are using some kind of like component system, there's probably some tool somewhere that you're using for something, right?

[00:10:24]
But it is mostly agnostic of any kind of tooling you happen to use, as long as CSS is somehow involved along the way.