Create a Responsive Card Component by Composing Tailwind's Utility Classes
In this lesson, we use utility class composition to put together a responsive card component. With this approach, we don't write any additional CSS. We never stop to come up with class names. Our workflow is very productive and free of constant context switching.
Instructor: [00:00] Let's create a card component using Tailwind. We have a div to wrap the whole thing. We then have an image. We'll have another div to wrap the card content, which will have an h2, "Hello, Tailwind," as well as a paragraph with some lorem ipsum.
[00:17] Finally, we'll have a button that says, "Click Me." We can see the mock-up in our page now. At this point, it's completely unstyled. In a traditional styling approach, you'd give your element some classes, card here, and card image for the image. Then, you'd write some CSS to style these elements.
[00:37] While you can absolutely write some custom CSS when working with Tailwind, most of the time, you'll be using utility-class composition to build your UI. I'll start by giving our birdy tag a few classes, some margin, all-around level four, font sense, and letting normal, which is a line height of 1.5.
[00:59] Let's now style our content block. We'll give the wrapper some padding level four. Our h2 can be a bit bolder, font black, and some margin bottom mb four. Let's try mb three. Let's make our paragraph a bit smaller, text that small, and tone down the color a bit with text-gray. Maybe a bit less, text-graydark.
[01:24] Yep, good. Let's also give it some margin bottom level four. Our button will have a purple background, white text, level three of padding vertical, level six of padding horizontal, and a bold font. Let's try that. Hey, not too bad!
[01:45] Let's add some rounded corners. We could have small, large, but let's go with rounded full here. We should also have some styling on hover. We'll go hover, column, bg-purple-light. Nice. Finally, let's add some margin top and bottom to position this button perfectly.
[02:07] Let's work on the main component wrapper now. We want to add some shadow to make it stand out nicely. It'll look more polished with small, rounded corners, too. You can see that the image on top still has sharp corners.
[02:21] We could apply rounded corners to the image, but there's a better way. We can give the wrapper an overflow hidden class, which will hide the portion of the image that we don't want. It's looking pretty good, but see how the image grows as the viewport gets wider?
[02:35] It would be nice to keep the image to a fixed height and crop it. I'll [inaudible] this out, and let's create a div here. It will have a style attribute with our image as a background image property. We'll also give it some classes, bg-cover, bg-center. Our image is gone now, since our div has a height of zero.
[02:55] Let's give it an h48 class and a width of auto. Here it is. Now, the image height is always the same, and the cropping adjusts to cover the entire surface. At the small breakpoint and up, we'll set the display of our wrapper to flex. We now have the same problem than before, but with a width of zero.
[03:15] We need to define the width in our media query and let the height be auto. Let's give it a width of 64. Just like that, we have a nice looking card on wider screens. It still gets a bit weird beyond a certain width, so we could apply a max width to our wrapper. Let's use max-w-medium, so our card stops expanding after a certain width. That's it, we're done.