Use Tailwind to Design a span that Looks like a Badge

Instructor: [00:00] Say we wanted to highlight that this was a new listing, maybe by adding a badge or something up here that said new. How do we go about building something like that with Tailwind?

[00:09] Since we want the badge to be next to this content, to start, I'm going to create a new container here, I'm going to move this beds and baths information inside of it. Now I'm going to create a spin element since this badge is like a little inline thing. Why don't we just drop in the text new so we have something to work with.

[00:25] Now that we have the text rendering, let's add a class out to the spin so we can start styling it. The first thing I want to do here is probably add a background color. Badges usually have a nice, exciting background color to make them pop.

[00:37] Why don't we try using the same background color we used for these icons? I think that was bg-teal-500. This makes the text a little bit hard to read since it's dark on a dark-ish background color. Why don't we make that white and see if that helps? Yeah. That looks a lot better.

[00:52] The next thing I want to do is maybe bring down the font size. Right now, this text is actually really big. It's the same size as the price. Why don't we bring it down to text extra small to match the size of the beds and bath stuff, since we're going to be putting this badge next to that content anyways? Let's add text access here and see what that looks like. OK, we're getting there.

[01:11] Next thing is probably adding some panning. Right now, you can see how this text is butted right up against the edge of the background color. That's no good. Let's go ahead and add some horizontal panning. Maybe we'll start with like PX1. That does help a little bit. What about PX2? PX2 looks pretty good, too.

[01:27] What about vertical panning? Maybe we could go with a little bit of vertical panning here like PY1. I think that's actually a little bit too much. It does actually bring to our attention, something we should probably solve, which is did you notice that when we added the panning, the badge got taller, but none of the content around it moved?

[01:45] Check out what happens when I set this to like six, for example. See how this background is just overlapping this text content? That's no good. The reason for this is that by default, spin elements are set to display inline, which is really just meant for text. If you want to add panning or background color, or even margin to things, using inline, you'll often run into situations where you don't quite get the results that you expect.

[02:08] In our case, we probably want to set this to inline blocks that it actually accepts panning in a more graceful way. We'll set up the inline block here. Yeah, now you can see that everything moved to accommodate the space that was taking up.

[02:21] Again, we don't really need this vertical panning. I think it's way too much. Even adding a PY1 was a little bit too much in this case. I'll just go with no panning for now.

[02:31] Next, why don't we add some rounded corners to make this feel a little bit more like a badge? Something we've talked about a little bit with Tailwind already is that you can use the rounded utility to add just like a regular rounded corner. You can do rounded-lg to add really large rounded corners. You can do rounded-full which will always do the fully rounded corners no matter how tall the element is.

[02:54] For badges, this pill shape works really well. Let's go with this. Something else that looks really good with badges a lot of the time is to give them same uppercase treatment that we used for this text here. Why don't we try copying the uppercase, semi-bold and tracking wide utilities and adding them to this badge and see what that looks like. This actually looks pretty good.

[03:15] The next thing is probably getting the positioning right. Right now, the badge is stacked on top. Like we talked about at the beginning of the lesson, we actually want this badge next to this information. Why don't we use flexbox again to get these things on the same line while still maintaining the ability to control the alignment as necessary.

[03:34] I'm going to add a class to this container of flex and that should get us going in the right direction. That looks pretty good. Now we do need some space between the badge and this text over here. I'm going to add a little bit of left margin to this content. Maybe something like ml-2. That's probably plenty.

[03:52] One thing you might notice if you look carefully is that now we've introduced this badge, all of a sudden, this row of content feels really tightly batted up against this title. When we didn't have the badge here, we had a little bit of space there because of the line here and the text and things looked nice.

[04:08] Now that we have this pill background thing, you can see it's really tight between the tops of these characters and the bottom of the badge. Let's add a little bit of top margin to this title to space it out a little bit. Why don't we go with the smallest size here, just empty one? I think that's enough.

[04:25] The next thing I'd like to look at is figuring out what vertical alignment we should be using for this badge and this text. Currently, this isn't a problem at all because we're using the exact same font size. Everything looks centered and aligned and everything's fine.

[04:40] Imagine for some reason we wanted to use like text-lg here. Now all of a sudden, you can see we got this badge and we got this text that's aligned to the top.

[04:49] What I like to do when I'm building components is I always like to design them in the most flexible and adaptable way possible. Even if this badge is going to have the same text size as this text over here, meaning we don't really even need to deal with the alignment issue, I like to tackle it anyway. At least my intentions for helping should look our captured in the code.

[05:08] In this case, there's two approaches you could take. One is to do something like items-center to just center the text. This is totally reasonable, especially when the font is this large.

[05:18] Another approach that I think is worth considering that a lot of people don't consider is actually aligning these two pieces of text by their baseline so that the bottom of this text is aligned with the bottom of this text. We can do that using items baseline. See, now the bottom of the word new is perfectly aligned with the bottom of three beds.

[05:37] This is different than just bottom-aligning, for example, we could use items end to bottom-align these. You'll see now there isn't a straight line from the bottom of these letters to the bottom of these letters. In this case, I think items baseline works a lot better.

[05:50] As a general rule, I usually do try to align different font sizes by their baseline. I feel that looks the best and is the most readable. Why don't we stick with that approach? We'll switches back to text XS, which means the alignment doesn't really matter, but it does make me feel a little bit better knowing that we've actually thought about it and addressed it explicitly anyways.

[06:09] One last tip that I'd like to share when it comes to badges is that a lot of the time, using this treatment where you have this dark background color with the white text can make badges pop almost a little bit too much and really steal your attention. Sometimes that is what you want, but sometimes it's not.

[06:25] In cases where you want to use a badge but have it set back a little bit and not really popping out at you quite as aggressively, a cool approach you can use this to actually use a really light colored background, and then use the darker color for the text.

[06:37] I'll show what I mean. Instead of BG teal 500, we could do something like BG teal 100 for a soft teal background. This is actually basically impossible to see because the text is white. Why don't we take it down and maybe BG teal 200 because I think that'll look better anyways?

[06:53] Instead of using white text, we could use something like text teal 500, see what that looks like. That's not too bad. It's a little bit too soft, maybe. Maybe we could go with something like text teal 600. That's a little bit better. We might even be able to go as dark as like text teal 800. I think this is actually starting to look really nice.