Intro to Styling Custom UIs with Tailwind Utility Classes

Scaffolding a Multi-Panel App Layout with Flexbox

Making Panels Scrollable with Flexbox

Customizing Tailwind’s Color Palette With Your Brand

Adding Custom Fonts to Tailwind

Building a Hoverable Server Selector With SVG

Transitioning Rounded Corners using the JIT Compiler

Conditionally Applying Classes Based on the Active URL

Building the Active Server Indicator using Group and Transform Utilities

Solving the Duplication Problem with Components

Building the Server Header using Arbitrary Values from the JIT Compiler

Styling the Channel List and Controlling Layout

Identifying Repeated Patterns while Dynamically Generating the Channel List

Styling the Active Channel Link with a New Dynamic URL Segment

Using a State Variable to Add Unread States to the Channel Nav

Building Collapsible Categories with Rotating Arrow Icons

Building the Channel Header with Flexbox Shrink and Truncating Text

Styling the Search Box Using the Forms Plugin

Using Components to Dynamically Generate the Channel's Messages

Dynamically Generating the Server and Channel Navs

Using Responsive Design to Hide the Desktop Navigation

Craft Scalable, Custom-Made Interfaces with Tailwind CSS

Learn how to use the space, padding, and margin utilities to properly layout a list of items while styling the channel list. Use the group and hover utilities to add interactivity.

The code for this lesson is divided into two sections, with this you can see the progress on the code.

1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-12-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-12-end)

https://app.egghead.io/api/v1/lessons/tailwind-styling-the-channel-list-and-controlling-layout/subtitles

Sam Selikoff: [0:00] Now that we have the header built, let's start working on these channels. That would be this div right here. Let's start by deleting these dummy channels and then take a look at Discord. We've got this book icon and then we have the welcome channel.

[0:17] Let's just start with a div. We'll go ahead and import our Book icon from our icons folder and we'll write welcome. Our icon's rendering. It's a little bit big so we can pop open the inspector, take a look at this SVG, and we see it's 20 by 20. That'll be width five by height five.

[0:44] Let's go ahead and make this a flex with items-center. Let's get the colors of these right. This icon right here is 727. I actually just learned we can shift click this so that we can see it right there. That gives us a value in Tailwind of gray 400.

[1:07] We can see that right from our config. Let's make the icon text-gray-400. Then for the actual text right here, we can also shift click and see that this is 8E92, which is 300. We'll make this wrapper div text-gray-300, just like that. That looks good.

[1:39] To get the spacing of this to match, let's go ahead and remove this outer padding. We have that on this wrapper div right here. When I look at interfaces like this, I used to put wrapping padding around the whole thing. These are really independent.

[1:54] It usually helps with building out the hover treatment if we just treat them like that and remove this wrapping padding. I'm going to remove this and also the space wide too that was just from earlier. Let's see if we can get these to line up. Let's start with just px-2 right here.

[2:13] Seems like we need a little bit more over. Let's try three or four. That's pretty close. Now let's push it down. Usually, when I push things down, I start with just margin top because this just operates on the top of the element.

[2:34] We don't make any assumptions about what follows yet. Let's just start with margin top right here. That's three. Looks like we need to jump a little bit to five maybe. That's pretty close.

[2:50] If we look at this book icon, we're off just a little bit. I used to do some tricks like, adding a pixel of padding right here. That looks like it lines up the book perfectly, but with the just-in-time, let's keep it simple. Change this mt-5, which is 20 pixels. We'll just make it 21 pixels for now.

[3:10] That book icon looks spot-on. Now we can add a little bit of margin to the right of the book icon. We'll come here, mr-1. Looks a little small. Two's a little bit big. Fortunately, down here, we have some half sizes. 1.5 is included in Tailwind, and that makes it line up perfectly.

[3:36] Let's take a look at this hover treatment. We can see that this element actually takes up this amount of space conceptually in this layout. Let's see if we can get that all lined up. First, let's change this div into an anchor tag because this is really a link.

[3:52] Let's figure out what that background color is. We can scroll up here to this iconVisibility div. Click hover. Now we can see that this is our 4F5 class, which is the 550 that we added. We saw it also has that 16 percent opacity.

[4:20] This is actually exactly the same treatment that we gave our header right here. We should just be able to grab this class, come down to our A, and drop it in right here. Now we've got the color, but our size is a little bit off here.

[4:36] First in the X direction, we want this to only have a little bit of padding. Let's drop this down maybe to px-2, and then add an mx-2. That way, our channel link is still lined up perfectly, but we see that the padding only goes out to here. That looks like it lines up perfectly.

[4:56] Then we also want some padding in the Y direction. I'm just going to grab this mt-21 and stick it up here on this wrapper div. That should preserve the actual position of the text, and we see it does. Then we can add some vertical padding right here.

