Tailwind Tools

[00:00:00]
>> Steve Kinney: There are a bunch of tools out there for at least generating the colors and stuff along those lines. This one I really like and this other design riff I played around for a little bit, it shows you where you can use colors that are not necessarily bound to the same 200, 300, 400, 500 thing.

[00:00:23]
The other thing I will point out is there are useful tools when it comes to just working in larger component systems. So one, it's a very simple tool which is this tailwind-merge, which is, let's say you had a button that had all these classes, but you let them pass in a class name.

[00:00:44]
This will kind of then strategically override the other tailwind classes so they're not stacked and you're not at the mercy of how they render and stuff like that. Could you write it by hand? You totally could. A simple little tool for kind of de duping and figuring out what the source of truth should be based on those.

[00:01:08]
The other one that is kind of cool that you should check out. And again, you don't have to use this one. It's not for everyone, but I will put it on your radar. Also, it's called the Class Variance Authority. And who doesn't like a LOHI reference? And it's basically a way if you have variants like okay, my design system has a button and has a primary, a secondary and a danger one, you can, just show me an easy example.

[00:01:39]
You can write it where it's like you write out all of the variants and then it basically objects matches it and then we'll apply the correct classes. So if you say that hey primary it'll make it a blue with white text and a border transparent. They don't know about outline apparently in this example, so they're using a transparent border to prevent the layout shift.

[00:02:01]
We know better than that at this point. If they put in secondary, it does object matching to apply styles programmatically. The thing that I do like about this library is if you look, this is just a JavaScript object, I could use the same object on a svelte project or a React project or whatever and take it with me.

[00:02:26]
But yeah, there are some.tools. The thing I kind of said a little bit earlier, if you find yourself in a world where I'm doing something tedious and it hurts and I hate everything, then either a there's something built into the framework to make it easier, or there's probably a library for solving it, or there's an opportunity to make your own open source project, but that's probably not the case.

[00:02:53]
Other people probably felt this pain before you and it's either built into Tailwind or there's some tooling. If it's outside of pure CSS, there's probably some JavaScript tooling for it. But I will say about Tailwind, I. I think I said this during one of the breaks when I started the temporal UI four years ago, initial commit or whatever.

[00:03:14]
I don't remember exactly. I just heard some hype about Tailwind. I'm usually somewhat hype resistant and have been using it every day for four years and quickly became one of those tools where when I don't have it, I get itchy. Iinitially now if I have a template, it's in the template, right?

[00:03:32]
Like, I know that I'm going to have to set it up almost immediately every single time. And there's not a lot of tools that I can say that for.
>> Speaker 2: How would you recommend I go about convincing others that are used to older ways like, you know, using grid CSS or whatever to switch to Tailwind?

[00:03:49]
>> Steve Kinney: Well, the nice part is you can vary the story for the progressive iteration is easy. It's not like kind of pulling in. We made references today, like bootstrap, right? You pull in Bootstrap, that's a bunch of global classes, right? At the end of the day, and especially because yes, there is that default theme of colors and spacing, right.

[00:04:11]
You can override all of that, right? As we saw before, you can just go into that theme and take the colors and take all the pieces and it all depends on how big of a team. If it's like if, you know, hey, I work in my little, my team works in this one little neck of the woods in a larger code base, then you can probably just do it there.

[00:04:28]
But there's nothing like saying it has to be all or nothing either. Now granted, yes, a lot of teams. There is. Hesitation just adding new stuff, every random person adding a new library in there, you know, I get it. But I think just showing, I think for some of the trickier things like stacked media queries, where it's okay, @media with greater than or equal to 768 pixels and maybe there's a CSS variable in there.

[00:04:54]
But you're writing that over and over and over again and just lshowing cool, neat, that 60 lines of CSS you wrote could have been four classes, right? Especially when it comes to container queries and all that. It starts to Stack. And I think there's a natural, just emotional resistance, which is unique to every team.

[00:05:17]
But I think on a example of. Let's take a look at what this giant thing you just wrote could have been.
>> Speaker 3: How do you feel about the actual Tailwind UI suite? That's a whole different thing, right, not just the css.
>> Steve Kinney: Yeah, so I think it's like, Tailwind has a single tailwind UI.

