Structure a Basic Card in Tailwind

Design Text in a Tailwind Card to Emphasize Important Content

Style SVG Icons with Tailwind Utility Classes 

Use Tailwind to Design a span that Looks like a Badge

Crop and Position Images with Tailwind object-fit Utilities

Lock an Image to a Fixed Aspect Ratio with Percentage-based Padding in Tailwind

Create Depth in a Tailwind Component with Shadows and Layers

Design and Implement Common Tailwind Components

The content in our card is currently pretty bland with the browser defaults. In this lesson we'll work through how to apply style to the text content to make it catch the eye.

We'll start by adjusting the browser default color as well as the antialiasing (which will make our cards look better on high res displays). Then we'll work through the text content to highlight the important parts, with bold, dark text and de-emphasizing the less important content by making it lighter and smaller.

Adam Wathan: [0:00] Now that we've got this basic card structure in place, let's work on making the text content over here feel a little bit more designed. I'm going to start by setting up some reasonable defaults.

[0:10] Right now, we're just seeing the browser default styles here, which is just some black text. When I want to add typography defaults to my projects, the way I do it is by adding classes to the root element for the project.

[0:22] In a Vue CLI app, the place that I would do that is just at the very top-level div in my app component. In a plain old HTML project, you might be adding this to the body tag or the HTML tag and your root HTML file.

[0:34] Let's add a class attribute here and talk through a couple of reasonable defaults. The first one that I like to add is antialiased. What this does is it tells the browser to use regular antialiasing instead of sub-pixel antialiasing.

[0:47] The details of this are a little bit beyond the scope of this lesson. Suffice to say that regular antialiasing looks a lot crisper on modern high DPI displays like retina displays than sub-pixel antialiasing looks.

[0:59] The next thing I like to do is choose a reasonable default text color. Right now, it's black. I like to use a dark gray instead. I find it a little bit softer and a little less jarring on the eyes. I usually go with something like text-gray-900, which is almost black but a little bit lighter, so it feels a little bit more natural.

[1:18] This is enough to get us started. Why don't we head back over to the card and start working on these individual pieces of text?

[1:23] The first thing I want to look at is the title. Right now, the title is just blending in with all the other content. It's probably a good idea for this title to stand out and really feel like the primary piece of content in this card.

[1:36] There's a couple ways that we can do that. The first one is to play with the font weight. Right now, we're just using a regular 400 font weight for all of this text. Why don't we try making the title a little bit bolder?

[1:48] The way I usually do this is playing around with the classes that Tailwind exposes and seeing which one I like. I might start with something like font bold, and think maybe that's a little bit bolder than I want. Maybe I'll try a font-semibold. Yeah, that kind of makes it pop a little bit, but doesn't feel like super, super thick.

[2:04] Next, maybe I'll play with the font size. Right now, we're just using the regular font size, which is 16 pixels by default. We could try text-lg to see if that feels good. Yeah, that feels pretty good.

[2:14] A lot of time, I like to try the next step up as well, just to make sure that the one before was a good value. In this case, I think text-xl is maybe a little bit too big. That makes me feel confident about going with text-lg.

[2:26] The other element that we could play with to make this title stand out is the color. Right now, we already have it set to text-gray-900, which is the darkest color that I'm willing to go with. If we make it any lighter, that's actually going to sort of deemphasize it, not actually emphasize it.

[2:41] If we want to really keep working on making this title pop, we actually need to focus on deemphasizing some of the surrounding content.

[2:48] Why don't we start with maybe these "3 beds 2 baths" text? Why don't we try changing the color of this to deemphasize a little bit?

[2:55] We'll add a class here and maybe we'll try something like, text-gray-800. That's very subtle. Maybe something like, text-gray-500. I think that's a little bit too light kind of hard to read.

[3:06] What about text-gray-600? That is a lot easier to read, but still clearly deemphasized compared to the title.

