The Tailwind Utility-First Workflow

Adam Wathan: [0:00] Now that we got Tailwind setup on our project, let's try to actually build something with it. We're going to build this really simple splash page for a make believe website called Workcation. Let's head back to the code and get started.

[0:11] First, let's delete this heading that we have hanging around from the previous video. Why don't we start by adding a background color to this page? To add a background color in Tailwind, all we need to do is add a utility class that sets the background color.

[0:25] All of Tailwind's background color utility start with bg-. You can see we have options like transparent, black, white, a large set of grays instead of reds, oranges, yellows, greens, teals, blues, all sort of colors.

[0:37] For this design, why don't we use a really light gray. You can see that we have a numbering system here where 100 is the lightest shade all the way down to 900, which is the darkest shade. This is the same across all the colors in the color pallet. 900 is always the darkest, 100 is always the lightest.

[0:54] Why don't we go with 100, which is a really light gray, just barely off white and see how that looks. I think that looks pretty good.

[1:01] Next, why don't we pull in the logo that we saw on the finished design. We've already got the logo over here, in the left, in the sidebar. I pulled it into publicimglogo.svg. Let's add an image tag here. We'll pull in imglogo.svg, we'll add some alt text workation, and we should see that pop up. There we go.

[1:21] Now, I don't love that the image goes all the way to the edges of the page. Why don't we add some padding around this. I'm going to create a new container here. We'll move the image up into this container, and we can add the padding to the div itself.

[1:34] The way that we add padding in Tailwind is using padding utilities. We can add a class attribute here, and then all the padding utilities are p-, and then a number that comes from Tailwind's built-in spacing scale.

[1:46] The spacing scale starts at and goes all the way up to 64, where is of course literally , and then 1 is .25 rem, which is the equivalent of 4 pixels, using the default font size in the browser. Then, every other number scales proportionately to this one. 2 is twice as much padding as 1, 3 is three times as much padding as 1, 10 is ten times as much padding as 1.

[2:12] You can see there's a couple of gaps in the scale, because we don't want you fine-tuning four pixels when you're at really large sizes. That's not useful, and can actually make it harder to put together a nice design when you have too many choices.

[2:23] We try to give you the right number of choices by default, so you can fine-tune things at the low end of the scale, but at the bigger end of the scale, you're choosing between bigger gaps, so you're not worrying about one pixel here or there.

[2:33] Why don't we try something like p-8 and see how that looks. That's a reasonable amount of padding. Say we wanted a different amount of horizontal padding than we did vertical padding. We can set the horizontal padding inTailwind by using the PX utilities, then we can set the vertical padding using the PY utilities. I think this looks pretty good. Now, what about the image size?

[2:53] The logo goes full width here and is a little bit taller than it was in the finished design. Why don't we try and shrink this down and assign it a smaller height? We can give this image a height using Tailwind's height utilities. The height utilities are just H- and then a value from the same spacing and sizing scale that we talked about already.

[3:12] This can be as small as H1 which is of course really tiny or we head to something like H32 or even larger. Why don't we try something like H10 and see how that looks? I think that looks pretty good.

[3:23] Next, let's pull in that nice splash image we had of that woman working on the beach, add another image tank here and I'll pull that in from "IMG/beachwork.JPEG."

[3:33] I'll give this some all text of "woman workcationing on the beach." We should see that pop in. There we go. First things first. It's a little bit too tight to the logo, so why don't we add some margin to space those out?

[3:45] I'm going to add a class here. To add some top margin in Tailwind, all we need to do is say MT for margin top and then again choose a value from that same spacing scale that's used throughout the entire framework.

[3:58] We could try something like MT4. Maybe that's still a little bit too tight. Why don't we try MT6? I think that looks good. Next, what about the square corners? In the finished design we had these nice soft rounded corners. Well, to add some border radius in Tailwind, all we need to do is use the rounded utility.

[4:15] This is going to add a medium default border radius. We can tighten that up a little bit by using a rounded SM so that will be a little bit tighter on our border radius or we can make it a nice big fat border radius using rounded LG. I think this looks great. What about a shadow to elevate this image off the page a little bit?

[4:33] If you want to add a box shadow, all we need to do is add a shadow class and this is going to add a small subtle shadow. These shadows go all the way up to shadow two Excel which is a much larger, more diffused shadow. For our purposes, I think we want a pretty big shadow but maybe not the biggest.

[4:50] Why don't we try shadow xl? That looks pretty good to me. Now, what about sort of a tagline? In the finished design, we have this tag line underneath the image here sort of like the H1 for the page. Let me add H1 and drop in the content here. "You can work from anywhere. Take advantage of it."

[5:08] Great, now you can see we have that completely on styled heading over here by default ready for us to style with whatever classes we want. Let's add some utilities to bring this to life. First things first.

[5:20] Let's add a little bit of top margin like we did for the image to spread things out a little bit. Why don't we go with MT6 to use the same spacing on both sides? Now, let's try and assign a font size.

[5:30] Tailwind's font size scale starts at text-xs for extra small and goes all the way up to text-6xl for 6 extra-large. What we want here something in the middle, maybe something like text-2xl. That looks pretty good. I like how the text wraps there.

[5:46] Next, let's tackle the font weight on this heading. You can see right now we're just using the normal font weight, which is a little bit light for a heading. To set the font weight in tailwind, we can just use the font utilities. These go all the way from hairline, which is really thin, all the way up to black, which is the boldest font.

