Wrapping Up

[00:00:00]
>> Speaker 1: This is Tailwind four, right?
>> Steve Kinney: Yes.
>> Speaker 1: And so we're going to build all this stuff up and it basically ends up building a static site and then Tailwind five comes along. I know it doesn't exist per se, but what's the impact?
>> Steve Kinney: I can't tell you the 4 to 5 transition, I can tell you having lived through the 3 to 4 transition, not that hard.

[00:00:22]
All the classes stayed the same, the big changes were because they were using post CSS for whatever, the configuration, all the variables and settings. That was a JavaScript file originally and the new system is a CSS configuration file and there was some tooling to migrate you over. I think I actually have the list on the site that I compiled, so there's the new features, more stuff, that's great.

[00:00:59]
The configuration, there's like the default placeholder color changed, do you know what I mean? I think the default border color might have changed like from like one gray to a more different gray or something like that. But if you had any of those, like now defaults to current color, which is whatever the text color is instead of gray.

[00:01:31]
And there was a tool, if you're interpolating CSS variables, it's parentheses instead of brackets. I will say that it was such a not thing that it didn't hurt, so I'm not super worried about that, and like, this isn't forcing you to upgrade either. If you want the new CSS features, great, I mean, it doesn't force you to update anything, But I will say that insofar that, it wasn't like a major.

[00:01:58]
Even though this was a major rethinking going from having it mostly done in JavaScript through a post CSS plugin to everything is CSS all the way down, not that big. I think I might even start on Tailwind 2 if I'm not, I think I don't remember what the version was four years ago, I'm not pulling out the release notes in front of you.

[00:02:19]
So I think I have now been through two major version bumps and if you notice, my answer includes almost no war stories at this point. I think I went from 2 to 3 and 3 to 4, even in the large app that we work on. I think it was like two days on the large app and it took 20 minutes on my own site and like for our older projects, like conference websites, I just didn't update them.

[00:02:52]
>> Speaker 1: Just let them be.
>> Steve Kinney: But even when I did, not that bad.
>> Speaker 3: Do you have any resources for how developers can choose the right colors in UI design when they don't have access to a UI or UX design?
>> Steve Kinney: This is my favorite, this is one I use all the time and like in the Figma course, I show you that there's actually a Figma plugin so that like designers can have the same ones.

[00:03:20]
But check this out, you pick a color, you can pick your happy favorite color. I just picked different shades of blue and it will go ahead, you can actually even do some edits to this as well as like what you want. Let's say you don't want this many colors stresses you out, you can just make it fewer or whatever, where'd that go?

[00:03:47]
I'm just changing the saturation that went. Anyway, you can go ahead and you can create the entire color palette, hit export and get literally the thing you can copy and paste out of this and be able to go ahead and use. So I like that a lot, there's also things that I'm not even sure how good they are, I've just used them forever.

[00:04:09]
Is it Color Scheme Designer?, is that what it's called? I'm also not a designer, so don't trust me, this is why I let Candice do this work, Candace is good at it. We can kind of go and create color scheme systems and then, I'm not gonna lie to you, I picked the color I like and I asked ChatGPT to give me the rest of it.

[00:04:33]
Now tell me what the complimentary success, warning, error, whatever color is, hire a real designer, to be clear, but if you don't have a real designer, that's probably good enough.
>> Speaker 3: I'll add to that our design to Code Learning path is a good resource, specifically Sarah Drasner's design for developers.

[00:04:54]
>> Steve Kinney: Go take that.
>> Speaker 3: One more question came in.
>> Steve Kinney: Love it.
>> Speaker 3: How would you set up Tailwind in a mono repo? Would you set up separate packages for Tailwind with Storybook to develop the completed components and styles and import them for the other packages or apps?

[00:05:21]
>> Steve Kinney: Can you repeat the question?
>> Speaker 3: I guess the general question is how would you set up Tailwind in a mono repo?
>> Steve Kinney: You got a few options, you can do the whole rigmarole where you like, package it up, so on and so forth, the other option is where is it?

[00:05:40]
>> Speaker 3: I think they're specifically kind of interested in like the reuse of it across.
>> Steve Kinney: Like it's a CSS file, and so you mono repo it and do like the NPM packages thing and that will all work. The other option is like, you can legit reference it, you know what I mean?, And pull it in.

[00:06:05]
I would arguably, if you want everything to have the same style and listen to the same CSS variables, having one file, that's the source of truth makes sense. Now if you do need different versions in different packages, but I think where CSS in particular, if one has PNPM or TurboRepo set up make it its own package.

[00:06:30]
But if it is simply like there's just a different directory structure kind of monorepo, you can just reference the CSS file, and that is usually what I. We have always done, we have this or at temporal we had this thing where our SaaS, cloud product and open source repo were two different repos.

[00:06:53]
So it was a GitHub action syncing them up, some of that all depends, but at the end of the day, it's one CSS file. You can either reference it, you can package it up, it doesn't really matter, it's effectively all the configuration is typically a single CSS file.

[00:07:15]
>> Speaker 1: Just to piggyback on that, isn't there a compiling function? So project A could use this set of classes and project B would use these set of classes, you'd have to have the superset in the CSS if you're going to have one.
>> Steve Kinney: What spits out of the build processes would all be different, but the configuration of the variables, you probably want to share that across all of them, that's a single CSS file.

[00:07:37]
That is just the configuration of Tailwind and all your CSS variables and that brand color as Steve was talking about, maybe if there's some other spacing, some other different settings effectively.
>> Speaker 1: That is usually one not particularly long CSS file, where you might have all the brand colors, everything and that can live in a shared directory in a mono repo, it can be synced across.

[00:07:58]
>> Steve Kinney: Honestly, depending on how often it changes, I'm gonna be like between Temporal's marketing website and the UI, do you know how they get synced up?, copy paste. Works for our cloud product and our open source product is actually a GitHub action syncing it all up. But it changes so infrequently that no one thought to do that especially no one really needed to do it.

[00:08:33]
I think it depends, but at the end of the day, it's really the only thing that is gonna be unique outside of the actual utility classes that you're using in your code. Which is your normal monorepo problems that you already solve in your code is a single configuration file.

[00:08:48]
That could even be like curl it down from a source of truth on every package it installed. You know what I mean?, it is uniquely simple, well, thank you so much.