[00:05:35]
It's now called Tailwind Plus. I think you pay, like, 200 bucks for it. Yeah, you pay for it and, like, it is effectively like a bunch of exemplars. Right? Which, I mean, if you got some learning development budget, go for it, right, like, I have, I did. And it's nice to, like, see.

[00:05:56]
It's not like, I think they also have, like, some new component library too, or whatever, but it's like you download the file and then you just drag it into your project kind of thing. I think it's nice for seeing a lot of exemplars for how you would lay something out or do something.

[00:06:16]
>> Speaker 3: What about, like, packages, like, material or primeng? Would they play just fine with Tailwind?
>> Steve Kinney: Yeah, and there are, like, you can even do a. I think there is a material theme for Tailwind as well. But yeah, the nice part is, like, under the hood, like, Tailwind has some defaults.

[00:06:32]
It has some default spacing. It has some default colors, right? Because yeah, why not? But like, Tailwind, unlike things, like, again, you know, I keep picking on Bootstrap because, you know, it's. That's fun. It's only at the end of the day, just becoming a regular style sheet, just like anything else, right?

[00:06:51]
Yeah. You might have to tweak the default theme to match your theme. I had to explain this to designers at Temporal, where it's like, well, I don't wanna use those colors. I'm like, cool, just tell me what color palette you wanna use, right, and we can swap it out.

[00:07:03]
But to your question before, there is still, a lot of times, emotional resistance. Because I don't wanna be locked in, same way as I got when Dustin just asked me about shad seeing, is that how you say it? I was just like, I don't know if I want to be locked into all their decisions, right.

[00:07:20]
With Tailwind, you can change out the, I throw away all those colors immediately, right? And I choose instead of, like, blue and red because I'm, you know, high strung. Right. I have error warning, success information that happened to map to those colors, right, and stuff like that that I kind of use semantically.

[00:07:44]
But you just set those colors as CSS variables and then you have them, right. And so, yeah, you're not locked into anything. So you can fit almost in, because at the end of the day, it is just an efficient way to make, and if there's reason why I don't want to.

[00:07:59]
Can you handcraft a better CSS style sheet on your own?
>> Speaker 3: So my organization has a very strict theme. You have to have our blue. You have to use this gray for sidebar. You have to use this, you know, theme color or whatever. Very strict, very rigid. So we should be able to set that.

[00:08:21]
>> Steve Kinney: Yeah, I mean, effectively, like kind of saw this a little bit before. Or we can do something like, this is just in that initial where I have the, I can do @theme and I can do, I don't know what color that is, let's see. I don't have that.

[00:08:41]
But yeah, you can take the brand color and you do like, color secondary. Sure, whatever. And what's cool about this is why those are different. Makes me think I typed something wrong at some point. But we'll deal with that in a moment. What's cool is that hypothetically, I don't know if I have to do a refresh, but you should be able to do bg.

[00:09:06]
Yeah, brand. And now that's just a color like any other going to that CSS variable. And if you already have that CSS variable throughout your code base, you can literally, let's say somewhere else in the code base. Where's that? Call it index CSS. Somewhere else in the code base there is like, it's probably in root, Right?

[00:09:47]
Let's be adults about this, right? Somewhere in your code base that exists, right, floating around. You can literally, Right, and now your tailwind utility class is mapped to that existing brand color CSS variable that exists somewhere else in there. So you can adapt and hook in to your existing style sheet.

[00:10:13]
You don't have to be like, and today I'm going to sell it to the product managers. Everything will look the same, but better. Good luck, right. So I think in an existing code base, but the fact that you can set this up and even map to your existing CSS variables and have again, for some of the other engineers in your team also, the intellisense isn't hurting anyone.

[00:10:37]
And some of those ergonomics and the sorting and stuff like that, some of the tooling around it is another thing where I'm just like, but then I would lose that, and I'd have to remember everything. And I'm not gonna write, and we all know that I can write my own VS code plugin.

[00:10:52]
I know that I can. I know that I'm not going to. I know that I'm actually supposed to do my real job sometimes. If my job is writing a VS code plugin like it was at my last job, great. But right now it's not. So I think some of the tooling and the ergonomics around that, I think is also incredibly compelling.