Tailwind Q&A

[00:00:00]
>> You seem to not need SAS with tailwind but I like that SAS as features like each for make sense maps if else in color functions does tailwind have similar features they accomplish this in a different way. Or do I still need to use SAS with Tailwind to get them?

[00:00:22]
>> It all depends, right? And so Tailwind effectively has roughly what CSS has, which is a closing gap at a certain point. So in terms of a certain amount of color filters, yeah, you have those, right? Each, no, because to my knowledge, not in the CSX spec these days.

[00:00:42]
So, you don't have each, but then it all depends, too, if you've got components as well. But the thing is, so yes-ish, no-ish, right? And then the nuance there is. Post CSS does have all those things, right, and since you are using post CSS under the hood, if there are particular things that you want, I'll show you the posts yes plug in.

[00:01:11]
The like range of like both. You can do the nested syntax, both the SAS version, as well as the like, spec of nested CSS selectors that is currently being, going through the process, you can pull in a whole bunch of either future syntax, and even fictitious syntax. I think a certain amount of like, each is and stuff along those lines.

[00:01:40]
And so these are the set of post CSS plugins. So because you are using post CSS under the hood in most cases and using tailwind. If there is a particular feature that you're like, I need that feature, the chances of that existing somewhere in this long, long, long list of post CSS plugins is probably fairly high at this point.

[00:02:04]
So like I think it depends. Out of the box, it's not gonna do everything that a custom language that's not CSS is gonna do, but then you can also extend CSS. And if you are using any kind of JavaScript setup, then you might also be able to do it there as well.

[00:02:22]
Yes-ish is the answer to that question. Maybe it depends. In that case as well.
>> In tailwind, we don't use features like the cascade. Do you think that's a good trade off?
>> Can you repeat the question?
>> Like CSS features like the cascade?
>> Directly you can use the cascade, right?

[00:02:47]
If I put a text color, like up on this top one, it will cascade down, right? It's like under the hood. I tell when it's just applying CSS classes, right. So you will get if I said text read. 300 here, why do I keep picking 300? That's a ridiculous color to pick.

[00:03:10]
Let's go with 500, right? You will see I put that on this top level div. Now the h1 has a purple, so set overrides it, but the paragraph did turn red. Like CSS still applies. This is basically a utility knife for making C, writing that CSS easier with a bunch of classes that kind of like are, you can snap together to what you need.

[00:03:29]
But it is effectively CSS at the end of the day that's where we can like hover over and see the actual selector. Yes, there are some like CSS variables in there so on and so forth but like at the end of the day it is, it's all CSS so it all applies.

[00:03:47]
>> Could you review when to use the utility layer versus the component layer?
>> Yeah, so component layers are for those reusable pieces. Like if I wanted a button class and I had maybe the button primary, button dangerous, utilities are like, I want to. Add a little bit more margin to this one, or I want to be able to do something a kind of a one-off that you maybe don't wanna.

[00:04:07]
You think about the idea of a card or a button, things components that the useful tool is things that you would put in your component library, the nouns, if you will, right? But then if you had one of those buttons, I need to make this one a little bit bigger, some set of things where I need to make it both, a little wider and a little larger or something like that, those would go in the utilities.

[00:04:32]
Those are the things you would use one-off that are not what it means to be a button, right? And again, it's mostly around those layers in CSS. So like the one-offs come later in the layer stack, which means they have higher priority over the components, right? And they can have the same specificity.

[00:04:50]
All right, but yeah, I'll just be reading random classes. If you ever find yourself like trying to come up with a more specific selector just to get what you want done. You don't have to do that because you've got the layers, anything and utilities comes after the components layer, which means it will have precedence over anything, even if it has the same specificity.

[00:05:07]
So it's mostly like base styles. that's the lowest layer, right, your components might be stuff that builds on top of a div, on top of a button, so on and so forth. Those should have preference over those base styles, and they would have anyway because classes have a higher specificity than just a button or whatever.

[00:05:24]
And then those one off things like, I need to make this wider, or I need to make this, in some way, should have higher specificity over what it means to be a button. So base will always be at the bottom of the of the list, or your utility will be at the top of the list, I'll always override, they're the one-offs, you're pulling them out.

[00:05:41]
And that way you're not using stuff like important and you're not trying to come up with ridiculous selectors that happen to be more specific. And adding like two classes that you chain together and stuff like that, you will be more intention about what the of your selection are rather than trying to trick CSS into doing what you want.