Tailwind CSS Anti-Patterns

[00:00:00]
>> Steve Kinney: So some anti-patterns and some patterns. Making one off classes in this case, right? Feels like, well, I need this class. I need one for my button, whatever. I mean this class, if you just go my button now it'll work. If you try to do hover:my-button, it won't, cuz you didn't give it the right hooks for it to figure that out, right?

[00:00:27]
Instead, @utlity my-button, now Tailwind knows, okay, when I see hover colon or md colon, it just gives it the wiring to know how to do all of that, right? Another one is you can at any given point opt out of all of the theming stuff and use arbitrary values, right?

[00:00:51]
And this will all work. Good luck refactoring that code later, right? It's kinda using arbitrary values anywhere, right? The more you kind of go rogue on certain places, the sadder you will be. But at any given point, if you're like, I need this one off one time thing, you can use this bracket syntax and it will totally work.

[00:01:13]
You will just be sad on a long enough timeline and then you'll be like, I hate Tailwind. You don't hate Tailwind. You got to look inward at that point instead, just set some theme variables and again, if you're only using it once, sure, use the arbitrary value. But if you just nested the same color a thousand places in your code base, again, the worst crimes I have ever committed on my own code base is getting a little egregious thinking I know regex better than I do when I find and replace, right?

[00:01:44]
And so we can just add additional utilities and these will be supported everywhere. You will be happier over the long term. So yeah, just the high level things. And again, we will see these in practice. They are just kind of to put some mile markers in your brain as we go along.

[00:02:02]
When in doubt, probably have most of our styling happening in HTML, the air quotes because that HTML might be jsx, that HTML might be a svelte file, that HTML might be angular markup. How about that? Other than tweaking our theme will probably not spend too much time in CSS land.

[00:02:26]
You're like aw, or you're like, yes, both of those are very good reactions. We'll look at tweaking the theme as we need to and occasionally if we need to make on either side of that colon, you can make custom utility if you need to make a new kind of what you would think of as a class.

[00:02:45]
But if you also wanna have that MD colon makes a media query and puts the class inside of it. That's what we call a variant, you can make those as well as we go through. And with that, let's go get set up.