Building the Server Header using Arbitrary Values from the JIT Compiler

Instructor: [0:00] The first thing different about our server header is the shadows. Over in Discord, we see that they're using this tighter shadow. It turns out, there's three that come from Discord that don't line up really well with Tailwind's defaults. This is a case where we actually don't want to use any of Tailwind's default shadows.

[0:18] For that reason, I'm going to come over to Tailwind Config, and above Extend, I'm just going to paste in the values directly from Discord. We're just going to use three -- small, medium, and large -- so that they all match perfectly.

[0:32] We can come to our server page. In this case, we have shadow medium, right here and right here. We just want to change this to shadow small. You'll see that now this matches perfectly. You'll also notice that our IntelliSense updates with only the shadow values that we have. This should help your team know which values are available.

[0:54] Let's work on this Verified icon. I went ahead and copied the icons we'll be using into this components folder. We're already using the Discord icon, and the rest I copied directly from Discord, just like we saw earlier in the course. All of them are just copy pasted and run through transform tools. We have everything we need right here. In this case, we actually have two icons.

[1:17] This Verified icon and then the Check icon. We'll be using both of those right here before our server title. Let's grab the Verified icon and the Check icon. Those we can import from our components folder. There we can see them being rendered.

[1:39] If we take a look at Discord, we'll see that these icons are 16 by 16. We can just throw a class name on each of these, width four and height four, for 16 pixels. For the colors, this Flower Start icon is this background accent variable, which is 4F545C.

[2:12] This is actually not in our grayscale. It's something I missed when I did my original audit. If this happens to you in a real world project, that your design contains a color outside of the scale you've already agreed on with your designers, it's a good time to have a conversation with the design team.

[2:29] Make sure that choice was intentional. If not, maybe rework the scale or use a different color. In our case, we're just going to go ahead and slot this right in here at 550. This is one of the things I like about this numeric scale, is this flexibility. We can go ahead and make this text gray 550.

[2:51] We'll leave the Check icon white. The colors are correct. The icons sit on top of each other. Why don't we just wrap these in a relative div, and then make these absolute. This removes this div from the flow.

[3:10] Let's go ahead and give it a width and a height of four as well, so it's taking up space again. That's looking much better. It looks like over in Discord, we have a little bit more horizontal padding right here. That's coming from PX3. Let's switch this to four. That looks spot-on.

[3:31] Let's add a little bit of margin right to our icon. We'll use this wrapper div, throw an MR1 here. This looks great. Let's change the title to Tailwind CSS for now. We'll just hard code this in here. If we compare this, we can actually see that Discord's title is a little bit smaller here.

[3:57] If we inspect it, we'll see it has a font size of 15 pixels. 15 actually falls outside of Tailwind's default. In this case, if you audit the CSS from Discord, 15 is only used a handful of times.

[4:12] Instead of updating our global Tailwind config, I'm just going to come here to where our other typography rules are. We're just going to use the JIT compiler to add a little one-off class here. We can use text. Here we can see base is 16, small is 14.

[4:30] We're just going to go 15 pixels using the brackets to get us just the right value. Now that is matching perfectly. Last thing is this Chevron icon. Let's come right here and throw in the Chevron icon. If we inspect this, it's 18 by 18.

[4:50] Again, if we look at width four, we get 16, width 5 gives us 20, so we're right in between. Let's again just use a one-off value of 18 pixels for the width and the height here, so that this matches perfectly. There it is. It's pushed up against our text.

[5:13] Because we're in a flex container, we can use margin-left auto to push it to the right. Last thing, we'll notice here that the opacity is actually 80 percent. We can do that with the opacity 80 utility. That's looking great. Before we wrap up, we have a little hover treatment here.

[5:37] If we come up to the header and give it a hover pseudo-class, we'll see it's using this background modifier hover. This color is 4F5 Tailwind config, which we do have. It's that new 550 again. We'll also notice that it has an opacity of 16 percent.

[6:03] Let's come back to our page and this wrapper div right here. Since this is going to be interactive, let's make it a button. Then we'll say, hover background gray 550, and we can use a shortcut to add some opacity. The defaults here go, 5, 10, and 20.

[6:23] Again, if we wanted to match this, let's go ahead and use the brackets for .16. Now we have the hover treatment and it matches perfectly here. Finally, we'll notice there's just a little bit of transition, so we can add that with the transition class.

[6:46] Our header's looking really nice, looks just like Discord's. When it comes to these arbitrary values, there's no hard and fast rule. They're a good opportunity to have a conversation with your design team if you find yourself using values that weren't in your palette, that you agreed upon at the beginning.

[7:05] Definitely don't be scared to use the arbitrary one-off rules with the bracket syntax. That's exactly what it's here for. It keeps you in the HTML and it keeps you productive, working within Tailwind's paradigms.