At the beginning of the last episode, I noted that we would create this card using a traditional naming convention. So, in this case, you can see we created a card component, and now each of the child elements or tags that we needed to style would be extensions of that component name. So card, then card-left, or card-title, or card-excerpt. This is perfectly fine. In your projects, maybe if you're using Sass, you could even extract all of this to a partial named card, and then you would import that. That way, if you ever need to tweak your card styling, you would go to that one file. And it's about as clean and tidy an approach as you can take using that convention.

That way, if you ever need to tweak your card styling, you would go to that one file. And it's about as clean and tidy an approach as you can take using that convention. Another option is to use utilities for everything, as much as you possibly can. The only downside to that is you have to create a bunch of utility classes, or you can use dedicated frameworks. One that I really love is called Tailwind. Let's take a look at how to use this. Now you'll notice you can reference it on a CDN or install it through NPM. So if you use something like Laravel Mix, very, very easy. In fact, if you go to your webpack.mix.js file, there's even a plugin you can pull in.

So if you use something like Laravel Mix, very, very easy. In fact, if you go to your webpack.mix file, there's even a plugin you can pull in. So you can call .tailwind, and you're all set to go. But we don't want to touch Webpack or Mix in this series. So we lose a little bit of the benefit, but we'll pull it in through a CDN to keep it simple. So let's come back to the top. We can get rid of normalize.css, since Tailwind offers that out of the box. And we'll paste that in. So if we come back and give this a refresh, yeah, a few things have changed.

How about 0.5 ems? And let's make sure we have some breathing room on the card left to compensate. Maybe for card left, padding-left of 30 pixels, and then padding-right of 30 as well. Come back, give that a refresh, and that's fine. We're not too worried about it. With Tailwind, you'll notice we take a utility approach. For example, if I want to set a text color, well, rather than using a component name, you'll just apply a class of text-gray. Let's see what we have for flexbox, or flex-direction. All right, if we want flex-direction column, we use a class name of flex-col.

So let's go to card, and now I'm going to manually apply flex and remove it. So right up here, if I give it a refresh, we get no change. Let's go to card left. You'll see we have display: flex there as well. All right, now it's broken. We'll bring it back. So notice we're using utilities to build up our components, and a key thing to understand is you may ultimately decide to extract a dedicated component, and you can still do that with Tailwind, but the key is you begin with utilities rather than beginning by thinking of a name for your component.

that with Tailwind, but the key is you begin with utilities rather than beginning by thinking of a name for your component. All right, so now we're back to where we were before. All right, let's just go through this piece by piece. So cardRight is display flex with a flex-direction of column. So if we get rid of that, it's all messed up. We'll fix that. Flex and flex-col. Refresh and we're back to what we had before. What about cardLeft?

Now it will take a little bit of time to learn the class names. It's mostly going to be a visit to Tailwind. You search for what you need, maybe margin. Here we go, and you can see how to use it, but from personal experience, you learn it amazingly fast. It's not an issue at all. Next, let's talk about the text. So if we go to card right, right here, we have a color of #888. Now I almost think of these as magic color values, and that's because, well, somewhere else in your site, will you remember to use that shade of gray?

All right, it's out of alignment, so we'll now say for each of these, flex, and we want to align the items to the center. So if you look that up, the class name is items-center, and now we're back to where we were. So you'll notice each time we switch to the utility version of the classes, we can delete more text. Let's do this one as well. The very first div within the card-meta has some margin-right, to give it a little bit of breathing room here. All right, well now I can delete that entirely, and we'll just apply it.

So it takes a lot of effort to challenge some of your initial thinking, but I hope if you do, if you give it a chance, you might come around, and if not, you can go back to what you had before. Anyhow, let's continue on. Are there any more flex references? Okay, on the body, we are vertically centering it. So let's remove that entirely. It's now at the top left, and we'll apply it manually. We're just going to keep going, flex, item-center, justify-center. Again, if you're thinking, well, how do I know these classes?

That looks good. All right, just a little bit more. So the card title, once again, that's almost black. So let's say right here, text-gray-darkest. The font-size is a little bit larger. And the font-weight. Okay, let's try both of those. All right. We'll fix the weight by saying font-light. There we go.

It was done already. Margin bottom of .5ms. All right, let's get rid of that to give some breathing room here. All right. Card title, margin bottom. And we'll try how about 4 and maybe 3. We'll get what we need there. What else? Right down here. Excerpt flex of 1.

Right down here. Excerpt flex of 1. This is provided out of the box. So it's a flex-1 class. There we go. All right. We'll keep going. CardMeta. I'm going to go a little faster. We want to decrease that height.

So that adds a line. Now again, if this kind of button is something you will use all over your website, then that's a good use case for creating a Button component. So it's not all or none. You'll reach for components when you're dealing with things that are constructed and referenced everywhere on your site. For other things, it's just not necessary. Okay. So we'll come back to our button here and I can say no underline to remove that. All right.