Scaling Tailwind & Adding Components

[00:00:00]
>> Brian Holt: Everything we've done up until now is under 01 Shad Cen. So that's kind of the state of the repo right now. Though, that being said, we're about to move on to just like I'm going to do the rest of the UI for you so that we can kind of just focus on the more backend kind of components of building with the, building a full stack Next app. I just wanted to like, because I didn't want to spend a bunch of, this is NOT a Tailwind course.

[00:00:27]
Obviously take Steve's course if you're a glutton for punishment. But I did want to call out some of the things that I like, what I have found working with Tailwind. One of them is to take advantage of Tailwind's theming, and this kind of goes along with the reasons of why I like Tailwind. If you use like their theming, like here, like their functions here. So if you create like a new color mint, it'll do a bunch of stuff like create like background mint, text mint, border mint, right, like, and it'll go through and actually define that in all the various different places where you could use mint, and all I have to do is define one of like, here's the color that I care about, right?

[00:01:08]
And then you get all those utility classes kind of generated for you. This works for font, this works for spacing, this works for breakpoints, and hopefully you're looking at it like, oh, that's really convenient and cool, and like this is like sneaking design tokens into you. And like a bunch of people don't even really like recognize or even know what design tokens are, but like it's a really good pattern of like, this is the color green that I want to be able to use it.

[00:01:37]
Here is the uniform spacing that I want to use, that concept is design tokens right at its heart. But they make you use this like good pattern of writing code by sneaking in very useful things. I love it. Like that's like great developer experience in my opinion, by like the making the happy path also like the right path. So, yeah, in essence, I'm asking you to create and stick to design tokens. That's what I'm asking you by using all of their theming capabilities.

[00:02:09]
There is, yeah, here in the Tailwind docs, they go into it pretty in depth here, so like, it's actually a much better treated, so I just kind of summarized some of that and then put it in here. Next thing is Tailwind has the ability to make variants, so you can say like I want a primary button, a secondary button, rather than having like individual components for each one of those that like import from the other ones.

[00:02:35]
This variant directive is very helpful to use as well. With managing variants, there's a library here that I'll go fix the link later called CVA, which is short for class variance authority, which I don't think references Loki, the TV show, but I can't help but like think that it does every time I see it. I just, because I just watched it fairly recently. But you basically say like, this is the kind of buttons that I want to be able to have, and so like, it always comes with these ones and then like the variants of like primary comes with this, secondary comes with this.

[00:03:10]
And then you can say like now I have two different kinds of buttons or two different axes where I can modify this button, right? I can say, it's a primary button, but large, or it can be a secondary button, but small or large, right, and you can kind of modify it across all these different axes, right? And CVA makes it very easy to do. So, yeah, please, that's NOT built into Tailwind itself, but it's like a library that lots of people use with it.

[00:03:36]
You should already have it in your repos because it comes with Shad CN, Shad CN uses it all over the place. So, yeah, just highly recommend, you should definitely use that. It helps tame tailwind in a way that's quite nice. And I'll say that we're the code we're about to use does use apply somewhat, but I'm just going to throw out there is I think apply is an anti-pattern. Apply is basically like I'm going to go into my CSS and make a CSS file, but I'm going to write Tailwind classes in my CSS.

[00:04:09]
And it feels right because like, oh, well, I'm still using Tailwind, now it's just in a CSS file. I was like, no, you just created a new way of doing CSS, right? Like if you're going to do Tailwind, do Tailwind and like try and stay out of CSS as much as possible, because you're kind of like losing a lot of the benefits by having both, because now you have to worry about things across multiple axes and that like, the more cognitive burden that you put on this, like the less benefits you're going to get out of it, because don't get me wrong, Tailwind is a pain in the butt.

[00:04:37]
Like we just saw, like debugging that problem for me was kind of a pain in the butt. I probably would have gone faster if it had been CSS, but like, it makes the maintenance of like this large codebase much more doable. If you start stripping away benefits, which I think apply does from Tailwind, it starts becoming not only like, not a net positive, but I think it becomes a net negative at some point, so I would treat it kind of like important.

[00:05:09]
I'm NOT saying that never use important. But I'm almost saying never use important, right? And it's kind of the same thing with apply, like there might be some places for you to use apply, but generally speaking, it's rare. We are going to hop into complete UI now. So I just went through and I finished like, if you look at the source here, there's more types, there's components, I put some routes on here, I put like the not found page.

[00:05:35]
This is all stuff that I like either I cover in intermediate React or Scott covers in Next Fundamentals. No reason for us to spend the rest of the day writing a bunch of UI, right? Yeah, you can see here's so many biome fixes that I spent, I was up till like 1:30 last night fixing biome errors. So none of us are immune from it. A lot of this again, it's very similar to what we were just on, like this is, we wrote this one.

[00:06:07]
Components, did I add anymore in here? I don't think so. Same biome source. There's some types in here. Actually, I don't think we even need the types anymore. I think that was for the API that I took out. Yeah, so we probably don't even need that. Utils that came from Shad CN components. Yeah, so I have the nav here. But I put in labels, inputs, badges that all came from Shad CN. I made an article viewer and an article editor.

[00:06:44]
The article editor uses React MD editor. So I didn't really, it's just a React component you drop in there and you get this like really nice markdown editor. The Lucide React, which is again another UI or like SVG library for nice components here. I don't think anything else in here should be that interesting. Let's just make sure that we run npm run lint. Yeah, make sure you run it, mine's already installed, but make sure you install all of your dependencies and npm run format.

[00:07:46]
Npm run format rather. Okay, npm run type check. Okay, well, everything's passing. I want to make sure that you're all in a good state. And let's go ahead and run it. Npm run dev. So, this should look relatively the same, right? But the difference is here. We have these different pages. And we can click slash wiki one, I think, right, yeah, and this will open the wiki page. So this is viewing a wiki page.

[00:08:22]
We can click edit article. This will send us to the article editor. Nothing here should be like, oh, how do you do that, right? This should all be kind of in line with what we've been looking at already. This is the markdown editor, which I think is really cool, like you can like have it do side by side. This is all happening in the UI, no backend component here, or you can just say like, show me what the rendered markdown looks like.

[00:08:46]
I think it does even the like full screen and stuff like that. I didn't write any of that. That just comes with the component. I was really impressed by it. Yeah, and you can like sample this and say it's bold, and then look back at this and now it's bolded here. It's pretty cool. Okay, there should be a signup page, it's going to just say 404 because we didn't, we're about to write that with the Neon Auth.