[3:13] Another thing that we can play with here is the font size of this text. We can maybe bring it down to something like, text-sm and that deemphasizes it a little bit more or we can even go so far as to bring down to something like text-xs.

[3:25] I think on its own, this is maybe a little bit too small. I want to show you a trick that I like to use with really small text to make it a little bit more legible and also make the design feel a little bit more interesting as well.

[3:38] A treatment that is pretty common that I really like is to go with really small but uppercase text and actually make it a little bit bolder as well. We can go with something like maybe font-semibold here as well. That looks pretty good.

[3:51] The thing about uppercase text though, sometimes it can be hard to read because the letters feel cramped together. What you see people do really frequently is actually add a little bit of letter spacing when you use upper case text to make it a little bit easier to discern the different characters.

[4:05] In Tailwind, we can do that using something like tracking-wide. That will make it a little bit wider. That goes all the way up to tracking-widest which is a really wide letter spacing. We can actually make this tight too if we wanted.

[4:17] We can go tracking-tight or tracking-tighter. This isn't what we want to do with uppercase text where it just shows how that skills works. I think something like tracking-wide which is just a little bit of letter spacing will look pretty good.

[4:30] Now, what about this pricing section below here? How can we style this to look a little bit better?

[4:36] Right now, it just looks pretty vanilla. It's just all the same color, all the same size. What can we do to make this a little bit more exciting?

[4:44] One thing that we can do is look for opportunities to deemphasize things that aren't that important. I think the price probably is important. People do want to see that. This per week stuff, that's important as well, but I think we could play without a little bit to make this look a little bit more interesting without losing the meaning.

[5:01] Why don't we try deemphasizing this a little bit to emphasize the price a little bit more and see how that impacts the overall look? What I'm going to do is I'm going to pull this down to a new line and wrap it in the spin so we can target it.

[5:14] Why don't we try making it a little bit lighter? Maybe we'll try that same text-gray-600 that we used for the bathroom text. That looks pretty good. Maybe we'll make it a little bit smaller even too so we can go text-sm. I think that looks nice.

[5:28] One thing I don't really love about what we have here is things feel a little bit unbalanced. We have this like big title then some small text and some normal text again. It gives us a weird feeling, a little bit of a weird flow.

[5:43] Something that I see people do a lot that I think actually looks really cool is to move some of this content actually above the title to balance things out a little bit. People often refer to this as like an eyebrow text treatment. I'll show what it looks like.

[5:57] If we grab this stuff, we can move it above the title. Something about this just looks so much nicer and cleaner to my eyes and makes this thing feel a lot more balanced. I like how the emphasized text is in the middle and it's a little more symmetrical on both sides. Something about it just looks really professional to me.

[6:14] What about this rating stuff at the bottom? It's looking a little bit cramped next to all this stuff, a little bit big maybe. Why don't we play with this? Try maybe separate it out from this information to make it feel like an independent thing.

[6:27] Try and style it so it draws attention to maybe rating a little bit. Just try and make it look good.

[6:33] The first thing I'm going to do is add a little bit of space above this text so it's not budded right up against all this information so we have a little bit of breathing room.

[6:41] Why don't we add a class here? Maybe we'll do to something like a mt-2 see what that looks like. It helps a little bit. I think we can maybe go even more aggressive maybe like mt-4. Try mt-6. That's too much. I think maybe something like mt-4 is probably good.

[6:57] Now, why don't we try giving this information, this text in parentheses, the same treatment that we gave to "per week" here to de-emphasize this since it's not really that important? I'm going to pull this down, I'm going to wrap this in a span and we'll do, class="text-gray-600 text-sm" so to keep that consistent. Let's see what that looks like.

[7:18] That's already looking a little bit better to me. Now, what about this "4/5 stars" thing?

[7:24] Right now, it's just has the same treatment as the price which it's not bad. I think we can maybe play with it to make it even more exciting, especially since it's important information. It get people to know, "Yeah, this is a good property."

