How Tailwind CSS Works

[00:00:00]
>> Steve Kinney: Like I said before, there are some things to think about when it comes to using Tailwind. Knowing what we know about the fact that it's ripping through all these files and figuring out what classes you are using and not using, which. Is it important that you understand every nuance on how Oxide does it?

[00:00:17]
Absolutely not. Is it like important that you understand the three sentence version? Yes, which is. Imagine that it is not particularly complicated, which is it's not loading up a language server like Typescript and reasoning about everything. It is basically, it's effectively in earlier versions of Tailwind, this is true.

[00:00:44]
It's less true now, but spiritually, as far as the mental model works, which is imagine it's just using a regex on every text file in your code base. Bye.
>> Speaker 2: Does the idea of Tailwind treating files as plain text mean that I could have a class name stored in a JavaScript or TypeScript variable and tailwind would pick that up?

[00:01:08]
>> Steve Kinney: Yes, as long as you have the whole class name, which we'll talk about in a second.
>> Speaker 2: Got it.
>> Steve Kinney: If you try to get clever, and I think it's on the next slide or one after that. If you try to get clever with template strings and concatenation.

[00:01:19]
No, right? Because it doesn't reason about your code, it's just literally looking in somewhere in these files. Did they say BG Blue 600? Yes. So yeah, it goes through all your files, It's not doing anything. It's just looking at the text, it's just looking for the classes it knows about.

[00:01:37]
And we'll talk about how to customize Tailwind. Built into Tailwind, there are colors, there are spacing, there are fonts. But it is not like the days of Bootstrap where you knew, you knew if a page was made with bootstrap. There's default colors, there's default spacing, there's default font.

[00:01:56]
Everything in Tailwind is customizable. Right and we'll look at how to do that in a little bit and that changes what then the build tooling looks for as it rips through all the files. But basically once it gets a sense of what the tokens based on how you've tweaked it and customized it, are it.

[00:02:12]
It goes through everything. Yeah, just simple string matching the whole way through. It does ignore some files. It ignores the files you think it ignores, right? It ignores the files that everything ignores, like things in Git ignore. CSS files will get ignored because they are going through the build process themselves.

[00:02:32]
And that's where Vite or webpack or what have you works and obviously lock files. Yeah, it ignores the files you think it ignores. Most tooling happens to ignore. And so as I alluded to with Mike just a second ago, if you try to get clever, the chances of you messing it up are high.

[00:02:59]
So if you think you're smart, just try to do the simplest possible thing. And so if you are trying to say, I want to do a template string and inject that color, well, now it's not going to find it. However, if you say like Const success equals BG green 400 const error.

[00:03:20]
As long as the full string is even in your JavaScript, and your HTML file is somewhere, it counts. But it can't try to then run your code and dedupe everything at this moment. So yeah, if you are going to mention a class, go all the way. Mention it in full.

[00:03:40]
And I will say this. Cause we're gonna spend a bunch of hours together. It could happen to me at some point. It will happen to you at some point. If you don't see the style, like you're like, I did it and it's not happening, that's the first thing.

[00:03:53]
Did it get stripped out for some reason, right? Like that is the first thing your brain should go to. Did I try to concatenate strings? Did I try to do something? And there are ways to navigate this. Cause sometimes you don't have all of the markup in your code base.

[00:04:10]
Not always. But like if you are pulling in something from a third party library and they're putting the classes there, you might have to tell tailwind to like allow list or safe list certain classes. And that's all doable, but also really esoteric. Right? Unless it's coming from some other place.

[00:04:28]
Generally speaking, as long as you follow the I didn't try to use a template string or concatenate my way to a class. You're probably good. Cool. There are plugins. Plugins are actually written in JavaScript, but you can import them via CSS. These are just using CSS functions and directives to pull in additional functionality.

[00:04:52]
You can also pull in a given font. This is literally from my own site's CSS file. Yeah, so you can pull in stuff along those lines. We talked about allow listing. So let's say you are pulling in some other component that you're loading from somewhere else. You'd be like, wouldn't that involve directly injecting.

[00:05:17]
Dangerous. Whatever. I don't make the rules. We all know that some of us have weird parts of our code bases because of legacy reasons. You can also say like, hey, do not strip this out, right? And in this case it will like keep that class in there even if it doesn't find it in the code base.

[00:05:36]
If you are then loading it from somewhere else.