[5:13] Let's add py-2. Of course, that's going to push this down because there's eight extra pixels of space right here. We can just drop this down by 8 pixels to 13, so that these still sum up to 21. Let's take a look at this. It looks like the vertical padding's a little bit less.

[5:36] Let's go down to py-1, add back in four pixels right here to 17. These look spot-on. We'll also see that there's a little bit of rounding right here in the corners. We can achieve that just by adding the rounded class. That looks pretty good.

[6:00] When we hover over in Discord, we have some color changes here. This text brightens up a little bit. If we take a look, we can see it's DCDD, which is gray-100. Down on our anchor, we'll say, hover:text-gray-100. That looks just right.

[6:25] Then finally, we have this person icon for creating an invite. Let's take care of that. We'll come right after our welcome text and drop in the AddPersonIcon. There it is. Let's take a look at how big this is. If we find this SVG, we can see it's 16 by 16.

[6:49] ClassName equals width four, height four. Should do the trick. It's small, but we want to push it over. Because we're in a flex container, we can just use margin-left-auto, and it'll push it all the way to the right. The color here looks to be a little bit brighter than what we have.

[7:10] I'm guessing it's one step down. We can see it's B9, which is gray-200. We can say, this is text-gray-200. Now it looks just right. We're matching the style, but our interaction isn't quite right.

[7:32] If we disable this hover, we'll see that these only show up in Discord when you actually hover them. Otherwise, they're invisible. We've already learned how to do that. We want to make it so that this shows up when we hover this element.

[7:46] That means we need to make this a group so that we can come down here and say, let's start out with opacity zero to hide this. Then when we hover the group, using the group-hover pseudo-class, let's go ahead and set the opacity to 100.

[8:05] When we hover any part of our anchor tag here, this little guy shows up. Finally, when we hover this, we get a tooltip, which we're not going to take care of right now. When we hover the icon, we see it brightens up just a little bit. Let's come back. Enable the hover on the container.

[8:26] Go ahead and grab this SVG. Here when I hover this, you'll see that it gives us the new style. We can actually shift click this, see that it's DCD, which is gray-100. We should be able to say, hover:text-gray-100.

[8:44] If we come over and see how this compares to Discord with our clone, that looks just right. One thing you'll notice is that when I clicked the hover pseudo-class here in CSS, the tooltip didn't show up. There might be times where you encounter this in code.

[9:03] Maybe you want to actually see what the styles were like on this tooltip. In our case, we were able to use just this hover state. What if we wanted to inspect this, but it disappears when we move our mouse? I just want to show you a little trick because this comes up sometimes.

[9:16] You can click the sources pane right here, which activates a JavaScript portion of the DevTools. You'll see right here that there is a button called pause script execution. There's actually a keyboard shortcut for this, which is F8.

[9:30] What I'm going to do is hover over this icon, go ahead and hit F8 on my keyboard, and you'll see it says paused and debugger. Well, the cool thing about this is we can come back and select the selector tool right here.

[9:44] I can actually interact with this page and the JavaScript that dismisses this tooltip won't get run, which lets us interact with this page and select all these new UI elements. If we wanted to see what that color was, we can see right here.

[9:56] We get right back to that, the DCDD or our gray-100. We could also search for this create invite tooltip. You'll see, in this case, it's actually hard to select under these other elements. We can just come here to the DevTools, command-find for create invite.

[10:13] Once we search through a few of these, we'll land right here at these divs, and these elements making up this. Now we can inspect all these colors. That was just a little tip I wanted to share while we were in this interactive part of the UI.

[10:28] Once you're done, you can hit Play and the JavaScript starts executing again. Now we have this really nice channel header that looks exactly like Discord's. Let's go ahead and copy this for the announcements here.

[10:43] I'm just going to grab the A-tag, duplicate this, change this to announcements, and then instead of a BookIcon, we actually have the SpeakerPhoneIcon. Back in our clone, we see the announcements button here with the same treatment, but the spacing is a little bit off.

[11:06] We can see it's jumping around a little bit. For something like this, thinking about the layout, I actually like to think about space in between these and in between these as their own conceptual elements. What I'm going to do is wrap these two links in a new div.

[11:25] We're going to use this handy space-Y utility from Tailwind. This is going to do exactly what it says. It's just going to put space in between each one of these channels. We only need a little bit, so let's start with space-1. That gives us four pixels that looks like a little bit too much.

[11:44] Let's drop it down to .5. That lines up perfectly. The cool thing about this is, it applies to every element that's a child of itself. If we had a third channel, this should line up just perfectly duplicating this exact markup that we have here.

[12:03] Because Discord is a dynamic app, this is how you want to think about building UIs like this, but this treatment works just great. We've got our first two channels here. In the next video, we're going to keep going with the rest of the sidebar.

Styling the Channel List and Controlling Layout

Share this video with your friends

Course

Craft Scalable, Custom-Made Interfaces with Tailwind CSS