Extending Tailwind CSS

[00:00:00]
>> I would say what we've done here is fine, especially with this like, margin bottom block w 60. I know we've repeated ourselves three times, but we're not repeating ourselves anywhere else, right? But I know still some people are gonna take offense to like I repeated myself too many times.

[00:00:17]
I would like some sort of reusable class, maybe if I had some sort of cascading style sheet of some variety that I could use, right? The temptation I know that you're gonna wanna do here is to go write CSS and just put it here, right? You could absolutely just head into your style.CSS, write my-input blah, put that stuff in there and drop it in your code, it works.

[00:00:44]
Tailwind is not gonna prevent you from doing that. But at some point you're just writing CSS again, why are you using Tailwind? Just go back to using CSS if that's really what you want. That being said, I'm gonna show you how to add layers where sometimes this does make sense.

[00:01:04]
And a good example of this would be like, let's say I have a huge website that has many forms, and I have lots of inputs. It might make sense for you to have some sort of layer that you can apply, right? Some layer class. So let me show you how to do that.

[00:01:21]
Tailwind has these three layers it worries about. The base layer, the base layer, you can think of like your CSS reset. It's just basically like, the body has this, the ordered list has by default, these kind of bullets, has this kind of text and it's very like base level.

[00:01:42]
Setting kind of like the base layer of your application. The component layer is supposed to be things like I have this kind of special form, I have this kind of title, it's very much oriented towards the components in your application. I have this kind of dog component. Kind of match up with like your react components to be honest with you.

[00:02:08]
And then you have utilities, like is this the active one, is this the not active one? And so you can kind of think of it that utility ones will be the most specific ones, then components and then base, right? So, utilities will override components and components will override base.

[00:02:26]
So you can think of them kind of like specificity. Utilities are more specific components or less specific and base are the least specific. So, in other words, if something is conflicting between utilities and components, utilities wins. If something conflicts between components and base, components wins. So, the first thing we wanna do is we wanna make our own search input.

[00:02:52]
So we're gonna say layer components .search-input, and then we're gonna do add apply width 60 margin-bottom 5 block. So this add apply allows us to do Tailwind stuff directly in our style sheets. This makes sense to me if you're in Tailwind, stay in Tailwind, right? Could you absolutely say width 60% or whatever?

[00:03:28]
Yes, absolutely, that's gonna work but don't. Context switching will just destroy your productivity in my opinion. So then we want like a grayed out Disable. There you go. Add apply Disabled opacity 50. Okay, now we have these two utility classes that we can use directly in our search params here.

[00:04:04]
So instead of having this class name here, I can have, as you might imagine search input. Here, I can get rid of this. This is gonna be search-input and grayed-out-disable. And same thing up here, I can have search input. And now everything still works the same but I have these utility classes that are using Tailwind, that is what layers are for.

[00:04:46]
By the same token if you had base things that you wanna do let's say I have base, then I wanted my font family, Comic Sans Ms, it's not gonna work I have no idea Anyway, that's where you do all that kind of stuff there, would be in the base layer, right?

[00:05:27]
Rather layer base, There we go. Now this is so much more adorable that everything is in Comic Sans. But to prove my point here, if you wanted the font family to be different here, you can put it here and say this is, I don't know, impact. So now you can see inside of here, There's a conflict between base and components, but components wins because component is more specific.

[00:06:13]
Okay, any questions? All right. So again, just to reiterate. We are using Tailwind, the point of using Tailwind is very fast to prototype and you can just go ahead and put all those classes in. If I was using Tailwind in a project, would not have abstract this into a search input, I would have just left those classes like I had them before.

[00:06:50]
I would only abstract this out until it was truly like a reusable thing that I was doing over and over again. The point I'm trying to get at is like if you're using Tailwind, don't just use Tailwind to rewrite CSS, that doesn't make any sense to me. If you're gonna do that just write CSS, right?

[00:07:08]
Use Tailwind like it's supposed to be used, that's what I'm getting at.