[6:04] For our purposes, something like font bold, which is font-weight 700 will look pretty good. What about the color? Right now, this is black by default. If you look closely, you can see this is a lot darker than this text up here, which also feels black, but looks a lot softer when you compare it to this.

[6:20] Most designers tend to not actually use true black in their designs, because it looks a little bit unnatural. Usually, they're using a dark gray color. Why don't we try changing this text to be dark gray? We can do something like text-gray-900 to get the darkest gray. That's a little bit softer and looks a little bit less unnatural.

[6:40] What about the line height? It looks like this text is actually spaced out a little bit more than it needs to be for being in such a large size. We can change the line height in Tailwind using the leading utilities, which is the typographical term for line height.

[6:53] We can go with something like leading-none, which is a really tight line height. We can take this all the way up to leading-loose which is the tallest line height in Tailwind. Something like leading-tight, which is tight but not too tight, will look pretty good in our situation. I like that.

[7:08] How about this take advantage of a text? If you remember from the final design, this was a different color than this text. Why don't we pull this content down here? We'll add a span around this text, so that we can style it a little bit differently.

[7:23] I'll pull this onto its own line, so we have a little bit more room to work with it. Let's add a class attribute to this span. All we really want to do here is change the color. We can do something like text, and then we just have to pick a color.

[7:35] The color in the logo is indigo, which is like a color in between blue and purple. Why don't we try and match the color from the logo? We can do something like text-indigo-400. That's a little bit light. What about text-indigo-500? That looks great.

[7:51] Moving on to the paragraph text that was underneath the heading. Let's add a piece egg here and drop in some content. We can say, "Workcation helps you find work-friendly rentals in beautiful locations, so you can enjoy some nice weather even when you're not on vacation." Bit of a mouthful, but there we go.

[8:13] Let's start by adding a little bit of spacing above it like we did with the other elements, maybe something like mt4, since we do want it to feel sort of attached to the headline in some way. Honestly, we can even go a little bit tighter, maybe mt2. That looks pretty good to me.

[8:28] What about the color? Right now, this is black. We know that we don't want to use black. Ideally, we want to use a dark gray. We also want this text to maybe be a little bit softer than the headline, so it doesn't really compete with it too much.

[8:40] Why don't we try something like text-gray-600 and see how that looks? That's pretty good. What about 700? Is 700 too dark? That's not too bad either, but I actually like 600 more. The final piece here was this call to action button at the bottom.

[8:55] Since buttons are inline or inline block elements by default, why don't we add a container here that we can throw this button into? Let's make the button actually a link, because even though it looks like a button, it's actually going to take someone to a different page on the site, not submit a form or anything like that.

[9:10] We'll create a link here. We'll have this go nowhere, since this is a demo. We'll start on some text here, maybe, "Book your escape," is what we had. Now we have this totally unstyled link. Let's bring this to life and make it feel more like a button.

[9:23] First, let's add a little bit of spacing. I'm going toad the spacing to the div, since the div is the block level element. Let's try something like mt4. Now we have a little bit of space. Things are looking a little bit better. Let's add a class to this link element and actually style it to look like a button.

[9:38] First things first, links are inline elements by default, which means you can't actually add padding to them properly. Let's make this inline block, so that it accepts padding gracefully. Why don't we add a background color, so we can actually see what the padding would look like when we add it?

[9:52] Maybe we'll go with something like indigo-500 to match our text color. See what that looks like. Yep, there we go. Let's make the text white, so that it's a little bit more readable. Let's add a little bit of padding. We can do something maybe like px4, py2 to start, see what that looks like. That's pretty good.

[10:10] Why don't we add some border radius to sort of match the personality that we have in the image above? We can go with rounded-lg on the button as well, see what that looks like. That looks pretty good.

[10:20] Though, because we cut off so much surface area of the button by chopping off the corners, it makes it seem like we need a little bit more padding. Why don't we try something like px5, py3, to have this nice, beefy button. That looks good.

[10:34] Next, let's add a shadow, like we have with the image. Something like shadow-lg would probably be pretty good. Not quite as extreme as we had it for the image, but still serve a nice diffused shadow. That looks great.

[10:46] Now, what about the text itself? Right now, it's basically unsound. The regular font weight, all that stuff. Let's make it a little bit more interesting. Why don't we try upper-casing this text to make it a little bit more dramatic. That looks pretty good.

[10:58] Usually when you upper-case text, you often need to add a little bit of letter spacing to make it a little bit more readable. We can add letter spacing in Tailwind using the tracking utilities. Tracking, again, is the typographical term for letter spacing. We could go with something like tracking wider, which will add a little bit of spacing between the letters and make it a little bit easier to read.

[11:17] What about the font weight? Right now, it's a regular font weight. Why don't we try bumping it up to be slightly bolder, so the button is a little bit more emphasized. Something like font semibold with font weight 600. That looks pretty good.

[11:31] Now that we have this bold upper-case text, it makes the text feel a little bit too big. Why don't we bring the font size down a little bit, to text-sm, and see how that looks. Yeah, this looks good. There you have it, we've put together this nice little simple splash page.

[11:46] The cool thing about it, is that we did all of this work without actually having to write a single line of custom CSS. We were able to put together this fairly custom looking design, relying only on the default utilities built into Tailwind. In the next lesson, let's tackle making this design responsive, again, without having to write a single line of custom CSS.