[7:37] One thing that we haven't tried at all with this text is introducing any real color. We've just been playing with gray. Why don't we try giving this like some accent color to make it stand out a little bit more?

[7:49] I'm going to wrap this in a span too so that we have the ability to target it. Why don't we try like a teal?

[7:55] Maybe we'll do like text-teal-500. It's a little bit hard to read, a little bit light maybe. Maybe we'll try like text-teal-600? That's a little bit easier to read.

[8:06] I actually think maybe even increasing the font weight might help a little bit here too, make it pop a little bit more.

[8:13] Again, maybe we'll try like font-bold to start. That's a little bit too aggressive. Maybe font-semibold like we've been using. I think that looks pretty good.

[8:22] The last thing that I think is worth addressing here, a common thing people forget to do when they are building components like this and designing them, is accounting for awkward sample data.

[8:34] Right now, if we check out what we have here, we just have this "Modern home in city center." It's like short text so it doesn't wrap.

[8:41] If we have a longer string here something like this, "Modern executive home in the heart of historic Los Angeles," all of a sudden, this text wraps and we sort of have to think about, "Well, how do we want to handle this?"

[8:53] One thing that sticks out to me once I see this text wrapping is that all of a sudden, we have equal space between the text here and the text here which makes it not quite as obvious that this text is connected and this text is separate.

[9:07] I always think it's a good idea from a design perspective to make sure that the line height between your text is always smaller than the margins between the surrounding elements, so the wrapped text still feels nice and connected and doesn't just feel like three lines of wrapping text.

[9:25] We want this to feel cohesive and this to feel separate. A couple of different ways we can approach this. One, is to just add a little bit of extra margin above this maybe to make it a little bit more disconnected.

[9:37] Why don't we try that and see how that looks? We just add a class to this section.

[9:42] I like to use top margins more often than bottom margins because something about the fact that when you add a top margin to the element making that element move feels better to me than when you add a bottom margin to an element and that actually pushes away other content.

[9:56] I like the idea of the element that I'm adding the classes to being the element that actually changes. That's why I stick with top margins most of the time.

[10:04] We can try something like mt-2 here. Maybe that's a little bit too much space. Maybe mt-1. This pushes away a little bit so it feels a little bit better.

[10:15] We can make up the difference by adjusting the line height on this title. By default, we've got a line height of 1.5, just coming from our base styles. Why don't we tighten that up a little bit to see if this looks like?

[10:27] We can do that using the leading utilities. Why don't we try something like leading-none to start, the tightest one? Of course, that's a little bit too tight to me. We could go with something like leading-tight. That looks pretty reasonable. The other option is leading-snug, which is not quite as tight. I actually think leading-tight was probably the nicest-looking one here.

[10:48] Something else to consider is that if you're going to have multiple of these cards on the same page, where the text is wrapping in some and not wrapping in the others, that can lead to the cards being different in height, which can make things too look sloppy and messy.

[11:02] Another approach that you might want to consider that deals with this wrapping problem in a totally different way is to truncate this text. You can do that in Tailwind using the truncate utility, which is just going to let us overflow off to the right and replace the trailing text with ellipses.

[11:18] This is probably the best solution in our case, because I don't want the cards to be different height if we have multiple of them on the screen at the same time. I do think that the changes that we made to account for the word wrapping actually improved the design anyways.

[11:32] This is the leading we would want if we did want to let this text wrap. A little bit of extra space we added above this pricing section helps this stand out a little bit without having to make it big, bold, or anything, so it's not competing too much with the title.

[11:45] I'm pretty happy with how this turned out. In the next lesson, why don't we see if there's a way that we can introduce some iconography to make this star rating look even more interesting than it does now?

Course

Design and Implement Common Tailwind Components

Design Text in a Tailwind Card to Emphasize Important Content

Share this video with your friends