Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs. 

Maxime Bourgeois

Tailwind comes with pre-built, single-purpose CSS classes called utility classes that you use to style your application. If you’ve never used a utility-first approach before, you’ll be surprised at just how far you can get building a completely custom UI using only Tailwind’s defaults.

In this lesson we’ll style a message component from Discord. You’ll see how Tailwind lets us tweak our design directly from our template, all without having to write a single line of CSS ourselves. Because Tailwind’s utility classes live right alongside our markup, we won’t need to come up with any new naming patterns or conventions to keep our styling code maintainable.

This co-location of styles and markup is one of the biggest benefits of Tailwind, since it lets teams decide for themselves how best to break up their UIs – and their Tailwind styling code simply comes along for the ride.

Intro to Styling Custom UIs with Tailwind Utility Classes

Learn how to use Tailwind’s Flexbox utilities to recreate the multi-panel app layout found in Discord. You’ll be able to choose which panels should stay fixed, and which should stretch to fill up the remaining space of the viewport.

Scaffolding a Multi-Panel App Layout with Flexbox

Use Tailwind’s Flexbox utilities to control the sizing and behavior of each panel in our application layout. You’ll see how to make panels scrollable when their contents overflow their container, as well as how to use nested Flexbox panels to achieve Discord’s layout.

Making Panels Scrollable with Flexbox

Learn the reasoning behind Tailwind’s conventions for colors, and best practices for overriding and extending the default colors with your brand’s palette.

Customizing Tailwind’s Color Palette With Your Brand

In this lesson, you will learn about Tailwind’s default typography choices and how to customize them using your own custom fonts. This lesson will teach you different ways to import the fonts you need for your next project.

The code for this lesson is divided into two sections; you can see the progress on the code. 
1. [Begin](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-05-begin) 
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-05-end) 

Adding Custom Fonts to Tailwind

SVGs are easy to style directly using Tailwind's utility classes. Using the inspector tool, we are going to learn how to take an SVG from the Discord app, color it, and modify its properties on hover.

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-06-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-06-end)

Building a Hoverable Server Selector With SVG

Tailwind CSS v2.1 introduces a new just-in-time compiler for Tailwind that generates your styles on-demand as you author your templates, instead of generating everything in advance at initial build time. In this lesson, we'll review how to transition rounded courses using the JIT Compiler.

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-07-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-07-end)

Transitioning Rounded Corners using the JIT Compiler

Tailwind has no built-in APIs for conditionally applying styles. Instead, it encourages you to embrace whatever framework you're already using to conditionally add or remove utilities for different states of your application.

We can do this in our Next.js application by creating a second URL and page, and refactoring our server navigation to persist across every page of our app. Now we can use the [useRouter](https://nextjs.org/docs/api-reference/next/router#userouter) hook from Next.js to determine which URL is active and use that to apply different styles to our navigation links.

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-08-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-08-end)


Conditionally Applying Classes Based on the Active URL

Let's build the active server indicator (the final piece of our server buttons) using an absolutely positioned div alongside Tailwind's position utilities. We'll then learn how to use Groups to affect the styling of the indicator when hovering over the ancestor link. Finally, we'll use the scale and translate utilities to add the final bit of polish and match Discord's UI.

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-09-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-09-end)


Building the Active Server Indicator using Group and Transform Utilities

Reusing our custom server selector will result in lots of duplicate markup. Tailwind doesn't attempt to solve this duplication problem on its own, but instead encourages us to use whatever tools for code reuse we already have at our disposal. Let's make a NavLink React component to make our custom treatment easy to reuse and change.

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-10-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-10-end)

Solving the Duplication Problem with Components

To build the server header, we'll override Tailwind's default shadows with three values from Discord's design system. We'll also use the JIT compiler's bracket syntax to get a pixel-perfect match with Discord's UI. Arbitrary values are a powerful way to break out of your design system's values while still being able to use Tailwind's APIs directly in your HTML.

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-11-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-11-end)

Building the Server Header using Arbitrary Values from the JIT Compiler

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)

Styling the Channel List and Controlling Layout

See how to dynamically generate our lists of channels using a React component and Tailwind's spacing utilities, and learn how this is often enough to reduce any duplication we have in our templates.

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-13-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-13-end)

Identifying Repeated Patterns while Dynamically Generating the Channel List

Use nested dynamic router segments along with the Next.js Link Component to tie our channel links to new URLs. Learn why you should separate out UI states in order to avoid CSS conflicts.

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-14-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-14-end)

Styling the Active Channel Link with a New Dynamic URL Segment

Learn how to use a simple variable to improve the readability of our code when styling more than two states. Add an unread indicator to the new inactive and unread state. Use the active prefix to style the channel links for the active CSS pseudostate.

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-15-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-15-end)

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

Use some simple React state to toggle categories open and closed. Filter out channels based on their unread and closed state. Use Tailwind's transform and transition utilities to animate a category's arrow to the right.

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-16-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-16-end)

Building Collapsible Categories with Rotating Arrow Icons

Learn how to use the flexbox-shrink utility to choose which parts of our multi-column layout shrink or expand to accommodate the available space. Use the truncate utility to add ellipses when the channel description is too long.

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-17-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-17-end)

Building the Channel Header with Flexbox Shrink and Truncating Text

Add the @tailwindcss/forms plugin to ensure input fields are easily styleable using Tailwind's utility classes. Add the search bar and customize the placeholder to match Discord's UI.

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-18-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-18-end)

Styling the Search Box Using the Forms Plugin

We use the Message component we built in the very first video to render messages from the server's dummy data. Use some simple logic to conditionally render the message author's information. Learn how to tweak the line height of a paragraph of text.

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-19-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-19-end)

Using Components to Dynamically Generate the Channel's Messages

Let's round out our clone by replacing all static links with the mock data file, making sure the navigation works at every step.

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-20-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-20-end)

Dynamically Generating the Server and Channel Navs

Use Tailwind's responsive prefixes to apply specific classes only at certain breakpoints. Learn about two approaches for adjusting your UI for different screen sizes – sprinkling responsive prefixes on existing templates, or creating new chunks of markup to use at specific screen widths.

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-21-begin)
2. [End](https://github.com/samselikoff/egghead-tailwind-disord-course/tree/main/lesson-21-end)

Using Responsive Design to Hide the Desktop Navigation

Craft Scalable, Custom-Made Interfaces with Tailwind CSS

https://app.egghead.io/api/v1/lessons/tailwind-intro-to-styling-custom-uis-with-tailwind-utility-classes/subtitles

Instructor: [0:00] Let's start by building this small piece of UI from the Discord app right here, this message component. I'm going to start off in this blank app. This happens to be a React app. Don't worry if you've never used React before. The lessons we're covering apply to any tool or framework. The biggest difference is that we use className instead of class in React.

[0:19] To start, we can see that Discord has this darker theme to it. Let's start by making the background of our app black. We can do this using the .bg-black utility class from Tailwind. Just like that, we can see our paragraph text is black. We can't read our text anymore, so let's go ahead and make our text white. Right away, we see the styles change.

[0:41] This is the heart of Tailwind. It's these little utility classes that we apply directly to our markup to style our app without having to write any of our own custom CSS. Let's keep going. We'll make this a min-height of the full screen, so it takes up all this space. Let's update this tag to be a div, and let's give it a display of flex with items-center and justify-center.

[1:07] Tailwind utilities are composable, which means that each one of these classes does one thing. If we pop open our DevTools, we can see that right here. We see that the flex class applies the display flex CSS rule. Items-center applies align-items-center, and so on. This is a handy way to see what each one of these classes is doing as you learn Tailwind.

[1:32] The background over in Discord is not pure black, so we can come back and change this to a gray. Tailwind comes with lots of colors out of the box. There's grays, blues, greens and reds, and for each color, there are many shades. For grays, we have gray 900 as the darkest gray. Then we go all the way down to gray 100 as the lightest gray, with even a 50 for a touch lighter.

[1:59] In our case, let's go with 700 for our background. You can see this gray doesn't match Discord's exactly. Later in the series, we'll talk about customizing these colors, so we can get a perfect fit. For now, we'll stick with the defaults. Let's take another look at this message component. We see it has an image, a name and a date, and then the actual message.

[2:19] Let's start with the image. I'll come over here. Let's drop in an image tag of Adam. We can see the image tag being rendered, but it's big. We can use some Tailwind utilities to control the sizing. If we set the width to four and the height to four, we'll see this makes the image tiny. If we inspect this, we can see that this ends up being a 16 by 16 image. This four comes from Tailwind's default spacing scale, which is in rems.

[2:49] Rems are a best practice to use as a unit in CSS, but we can see that there is a one to four ratio between the Tailwind spacing scale and the 16 pixels that our image ends up being right here. If we want to know the final pixel value of any of these sizes, we multiply by four.

[3:08] If we pop over to Discord and inspect this image, we can see that it is 40 by 40 right here. 40 divided by 4 is 10, which means we should just be able to set this to width and height of 10, come back to our app, and now we'll have a 40 by 40 image.

[3:27] The next thing about this avatar is that it's rounded. We can achieve that in our app using the rounded class. You'll see by default, rounded adds a little bit of border radius to the image, but there is a rounded full class that will make it a complete circle, and our image is looking good.

[3:48] Let's add a new paragraph tag, and we'll add, addMorphen, as the name, and 01/15/2021 as the date. Let's dial these. First, we can give the name here a color of text green, let's say 500. We also want to add a bit of space here to the right of the image. We can come to our image and add margin right of four on the spacing scale, and we'll also add a little bit of margin to the right of the name.

[4:21] Let's also make the name smaller, and we'll make the date extra small. If we look at Discord, we can see the date is lighter. Let's soften this text a bit. We'll make this text gray 500. Let's wrap the image and the text in a new div.

[4:43] We'll make this a flex container as well, and the paragraph will be flex items baseline, so that everything is nice and tidy up at the top.

[4:54] One thing you'll notice when working with Tailwind is that it doesn't abstract away CSS at all. If you want to lay out your UI elements using Flexbox, you have to know how Flexbox works in order to use it with Tailwind. This is a good thing, because the more you use Tailwind, the better at CSS you'll actually become.

[5:12] One last thing on our heading here. Let's make the name a little bit thicker by changing the font weight using font medium. I think that looks good.

[5:23] Now, we can grab the text of this first message, come back to our app. Drop it right below this heading here. We want these to be on top of each other, so wrap this in a div. Also wrap all of our content in a new div with the class name of max width large.

[5:45] Again, if we flip over to Discord, we can see that the text is not pure white. It's a little bit softer than that. We can come down to our paragraph and make it text gray 300. Let's grab the next message.

[5:59] In Discord, conceptually, you can see as we hover these, we highlight the full width here for each message. Conceptually, these are different things. We're going to copy this, and we're going to put it in an entirely new container that is a sibling to this first image and paragraph wrapper.

[6:19] Back in our code, that would be this div right here. We'll drop a new div with a paragraph and our second message. Let's also make this one text gray 300. You can see it's not aligned.

[6:35] One nice thing about the fact that Tailwind uses the spacing scale for things like width and margins is that we can just add these up. We know this image is width 10 and it has a margin right of 4 on it, so this total space right here is 14. We should be able to come down to our new paragraph and add padding left of 14, and get it to perfectly line up.

[6:59] We can also come to this wrapper div right here and go ahead and add a margin top of one, just to give it a bit of space, because we can see in Discord, there's a little space in between messages.

[7:11] Let's go ahead and grab this last message, come back, and we'll duplicate this and put in our last message. I'll zoom out just a bit here. Let's go ahead and apply this hover treatment. When we hover our message, we get a slightly darker background. In Tailwind, we can do that simply using the hover prefix.

[7:34] Remember, our app is currently a background of gray 700. Let's make it a background of gray 800 when we hover a message. Now we can see that new background is working. It's a little dark though, and Discord uses a background opacity to lighten it up. We can do the same thing with Tailwind using background opacity, and let's say 30 percent. That looks good.

[7:59] If we pop over to Discord, we can see there's little space on the side and above each message for the background. Come back over to our container, add some padding in the X direction of space four, and just a bit in the Y direction of space one. Grab these classes and apply exactly the same treatment to our other message containers. Now we can see all of our messages have the hover treatment, and this is looking really good.

[8:29] We ended up with a really nice reproduction of some custom UI here, and we didn't write a single line of CSS. No new files to maintain, no custom naming pattern that we had to come up with or explain to our coworkers. This is one of the biggest value propositions of Tailwind. We get to use all these shared utilities directly in our markup.

[8:49] This is absolutely one of my favorite things about this library, because how you break up your HTML and your templates depends so much on your team and what technology you're using. With Tailwind, all your styling code lives right here in the markup and just comes along for the ride. That's it for this quick intro, and I'll see you in the next video.

https://app.egghead.io/api/v1/lessons/tailwind-intro-to-styling-custom-uis-with-tailwind-utility-classes/transcript

https://app.egghead.io/api/v1/lessons/tailwind-scaffolding-a-multi-panel-app-layout-with-flexbox/subtitles

Instructor: [0:00] When scaffolding an app layout, I like to start from the outside in. Taking a look at Discord, I see three main pieces here. We have the server selector, the channel selector, and then this main message area. Let's come over to our app and start with three new divs. We'll have servers, channels, and our main area.

[0:25] By default, these divs lie on top of each other, but we can use the flex utility class, which will give our app a flex layout with a default flex-direction of row. Over in Discord, we can see the server selector is the darkest gray. Then the channel selector is a little bit lighter, and the main is the lightest.

[0:46] Let's give our server selector a background of gray 800. Channels will be background gray of 700, and the main area will be background gray 600. We'll make the text white so we can read it. Now, let's make our parent container here a height of the full screen so that all these divs fill up the available space.

[1:12] Now, if we hop back over to Discord, we'll see that the server selector and the channel selector have this fixed width, but as the user resizes the app, it's this main area that takes up the available space.

[1:27] Flexbox is perfect for this. We can tell our layout to have the main panel here take up all the available space using the flex-1 utility class. Now, if we pop open the inspector, we can see it does just that. This is why I like Flexbox for application layouts. It's easy to pick which panel should grow and shrink, and which ones should be fixed.

[1:52] Now, let's add a little bit of padding to each one of these panels using the padding utilities. These utilities use Tailwind's default spacing scale, which starts with  for no padding, then goes to 1, which is four pixels of padding.

[2:07] You can see here it adds a little bit of padding around servers. Then we can go to 2 for 8 pixels, 3 for 12, and so on. We'll go with p4 on all three of these panels. Now, we're seeing our layout start to come together.

[2:25] Next, let's make a white div for a dummy server selector here, so we can visualize this a little bit better. The way we can make a white circle is by using a new div here. We'll drop TW in, so we have some content. We'll go ahead and make the background white, and we'll make the text gray 800.

[2:50] We want to give this white box a certain size. Over here, we can inspect one of these and see that these are 48 by 48 pixels. We can explicitly set the width and height of our box to 48 pixels using the width and height utilities.

[3:07] Width uses the same spacing scale that padding does. It starts off zero. One is four pixels, which is small. Two is eight pixels and so on. In our case, we want 12 for 48 pixels, and we'll also set the height to 12 as well. That will give us our 48-pixel box.

[3:31] We can use rounded to make this a rounded rectangle, and there's a rounded-full class, which will make it a complete circle. Then, to center the title, we can go ahead and use flex-items-center justify-center because that's the easiest way to center this text.

[3:49] Our server panel's looking pretty good. Let's come back to Discord and look at the channel selector. Because these channels are all different lengths, we can go ahead and use a fixed width on this panel right here regardless of the content. If we inspect this, we can see that this is 240 pixels.

[4:08] Back in our clone, let's come to our channels panel. We'll use w-60 to get this to be 240 pixels. If we come back and make this a little bit smaller here with the inspector, we can see that we still have the behavior where our main panel is flexing to take up the additional space, but our server and channel selectors remain fixed.

[4:32] You can see that Tailwind's default spacing scale is nice to work with. Every unit on the scale is four pixels, and it's used across a lot of the common utilities, like padding, margin, width, and height. Looking back at the channel selector, we see that there's this fixed header here.

[4:48] As we scroll the channels, this part takes up the rest of the space. Again, we have a good situation for Flexbox here. We want this entire panel to be a new flex parent, this to be a fixed height, and this part to flex to the available space.

[5:05] Let's take a look and see how tall this is. It's 48 pixels. We'll come back to our channels here and drop in two new divs, one for the header and one for the header and one for the channels. Again, we want to make the parent a new flex parent.

[5:23] We'll see that, by default, the direction is row, so these are laid out next to each other. We want these to be on top of each other, so we'll use flex-col to change the direction to column.

[5:36] Now, let's give our channels a background of black, so we can see this layout as we build it. First, let's move the padding off of the parent. We'll drop it right here. We'll also drop it on this panel. Now, we can see we have our two panels right here.

[5:57] It would be nice if conceptually this channel's part stretched to fill the remaining space, even though we don't have a lot of content in there right now, again, because that is what's going on in Discord. We can do that like before using the flex-1 utility. There, it stretches out.

[6:18] Let's remove background black. We can add a bit of shadow here to the header using the shadow-md utility. Now, we have a nice little header treatment here with a channel's panel that's ready for the rest of our content. If we look at the main panel, we'll see it's a similar treatment with this header, a little shadow, and then a scrollable main area.

[6:42] Let's copy this treatment, come here, remove the padding. We'll put general here and messages. Again, we can drop a background black on our messages to see that, right now, it's not filling up this whole space. If we make this a flex parent and a flex-col, it should do the trick.

[7:11] Now, if we resize this, we'll see that everything is flexing in the right direction. The things we want fixed, like the header and the width of these two panels over here, are staying the same. Flexbox is doing a good job of laying out the rest of these things for us.

[7:30] That's how I think about using Flexbox for app layouts. The Tailwind utilities make it easy to tinker around because these little utilities are just doing one thing. It's easy to pull them on and off different panels, and it's also a great way to practice and improve your skills with Flexbox.

https://app.egghead.io/api/v1/lessons/tailwind-scaffolding-a-multi-panel-app-layout-with-flexbox/transcript

https://app.egghead.io/api/v1/lessons/tailwind-making-panels-scrollable-with-flexbox/subtitles

Instructor: [0:00] Let's make all these panels scrollable. We'll start with the server selector right here. Back in our app, we can see right now our padding is a little bit bigger. First, let's tweak these padding values. We'll go ahead and bring them all down to padding 3. Now, our servers panel here lines up exactly with Discord.

[0:20] We want to add a few more dummy servers here. We can use a little trick to do this. We'll create a new array of length 40. If we spread that into an empty array, we can map over this just like this. That's an easy way to generate some dummy data.

[0:44] We can use the space-y-2 utility here to add some space in between each one of these servers. Let's grab the index from this map() function right here. We'll drop that just like this so we can have some different data to work with.

[1:02] Now, we see that our servers here are overflowing our application. By default, that's exactly what Flex is going to do. We can come to our parent here and add an overflow-y scroll to make it so that anything that goes beyond the constraints are just going to scroll.

[1:21] Now, we can see that right here, the application is still constrained to the window, but our server list scrolls, just like it does in Discord. That's pretty simple, and that is the basic idea behind making these Flexbox panels scrollable.

[1:38] Let's move on to our channel list here. Over in Discord, the fixed header right here is 48 pixels tall, and then the rest of this channels list is what actually Scrolls. Back in our app, we can see that the header is also 48 pixels, but it just happens to be because of how we're using this padding.

[2:01] Instead, let's remove the vertical padding. We'll give it a fixed height using h12, which is going to give us that 48-pixel height. Now, we want to center the text, so we'll use flex-item-center. Now, our heading is locked in place at 48 pixels no matter what the contents are here.

[2:21] Let's grab this 40-element treatment here and come in our channels panel and basically do the same thing. Here, we'll go ahead and put in our channel. We'll drop the index here so we can see what's going on. Now, you'll see that our Flexbox layout has shrunk our header to make room for all these channels here now that they're taking up all this space.

[2:47] In Flexbox, we can tell it not to shrink the header using the flex-shrink- utility class, and that will always reserve these 48 pixels for our header. That's looking a little bit better, but our channels are still overflowing our layout here.

[3:03] Let's do the same thing we did to our servers, come to the parent and add overflow-y scroll. Now, our channels should be scrollable, just like our servers are over here. We can do the same thing and add a little bit of space so that this matches Discord a little bit better.

[3:25] Once we tell our layout that this div should be scrollable, we can remove this flex-shrink- right here because it's smart enough to know, "Hey, we're already scrolling, so we don't need to take up any more space from this header."

[3:38] I wanted to show you that, in case you have static panels that aren't scrollable, again, it's good to get practice with the different Flexbox utilities so that you can achieve any layout you want. Let's copy the same treatment here over in our main area. We'll make this padding only in the X-direction. We'll give this a fixed height, and we'll make this flex-item-center.

[4:05] We'll go ahead and copy this array treatment. We'll call this message 1, add some lorem ipsum text right here. We'll add a bit of space between each message. Again, we can see the messages list is taking up extra space from the header. As soon as we add overflow-y scroll, the header should get that space right back.

[4:34] This is pretty cool. We have these three independent scrollable panels, and each one is taking up extra space in the system, exactly as we would expect. The scrollable panels get the extra vertical space, and, again, just like from the last video, this main area is taking up the extra horizontal space with our server and channel selectors being a fixed width.

https://app.egghead.io/api/v1/lessons/tailwind-making-panels-scrollable-with-flexbox/transcript

https://app.egghead.io/api/v1/lessons/tailwind-customizing-tailwind-s-color-palette-with-your-brand/subtitles

Instructor: [0:00] Let's start customizing our color palette by inspecting this screen from Discord. We'll start by looking at the server list over here, which has the darkest gray in the app. I'll come and find that background color, grab the hex code. Then let's pop over to Figma, and I'll drop a rectangle in here and make the background color that dark gray.

[0:24] I'm going to keep going until we basically have all of the grays from the app. Once we do, we're going to end up with something like this. We can see I pulled these seven different grays from the backgrounds and text colors of the main Discord screen.

[0:40] If you're starting a new project, have a chat with your designers upfront about using a limited color scale. It'll make them happier because their designs will be perfectly implemented and it will make you happier because their designs will be easier for you to implement.

[0:56] Next, we'll go ahead and arrange all of these seven grays by their shade. Tailwind's color scale has 10 values which is a good amount to build a real-world UI. I've gone ahead and arranged these from the darkest ones I found to the lightest, leaving some gaps for the missing values.

[1:14] We can go ahead and fill in those missing values ourselves. Unfortunately, there's no good automated way to do this. We'll just use our eye to do our best. Now that we have all of our colors, let's go ahead and bring them into Tailwind. I'll bring code over to our screen with the browser.

[1:36] Here, we can easily see Discord's color scheme and our current clone which uses the defaults. The colors are looking quite different. What we're going to do is open up our Tailwind config where we see this default object with a theme key and extend.

[1:53] Here, we get to choose whether we want to restrict our colors to only the ones that we list out or if we just want to extend Tailwind's defaults. For this one, let's go ahead and extend the defaults. We're extending the colors module and within that, the gray color. Right here, we can paste in our values from Figma.

[2:14] Just like magic, we can see all of our grays have been updated. They're still a little bit off because we are using the wrong values. Let's come back to our index. The server selector here is gray 900. The channels are gray 800. The main area is 700. The default text here is gray 100. Then our channel titles are text-gray-300. We also have this variant where we have an unread channel, which is going to be text-white.

[3:00] With those changes, we're a lot closer to matching the brand directly from Discord, and we're in a great spot to keep building out our UI. The great thing about this hundreds-based number scale is that it accommodates new colors if your designers come back with changes.

[3:16] If you need a new shade between 600 and 700, you can define a 650. Don't be afraid to use one-off colors here and there for parts of your UI that aren't coupled to your design system. Things like callouts on marketing pages are a great use case for those.

https://app.egghead.io/api/v1/lessons/tailwind-customizing-tailwind-s-color-palette-with-your-brand/transcript

https://app.egghead.io/api/v1/lessons/tailwind-adding-custom-fonts-to-tailwind/subtitles

Instructor: [0:00] To customize our app's typography, we need to start by loading the fonts we want to use. Discord uses two fonts. One is Whitney for the base text, which we can see if we hover over one of these elements. This will show us that the base font is 16 pixels and Whitney.

[0:19] Then we have some title fonts here. Right here, we're using Ginto. Over in our app, we'll add Ginto and Whitney, but because they're premium fonts, we'll also add Open Sans as an open-source fallback.

[0:33] The first step is to load the fonts. I'll come over to my desktop, where I have the fonts here, and then I'll drop them right here in my project's public folder. You can see, we have one weight of Ginto, and we have four weights of Whitney.

[0:49] Next, I'll create a styles.css file, and I'll paste in all the @font-face rules. Then, because this is the next project and I want these styles available globally, I'll just come over to myApp.js and import my new style sheet.

[1:09] At this point, nothing's changed, but if we've wired this up correctly, we should be able to just drop a <div> right here and set the font-family directly on the <div style attribute="Whitney">, and see a change right there. Indeed, it looks like Whitney is now rendering here.

[1:31] Similarly, if we were to use Ginto, we should also see that work as well. Now, let's come over and make a new file called document, which is where we'll load our open-source fallback. In Next.js, the base document looks like this, which just gives us a <head> tag here.

[1:50] Because the Open Sans font is on Google fonts, all we need to do is just paste some <link> tags that we got straight from Google fonts. You can see right here we're loading the Open Sans font.

[2:03] If we come back to our app and try out Open Sans, we should see yet another font right here. Indeed, we do. All three of our fonts are being loaded into our project now. There's lots of ways to load fonts depending on what tools you're using.

[2:20] Now that our fonts are loaded, we can customize Tailwind to consume those fonts. The way to do this is to head on over to tailwind.config. Under Theme extend, we're going to extend the font-family module.

[2:37] By default, Tailwind applies the Sans font-family to our whole site. If we just overwrite this with Whitney, then like magic, we'll see all of this text default to Whitney. That's exactly what we want, so that's a great starting point.

[2:57] It's best practice to specify fallback fonts in case users can't get your preferred font for whatever reason. We can do that in tailwind.config using an array. After Whitney, we'll go ahead and add Open Sans.

[3:12] Let's just say you're not using Whitney and Ginto, or the user couldn't load it. We'll just comment out this import as if these fonts weren't loaded, and we'll see here that now Open Sans is being rendered.

[3:26] We can verify that by inspecting one of these elements, how many computed, and seeing that the rendered font right here is Open Sans. We'll go back to Whitney.

[3:41] Just to button this up, we actually want to add the rest of Tailwind's default Sans stack to the end of this list. Basically, we just want to append Whitney and Open Sans to the default stack.

[3:51] We can do that by coming up here and importing the default Theme directly from the tailwindcss npm package. Then down in our Sans declaration, we can splat the array of the defaultTheme.fontFamily.sans.

[4:14] We're still seeing Whitney rendered, but to verify our fallbacks made it through to the actual CSS declaration, we can just take a look and see what the font-family rule is for this element.

[4:28] There we see it's Whitney first priority, then Open Sans, then UI Sans Serif, and the rest of the default stack. We've updated the base font that's used for all of our text in our app, but we have one more font to add.

[4:42] Let's come back to our tailwind.config, and we'll just define a new key here. This can be whatever we want. Let's call it 'title' since it's used for titles in this app. We'll basically do the same thing.

[4:54] We want to use Ginto first, Open Sans second, and because Ginto is a Sans font, we'll go ahead and grab the default Sans stack as well. These keys give us the font Sans and font title utility classes.

[5:14] We didn't have to explicitly use Font Sans because Tailwind applies it to the root. If we go ahead and open our index page and find this piece of text right here, now we can add font title. Let's go ahead and add font title.

[5:31] We can see right there the IntelliSense has already picked up our custom key. Just like that, now we have Ginto as a title font in our app. If we alt-tab back to Discord here, we can see our clone is starting to look much more like the real thing.

[5:52] It's pretty incredible how much of an effect these fonts have on your UIs. We can even see the server title in Discord is white. The channel titles here are using a slightly bolder font weight. Let's try font medium.

[6:16] Again, just some tweaks to show you that Tailwind is an engine for creating your own app's design system. Here we are able to match this production app perfectly so far.

[6:29] Just because Tailwind ships with default values for typography, doesn't mean you should be afraid to customize them on your own. Being able to tweak Tailwind exactly in the way you need for the UI that you're building, is one of my favorite things about Tailwind.

https://app.egghead.io/api/v1/lessons/tailwind-adding-custom-fonts-to-tailwind/transcript

https://app.egghead.io/api/v1/lessons/tailwind-building-a-hoverable-server-selector-with-svg/subtitles

Instructor: [0:00] To start improving our server selector, let's focus on just this first button here, the Discord button. I'll come over. I'll grab this div, and I'll comment out all this dummy data right here. We'll start with one plain div.

[0:19] Now, over in Discord, if we inspect this, we'll see that the background here is 36393F. If we pop open our Tailwind config, we'll see that that is gray 700. Let's go ahead and change this background white to background gray 700. Looks good.

[0:46] Now, we see that the inside of this is this Discord logo right here, which, if we look in our inspector, is this SVG icon. SVGs work great directly with Tailwind.

[1:01] I'm actually just going to copy this icon directly from the inspector and I'm going to use this little website that I like to use called transform.tools. We can just paste in our SVG right here, and this gives us a React component.

[1:21] Of course, you can use any tool you like to get an SVG into your app. For this, we can just go ahead and paste this component right here in our project. I'll rename this to Discord icon.

[1:36] Go ahead and get rid of this class name, and we'll actually also delete the hard-coded width and height here. Now back in our clone, we can come up to this first button and go ahead and render the Discord icon inside of this div.

[1:56] If we zoom in, we can actually see the Discord icon there, but it's a little dark and too big. First, let's fix the color. The color is actually coming from this text utility right here. Right now, it's gray 800. I could make this text white and we'll see that that makes the icon white.

[2:15] That's actually because down here, we're using the current color for the fill attribute on our path. This is a good property to use because it lets us style our SVG icons just using plain old color utilities from Tailwind.

[2:32] We can make this red 500, and we'll see it's red, and so on. If we pop over to Discord and inspect the icon, we can take a look at the computer property here and see that the color is actually this DCDDDE color.

[2:57] Again, back in our Tailwind config, we can see that that corresponds to gray 100. If we switch back to our clone and make this text gray 100, we should be matching that color perfectly. Now let's fix the size.

[3:15] If we take a look at this SVG, we can see that the size is 28 pixels wide by 20 pixels tall. We can actually come straight to our icon and add a class here. We want the width to be 7 which corresponds to 28 pixels, and we want the height to be 5 which corresponds to 20 pixels.

[3:41] Now our icon is sized perfectly. Next, let's take a look at the hover treatment. We'll see that when we hover in Discord, the color turns to this brand Indigo here and the border radius changes as well. Let's start with this color. If we inspect, we can see that this color is 5865F2.

[4:06] Let's come over to our config to find a new brand color and type in 5865F2. This will give us the Discord brand in our color palette. We should be able to say hover background brand. Here's Discord and here is our clone.

[4:30] Finally, we'll also see that the Discord logo itself actually transitions to white on hover. We can achieve that using hover text white. Now our colors look great. In Discord, we actually noticed that the colors transition smoothly as we hover over the icon.

[4:57] Well, we can do that in our clone here as well just by adding the transition class. Now we see that there is the subtle transition of our colors when we hover them.

[5:13] If we take a look at this class, we'll see that this applies a transition to these common properties and it gives us this nice default timing function along with a duration of 150 milliseconds. 150 milliseconds feels a little bit fast compared to Discord.

[5:31] We can tweak these defaults using other utilities. Let's go ahead and use the duration utilities to slow this down from 150 to 200. That feels much better.

https://app.egghead.io/api/v1/lessons/tailwind-building-a-hoverable-server-selector-with-svg/transcript

https://app.egghead.io/api/v1/lessons/tailwind-transitioning-rounded-corners-using-the-jit-compiler/subtitles

Instructor: [0:00] Now let's work on the border radius. We can see that in Discord it goes from this circle to this nice rounded rectangle. Right now, we're using rounded full for the circle. Tailwind comes with a bunch of default rounded classes here.

[0:19] This one's a little bit too small so let's take a look at what we have. We can go up to medium or large. This looks a little bit closer. Still, too small. Extra large and 2XL. 2XL looks spot-on. We actually want this to only apply on Hover.

[0:42] We want to start with a circle and then apply that 2XL rounding on Hover. Let's go back to rounded full and then we'll say Hover will use rounded 2XL. Doesn't seem to be taking effect. Now this is happening because this Hover prefix, by default, only applies to certain modules inside a Tailwind.

[1:07] We could fix this by going over to the config and configuring the Hover variant to work with our border radius module or we could actually just enable the just-in-time mode that comes with Tailwind in versions 2.1 or later.

[1:23] We can do that by defining a new mode key here and just typing in JIT. Once Tailwind recompiles, we actually see that border radius taking into effect on the Hover interaction.

[1:40] The JIT mode is a really nice addition to Tailwind and it saves us from having to configure a bunch of stuff that we used to have to do on our own. Now there's one more problem here. We see that the color is transitioning smoothly, but the border radius actually isn't.

[1:55] That's because this default transition class only applies to this limited set of properties by default. Fortunately, there's another convenient class called transition-all, which transitions all properties, which we can see just by hovering this right here.

[2:12] This should actually apply our transition to the border radius, but something still seems off here. Let's pop open our inspector. Let's come and take a look at the animations tab.

[2:29] If we go ahead and hover over our button, slow this down to 10 percent, and then click on this animation, we can actually grab this handle and take a closer look. It's clear that our colors are transitioning smoothly, and it looks like the border radius is doing something here.

[2:50] Then as we get towards the end, we can actually see it working, but it's definitely not doing what we expect. Now the reason for this is that our rounded full class, the way this is implemented, is actually by setting the border radius to 9,999 pixels.

[3:09] This is just so that when applied, this utility would make any element a perfect circle. Transitioning from this super high value just down to 16 pixels, which is what rounded 2XL gives us, is not going to work right for our transitions.

[3:24] What we really want to do is transition just enough to make this a perfect circle so that our animations lineup. If we take away the rounded full, we'll go back to this square.

[3:38] What we need to do is figure out exactly how many pixels we need to make this a perfect circle. Well, we know that the width and height of this is 48 pixels because we're setting it right here using these two utility classes. Half of 48 is 24. 24 pixels should do the trick.

[3:56] Let's take a look at the included rounded utilities here. Lo and behold, rounded 3XL corresponds to 24 pixels. If we apply rounded 3XL and save this, we're back to a perfect circle.

[4:12] Now when I hover, this we get that nice smooth transition, which actually looks pretty dang close to what is in Discord. This is pretty neat that we were able to recreate this just using the Tailwind utilities that are included out of the box.

https://app.egghead.io/api/v1/lessons/tailwind-transitioning-rounded-corners-using-the-jit-compiler/transcript

https://app.egghead.io/api/v1/lessons/tailwind-conditionally-applying-classes-based-on-the-active-url/subtitles

Instructor: [0:00] Our server link is looking good, but we'll notice over in Discord, these links have two states. One when they're inactive, and we see the hover treatment, and then again, when they're active, this active indicator goes full height, and we don't have the hover effects anymore.

[0:18] To get started on these details, we need to add another server icon to our clone. Let's start by copying our Discord link. We'll put in s1 for server1 like this. We can see, right now, it has the same treatment as our first one. Now, we want to make these links to actual pages. For that, we'll need a new page for server1 here.

[0:45] Let's come over and create a new page, servers1.js. For now, we'll export this simple paragraph tag. To link to this page from our server NAV here, we can come back to our home page.

[1:02] Go ahead and import link from next link, wrap our new div inside of a link with an href of /servers/1, and then turn this div into an <a> tag. With any luck, we should be able to click this and see our new page.

[1:22] If we pop open the address bar, we can see here the URL has changed. Now the problem is, we've lost our persistent server navigation here. We actually want to hoist some of our code here to our route app component, so that it can serve as layout code.

[1:39] Let's grab this route div along with our server selector. Copy that and then over in _app, we can find the page component right here. Paste in our layout code with another closing div. Let's go ahead and move our page component inside of the layout.

[2:02] Now we see we need to grab our Discord item. Let's come back to our index. Copy our icon. Let's also come and grab the link import and paste that up here. We can see our layout here is being rendered twice.

[2:24] That means over in our home page, we actually don't need any of this layout code and our route div doesn't need to be this flex high screen anymore. We can just go ahead and delete that, remove the link, and remove this Discord icon.

[2:39] Now our app looks good again, and if we click this link, we actually see our page here inside of the layout.

[2:47] Let's finish up by turning our first button here into a link to the home page and we'll just repeat the same process. Wrap this in a link. Give it an href of /, and turn this div into an <a> tag. Now both links work.

[3:05] This means that we're ready to use the current URL to conditionally apply styles to each one of these server links in our NAV. To try this out, let's come back to our app, import the useRouter hook from next router. We'll go ahead and get the router right here.

[3:24] Then we'll come down to our anchor tag, turn this class name into an expression, and change these quotes to backticks so that we can use dynamic variables for our class name here. If we embed an expression and we check whether the router.path name is equal to /.

[3:47] Well, that means we're on home page. We'll apply these classes. Otherwise, we'll apply these classes. We can move our Hover classes here, which we only want to apply in the inactive state to this second block.

[4:03] We also want this text grey 100, and this background grey 700, and this rounded class as well. We've moved the particular parts of our treatment for the inactive state to the second half of this ternary expression.

[4:24] With any luck, when we're on servers one, we see our original treatment, but when we click the home link, all that goes away. Now we can actually just apply the actual active treatment based on what's in Discord.

[4:39] That's basically going to be these three classes that we're using with the Hover prefix in the inactive state. We want rounded 2XL, background bland, and text white. Save that, come back to our clone. Now we have the inactive state and then the active state.

[5:00] This is really starting to feel much more like an app.

https://app.egghead.io/api/v1/lessons/tailwind-conditionally-applying-classes-based-on-the-active-url/transcript

https://app.egghead.io/api/v1/lessons/tailwind-building-the-active-server-indicator-using-group-and-transform-utilities/subtitles

Instructor: [0:00] Let's finish up our Discord button here by building the active indicator. We'll start when our button is inactive. To build this, we'll use an absolutely position div right here.

[0:11] Let's come back to our clone and start just by turning this anchor tag into a div, wrapping it with an A, and we'll make this anchor tag relative, and we'll add a new absolute div right here. This will be our bar. In Discord, it's this white bar over here.

[0:32] Let's just start by making it background white, and we'll give it a width of two and a high of two. There we can see the beginning of our status indicator. Now we need to move this over.

[0:46] We can position absolute elements using utilities like top one to move it down from the top, top two to move it further, or even left one and left two.

[0:59] This offsets the element from the left side, but we can actually stick a negative sign right in front of this to invert this value. Left one moves it over by one unit on the spacing scale, left two, two units, and so on.

[1:14] The cool thing about Tailwind spacing scale is that all these spacing utilities use the same value. We can see right here that we're using a padding of three units to account for this space right here.

[1:26] If we make this negative left three, our bar lines up perfectly with the left side of the screen. We want the status bar here to center in our button, just like it does in Discord. My favorite way to center anything in CSS is with flexbox.

[1:45] Let's go ahead and make a flex parent, and we'll pull the absolute class and the negative left three class up here. Then let's come over here and inspect our new container. For this to work, this will need to actually fill the whole height of our link button right here.

[2:06] If we hover over our link, we'll see it's not really taking up space in the Dom the way we expect. That's because we're using an A tag, which is in line. If we make this block, now we'll see when we hover this, this is actually taking up this full space.

[2:26] With any luck, if we make this height of 100 percent, we can see now that this is a full height. Let's come over to our flex container, make it height full. Now we should just be able to use item's center to center that bar. It works. Now let's work on the size of the bar.

[2:49] Over in Discord, we see it's a little bit narrower, so width two, let's bring this down to width one. That looks pretty good. Then for the height, well, it's a little hard to match right now because in Discord, these corners are rounded.

[3:07] If we just come here and add rounded to our bar, this is not going to work because it's rounding all four corners. Fortunately, we can use the rounded R-class to round just the right side. Now we're back in business. Let's increase the height here a little bit.

[3:24] Three, four, still a little short, five. Five seems to do the trick. Now let's work on this hover treatment. We can see in Discord when we hover the button, the indicator here scales out and fades out. Then it scales up and fades in when we mouse over the button.

[3:46] Let's get the fading out working first. We can use opacity zero, hover opacity 100. Now when we hover the bar, we see it pops in, but it's not fading in. We can achieve that easily using transition all and duration 200 to match our treatment down here on the button.

[4:11] Now we have this nice fade in effect. Of course, in Discord, the bar doesn't fade in when we hover over the bar, it fades in when we hover over this link. Fortunately, Tailwind has our back here.

[4:23] If we want to trigger a class when we hover over some parent element, we give that parent element the group class, in this case our anchor tag, and then we just change this hover to group hover. That's going to be all we need to do to actually trigger this to fade in.

[4:43] Now we can see when our button transitions, our bar fades in as well. You'll actually notice there's a little discrepancy here. When we hover over this link, which takes up all this space, we're getting the fade in effect on our bar, but we're not getting the transition on our button.

[5:00] That's because the hover classes on this div are just using hover. If we switch them to group hover, that should fix that as well. If we hover any part of this parent link, we get everything fading in and transitioning nicely, just like you'll see happen in Discord.

[5:17] The next part is this scaling effect. We'll see that the active indicator here scales down towards the left when we mouse away from the button. Well, we can achieve that pretty easily using Tailwind's scale utilities.

[5:31] Let's start it off at scale zero, and when we have the group hover, we'll apply scale 100. Now this is scaling in and out, and it looks almost right, but there's something a little off.

[5:49] If we come here and find duration 200 and slow this down just a little bit, we'll see that as this is scaling, it's actually scaling about the middle of the container and that's not what we want. We want that left side to hug the left side of the page.

[6:08] This is because the transform origin by default is the center, but we want it to be left. We can use origin left to set the transform origin here to left. Now, if we hover over this, we'll see that this is working exactly like we expect. Let's change this duration 1,000 back to 200.

[6:33] Now this is looking really nice. Let's work on the active state. In Discord, once we click this button, we see the height of the bar basically grows a little bit, and it transitions smoothly, just like that.

[6:49] Let's do the same thing we did before and use an expression here for our class name, so we can apply different styles based on whether this button is active or not. I'll come here, turn this into an expression, and turn these into template strings, so we can use our variable here.

[7:12] We'll say router.path name is equal to the home route. We'll apply some classes. Otherwise, apply some other classes. Let's just grab all the classes for our inactive state. We know the height is going to be five. We want the scale to be zero.

[7:32] Then we want the opacity, the group hover opacity, and the group hover scale to come along here as well. If we take a look at this, we should have our inactive state back, but when we click on this, the bar goes away because we have no height.

[7:51] We can get it back to five, but that's not quite right. Let's pump it up to 8, 9, and 10 looks spot-on. Now we got the hover treatment here, and then we click, and look at that, the bar grows just like Discord. There's one final detail we're missing.

[8:19] Notice in Discord when we hover and click, if our mouse is pressed down, we get this little nudge downwards, and then we let go, and it nudges back. Our clone doesn't have this yet, but we can achieve this using the translate utilities that come with Tailwind.

[8:37] We don't want the bar to go down, which is what we've been working on here. Let's find the actual button. Right here at the end, let's add translate Y. This utility uses all the same values from the spacing scale, so let's just try one. You'll see that that nudges our button down.

[8:58] We only want this to take effect when the user's actually clicking on the button, so when the mouse is actively being pressed. This corresponds to a pseudo class in CSS called active, which we can use via the active prefix.

[9:17] Just like that, now we have this where when we click on it, the button translates down. Just a few more tweaks. First, we want that nudge to apply if we're clicking the link right here, not just this button. Let's go ahead and make this a group active.

[9:36] Now we see it nudges down even if we're outside of the bounds of the button. Second, if we pop over to Discord, we'll see this nudge is much smaller than our current nudge here.

[9:48] Fortunately, Tailwind has a few values below one, including a pixel value, which is just going to give us a one pixel nudge. That looks a lot closer. The final detail is that our nudge is actually transitioning because of this transition all class. Whereas in Discord, it's just a instant nudge. Let's fix this by just wrapping this button in a new div and moving our class here up to this new div.

[10:21] Since this doesn't have any transition on it, it should just give us an immediate nudge, and it does. That looks really dang close, and we've only used the default classes that come with Tailwind, so this is pretty cool. Let's take one more look zoomed out here.

[10:40] We'll take a look at the inactive state in Discord, and then over in our clone, looks really good. Then, when we go from inactive to active, it looks like this. Then in our clone. That is pretty awesome.

[11:01] I'm all surprised with just how far I can get using the default utilities that come with Tailwind, and we haven't even had to write a single line of custom CSS yet.

[11:10] Now you might be wondering about how best to maintain all this new markup that we've created to work well with Tailwind's composable utility classes. We'll be covering that in the next episode.

https://app.egghead.io/api/v1/lessons/tailwind-building-the-active-server-indicator-using-group-and-transform-utilities/transcript

https://app.egghead.io/api/v1/lessons/tailwind-solving-the-duplication-problem-with-components/subtitles

Instructor: [0:00] We've seen how easy it is to use Tailwind's utilities to build this custom UI, but now we have all this markup. If we want to repeat our treatment, we're going to have to duplicate it.

[0:11] We can see that this gets pretty unwieldy pretty quickly. Now, unlike other CSS frameworks, Tailwind doesn't attempt to solve this problem of code duplication itself.

[0:22] Instead, it encourages us to use whatever tools for code reuse that we already have within the framework that we're already using to build our app.

[0:32] This is a React app and the primary tool for code reuse is a component. Let's come down here and create a NavLink component, and we'll just return this markup that we have from last time.

[0:46] Up here, we can render a NavLink, and let's start to fill this out. First, we'll want to pass in the href, so we can use this with different links. We'll make that a prop here, use it for our link components, href, and we'll also change this to use the prop as well.

[1:11] Tthis component needs access to the router, so we can just come up here and grab it, and then paste it in our new component. Finally, we don't want to hard-code this Discord icon inside of our NavLink component because these are going to be different. Let's pass this in as children here.

[1:34] I'll just copy this, and down in our component, we'll render children instead, and we'll just grab this from our props. With any luck, we should see our second NavLink here, and it has exactly the same treatment.

[1:55] We can see if we're on the Home Route, it is indeed active. It's tied to the URL, and so that's all working nicely. Let's go ahead and delete this link. Let's replace this with NavLink and we'll just pass in S1 for the label. We'll see the same treatment here, and this one is tied to server/one.

[2:19] Just with a simple component here, we've already solved the duplication problem with all the mark-up we have without sacrificing any of the composability or the ease of use of Tailwinds API.

[2:32] If we need to change something, we can just come and change it directly here in the markup, and that's going to propagate through all of our uses of NavLink. Now, let's come over and take a look at Discord.

[2:42] We'll see that there is a little divider here between the dashboard and the first server. Let's go ahead and add that to our clone. I'll drop an HR in here. Now, let's match the color. If I inspect this and take a look, we'll see the color is this white with a six percent opacity.

[3:07] Over in our clone, we can add a class name to this HR and this is styled using border top so we can change the color with border T and then white to make it pure white.

[3:19] To add opacity to this color, we can actually use a little shortcut here, just a slash and you'll see here there's some values like 30 percent, but we want six, and six is not included in a default scale.

[3:31] It goes down to zero and five, but because we're using the JIT compiler, we can use this bracket syntax to put in any value that we want.

[3:40] We'll just put in .06, and now we've matched that color perfectly. Discord's bar is a little bit taller. Let's use border T and then we'll go up to two for two pixels.

[3:53] The corners here are rounded, so let's make it rounded, and then it looks like there's a little bit of margin on either side so we can use margin X for both margin left and right.

[4:07] Let's try mx-1, little bit too short, mx-2 and that does the trick. Let's zoom back out, and let's start working on these actual server images. I have these images right here in my desktop.

[4:26] I'll just come and grab them and then throw them into our public directory. Here, we see Tailwind Nest and Mirage.pngs.

[4:39] Over here, back in our app, instead of just writing S1, we can drop in an image tag and point it to servers Tailwind.png. It looks like our rounding is not taking effect.

[4:54] I think all we need to do here is come to our div with the rounding and just add an overflow hidden, and that should take care of it.

[5:05] Check that out, we've gotten this working with this completely new child that were passing in here. This one has a Discord icon, but here, we're putting in an image. Our treatment is working perfectly. Let's go ahead and delete this useRouter because we don't need that anymore. Let's spruce up this page a little bit.

[5:27] I'll come to our home page. I'll grab this, and we'll just go to servers one here, call this the server page. I'll just call this server one for now, so that we can actually see this full layout. Then, back on our home page, let's just call this dashboard. Let's change general to friends. Let's get rid of these channels and let's just get rid of all this content right here.

[6:00] Now, we've got the home page, server one. Now what I want to do is make this server page dynamic, so we don't only have one, we can have many different server pages. The way we do this in Next is just to come over here and rename this one.js to a variable, we'll call it SID for server ID using brackets.

[6:23] Then, we can come and grab the router from use router. Right here, instead of server one, we'll render router.query.sid. This is going to point to this variable that is from the URL. Now, server/one works, but if we go to server/two, that works as well. Now, we can put any number here for a dynamic server page.

[6:50] Our Home button still works. If we visit server one, we'll see we've actually broken the active state. Let's come back to our app, and come down here and take a look at this router.

[7:04] If we pop open the console, and we take a look at this. We'll see that we're using path name, which now that we have a dynamic page, is actually pointing to this file right here. That's not going to resolve to the same thing in the URL. We actually want is asPath, which is going to include that variable right there.

[7:26] All we should need to do is change this check from pathName to asPath to determine, whether we should conditionally apply these classes when the URL is active. There we go, we can see that it fixed it and now we have our NavLink working again, even if I swipe back and forward or use the forward and back buttons.

[7:49] Now for the fun part, let's close the sidebar, close these pages. Up here in the top of our app, I'm just going to paste in some server data, which points to the three images in our servers folder.

[8:05] Now, for our NavLinks, let's go ahead and grab the servers and call .map for each server, and render a NavLink for each one. We'll change these quotes to back ticks, make this an expression and render the server ID right here and we'll change these to back ticks, use brackets, and render the server.image right here.

[8:38] This is specific to React. We also want a key prop here. This just lets React keep track of which NavLink is which. If we save that with any luck, we're going to have three server indicators here.

[8:52] I'll get server one, server two, and server three. Notice that, this treatment is all working exactly how we expect. Again. I can swipe forward and back. I can use the back buttons. Everything is derived from the URL State. We're rendering the images, and this is pretty cool. We're matching this thing basically pixel for pixel here.

[9:14] Again, we have not had to step out of our markup at all. This just shows the power of how productive you can be staying in the markup and really embracing Tailwinds composable classes here. Note that we haven't had to go outside of React's paradigm at all.

[9:30] The only thing we had to name was this NavLink, but we didn't have to come up with a bunch of classes like NavLink wrapper or container and explain any CSS architecture decisions to the rest of our teammates.

[9:40] This is just a good old bread and butter React component. Any React dev who's working on this project will be able to take a look at it and understand how it works. This is really the best way to manage the coupling between your classes and your markup.

[9:56] It's just to embrace whatever abstraction you already have for code reuse and you can see here we have no more duplication on this page.

https://app.egghead.io/api/v1/lessons/tailwind-solving-the-duplication-problem-with-components/transcript

https://app.egghead.io/api/v1/lessons/tailwind-building-the-server-header-using-arbitrary-values-from-the-jit-compiler/subtitles

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.

https://app.egghead.io/api/v1/lessons/tailwind-building-the-server-header-using-arbitrary-values-from-the-jit-compiler/transcript

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.

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

https://app.egghead.io/api/v1/lessons/tailwind-identifying-repeated-patterns-while-dynamically-generating-the-channel-list/subtitles

Instructor: [0:00] Now that we have two channels here, let's keep working on filling out the rest of this sidebar. We're going to start with this Tailwind CSS category title. Our current div that wraps our first two channels is right here. We can start with a new one right down here.

[0:15] We'll make this category title a button and we'll call it Tailwind CSS. We also have this Arrow icon right in front of it. If we come over and take a look at this, we'll see this SVG is 12 by 12. We can slap on a width three and height three just like that.

[0:37] We'll make this a flex and item center. Our button's rendering. If we take a look at the typography here, we'll see that this is 12 pixels. Actually, it's our Ginto font, which is our title font that we added earlier in the course.

[0:54] We can come to our button, use text extra small for 12 pixels. We'll use font title to get Ginto. That's looking pretty good. These category titles are actually all in uppercase and Tailwind has a class for that. It's called uppercase. That takes care of that. Let's work on the spacing here. Looks like we want to push it down a little bit.

[1:23] Let's just start with a little bit of margin top here. Maybe MT4. Looks like a little bit more. MT5. Let's throw a little bit of padding on this, maybe PX1 for padding in the horizontal direction. That arrow is over a little bit too far. Let's switch this down to .5.

[1:52] It looks like we need to push it down just a tad more. 5 is 20 pixels. Let's go with 21 for now. Now that arrow looks like it's lining up perfectly. We need a little bit of margin right on our Arrow icon. One looks like a little bit too much. Let's try .5.

[2:13] The beginning of the T in Tailwind is lining up great, but you'll actually notice the text here feels a little bit more stretched out. That's actually a typographic technique that affects the letter spacing.

[2:25] Well, Tailwind has a class called tracking which we can use to adjust the letter spacing CSS property. We have six default values here. Let's go ahead and make this just a little bit wider using the tracking wide utility class. We can see that stretched out these letters a little bit. That's looking really nice.

[2:49] Now we want to get these next four channels in. These have the same treatment as our first two. Why don't we grab this div with the spacing, come down right below our button, and just paste this in. These are going to actually use the Hashtag icon. We'll grab that.

[3:14] We'll change this to general plugins, and then we'll make two more copies for help and internals. Those new channels are rendering. We see we need a little bit more vertical space right here. We'll just come to this. Let's try MT1. Little bit off.

[3:40] Let's try five pixels and see how that works. That is pixel perfect. What I'm going to do now is open this data.JSON file that I put in the root of the repo here. This contains all of the categories and channels in the actual Discord.

[3:59] We're going to be able to render our UI from this data, simulating fetching data from a backend server. We can just pop up to the top here. Let's go ahead and get rid of this router and useRouter, and import data from data.JSON.

[4:18] What we want to do is identify the repeated patterns. We'll ignore welcome and announcements for now. Basically, every category we have, we have this title, and then we have the channels. We see that repeats a few times here. That all starts with this div.

[4:34] Taking a look at data, why don't we actually bring this right down here, just so we can see. We'll see, I put the data under this one key because we're on server/1. I'm going to come right here and we can say data1.categories.

[4:57] This is going to give us each of the category names. We see the first one has no label, but then we have Tailwind CSS, Tailwind Labs, and so on. The way we loop over data in React is to use .map. This will give us each category. Then we can use an Arrow() function.

[5:18] At this point, we basically just want to move this whole chunk of HTML right inside this loop. We'll go ahead and give this div a key of category.ID. Now we can replace this with dynamic data, so each category has a label.

[5:36] We'll say, category.label. Then here where we render all the channels for that category, we can go ahead and grab those directly off of each category because there's a channels property. Inside of this div we'll say, category.channels. Then we'll call .map again.

[5:56] This time we have a channel. Then we can just slot one of these A-tags in just like that, and we'll get rid of the rest because we don't need these anymore. Let's go ahead and key each anchor tag by the channels ID, and replace the text here with channel.label.

[6:22] Now we can see all of these channels are rendering from the data. Let's go ahead and get rid of our first two because we should be able to repeat these using our loops down here.

[6:36] We see that we're rendering an empty button because the first category doesn't have a label, just like it doesn't in Discord. We can just conditionally render this button in React by checking whether we have a category.label. If we do, we'll go ahead and render a button.

[6:58] We've got the channels here, but we have a little bit of a spacing issue. You'll see, we were using this margin top 21 pixels to take care of the spacing in between each category right here, and right here, and so on.

[7:13] We want to use the same technique we already used, where we use the space Y utilities, since that only puts space in between siblings and not above the first one. Let's come up to here, where we're wrapping each one of these categories.

[7:28] We'll just throw a space Y 21 pixels, just like that. That means we can knock it off of this button. That took care of that little bit of margin. We still have this margin 17, which looks to be a little bit too much. Let's bring this down 14, 12. 12 seems to bring it back in, right in place.

[7:55] That means we can just replace this with MT3. All of our channels are lining up pretty perfectly here. The only thing we lost was these unique icons for the "Welcome and Announcements" because we're just rendering this Hashtag icon in our loop.

[8:12] We'll see down here in our fake data that these two channels have this custom icon property, which we can use to render a different icon. In order to do this in React, we're actually going to change how we import these icons.

[8:25] Instead of importing them all individually like this, I'm just going to delete these and say, import star as icons from our component icons. This is going to give me a single map or object here, where the icons are all keys.

[8:47] If I go and find all of these icons and just say, icons.verified icon, we'll see that that properly renders our icons again. This is just nice because it's just a native JavaScript way to import basically a collection of named imports from a module.

[9:06] Now that we have this icon's namespace, the extra icon feels a little redundant. Why don't we just clean this up with a quick refactoring? We'll change these to remove that suffix and then we can grab all of these Delete icon from the end.

[9:23] We'll also pop over to our _app, where we're using the Discord icon, and just change this to Discord for now. We have this nice little API. We can just say, icons.IconName to render an icon. This is going to help us with our Dynamic Channel icon.

[9:42] What we want to do, just close this, is move this channel link into its own component. Function channel link. We'll just come up and grab this HTML, return it from our channel link, and render a channel link instead.

[10:05] We can see that this channel link needs the channel information here. We'll pass that in as a prop. Then we'll go ahead and key this again by channel.ID.

[10:21] This component now gives us an isolated space where we can actually use a variable called icon to set up a dynamic icon for each link. If the channel, which is the JSON coming from the server, has an icon property, then our icon will be icons channel.icon.

[10:42] Otherwise, we'll use the default of icons.hashtag. Instead of rendering this icons.hashtag, we'll just render our new dynamicIcon component. With any luck, we should see these two book and speakerphone icons, which we do. Look at that.

[11:04] We have this whole sidebar filled with dynamic data matching just great with Discord. Looks like we have a little bit of a scroll issue here. Probably because we're using margin. Let's go ahead and switch this to padding. That should take care of that. This is pretty neat.

[11:24] I just want to step back here and take a look at what we ended up with. When we were starting this, we had a lot of duplication with all the channels that we wrote, and your spidey sense might be going off saying this is a lot of CSS classes, a lot of duplication.

[11:40] We should probably start extracting some classes or extracting some components. As you saw, just through the process of generating this UI dynamically from server data, a lot of times you'll just take care of the duplication without even thinking about it.

[11:57] One thing I really want you to take away from this course, is that if you're new to Tailwind, you might have an urge to dry up your code to remove that duplication prematurely.

[12:10] You might look at some of your templates, see a lot of classes, and feel like it's going to be hard to maintain. After just a few days or weeks of working with Tailwind, you'll actually find a lot of duplication takes care of itself.

[12:22] Having all these classes co-located with the templates and components that are using them, keeping there, not extracting them out to a separate file or a separate abstraction, actually makes your code way more maintainable.

https://app.egghead.io/api/v1/lessons/tailwind-identifying-repeated-patterns-while-dynamically-generating-the-channel-list/transcript

https://app.egghead.io/api/v1/lessons/tailwind-styling-the-active-channel-link-with-a-new-dynamic-url-segment/subtitles

Instructor: [0:00] To style the active and inactive states of these channel links, we'll need the links themselves to actually change the URL. Right now, in our clone, the only links we have are these server links which change this part of the location.

[0:15] We want to introduce another dynamic segment to our URL hierarchy so that when we click on these channels, we get another param right up here. Ultimately, we want this URL to look something like /server/1/channel/1. That way, we can navigate two different channels.

[0:31] The way we do this nested routing in Next is to nest these dynamic segments. What we're going to do is put this page under a folder called SID and then channels. Then we'll call this page CID.js for channel ID. We'll see that VS code updated our import path.

[0:52] If we save this and then visit this new URL, we'll see we have our page rendered again. This is how it works in Next.

[1:03] Every time we visit this URL, we'll have access to both of these dynamic segments via the SID and CID router params. Let's close the sidebar and turn off wrapping here and come down to our channel link.

[1:18] To make these actually link to their respective channels, we need to wrap this anchor tag in a link tag. For this link, we can go ahead and import this from Next link. We can drop the key here. We didn't need that. We'll also remove the HRef and put it on this link tag.

[1:39] This will be an expression to something like server/1/channel/1. Now we can click these and we'll see it's actually rendering a link here which we can tell because Chrome is showing us the new URL. Of course, we want this channel to be dynamic.

[1:56] We'll just throw in our channel.ID that we're getting from this channel link prop right here. With any luck, we can click on these different channels and we can see in fact, the URL is changing. We can use the Back button and change that as well.

[2:12] This is how we'll be able to conditionally style these links based on whether they're active or not. Over in Discord, we can see the style changes when it's active, the text becomes brighter, and we have this background. We just need to know whether the link is active.

[2:27] We'll want to use our new CID variable, which in this case, is four. We can get it in the general case by saying, let router = useRouter, which we can import from next router. Then we can say, this channel link is active if the channel's ID is equal to the router.query.channel ID.

[2:51] We can come down to our anchor tag. Make this an expression. We'll just drop a conditional right here. If it's active, we'll use these classes. Otherwise, we'll use those. Over in Discord, we can see when the link is active, this text becomes pure white. We can see it right there.

[3:18] Let's say, if we're active, the text should be white. Otherwise, the text should be this gray 300. It doesn't seem like our active class is working. If we pop open the console, we can go ahead and log out the channel and we'll get the router.query.

[3:40] If we look, we'll see the channel has an ID of six. That's coming from the data that's generating the sidebar, and the router is giving us our CID and SID here. We'll see that it changes as we navigate.

[3:54] These are coming in as strings because any dynamic segment from a URL is a string, but our ID here is a number. When we're checking for active, let's just coerce these both to numbers. There we go. We see our active state. When a link is active, we also have this background.

[4:16] Let's take a look at this. If we check this out, we'll see it's 4F5, which is the gray 550 that we've been using, but the opacity level here is at 32. If we're active, we want the text to be white and the background to be gray 550 with a 32 percent opacity. Let's see if that works.

[4:39] Looks great. We still have the hover treatment in the base case, but we don't have any hover when it's active. We'll just grab these and move them to the inactive part of our conditional. Now we can see inactive, with the hover treatment, and then active.

[5:00] It's all tied to the URL. We can swipe back and that active state follows it around. We can use these and it all works. One thing that we broke is the active state on these server selectors. Let's go take a look at _app.

[5:16] Right now, these are checking for the path of the URL and seeing whether it matches what we pass in as the HRef. First, we can update this and just add channel/1 here.

[5:28] That way, when we click on this, we'll at least get to our good URL. As soon as we click off of channel one, we'll see that that active state goes away. We're still using the nav link for our Home button. We do want that to check against the HRef.

[5:44] This is correct for that. For these, we can just add a new prop here to give ourselves a little more control over when these are active. For this we'll say, it's active if this server ID parameter in the URL matches the server ID that we're iterating over.

[6:00] Again, if we look over here, we'll see that that just comes from this folder right here, which means we need the router again. We can just say, let router = useRouter. Then it's active if the router.query.SID = the server ID.

[6:18] Again, we'll go ahead and coerce both of these to numbers when we do that check. Let's save that, close our sidebar. Now that we're passing in active, we can come down here, expose this new prop. We'll say that active = active.

[6:40] If the caller's passed it in, we'll just use that or we'll just fall back to our default check where we compare the path and the HRef. We can actually use the new or assignment operator to do the same thing here. Let's update these to use active.

[6:59] There we see our active state is working again. We're in a good spot with the active state of our channel links. Everything's tied to the URL, like it should be, and this is working great.

[7:20] One point I want to make here is that when you start adding dynamic behavior like this, where you're using variables and building up a big class name, is to make sure that your utilities don't ever conflict with each other.

[7:33] If you were just starting this out, we had text gray 300 on the base string right here, and then you come and add active. Then maybe you say, "Oh, we want to make this text white. Otherwise, do something else."

[7:46] Your UI might actually work. When it's active, the text might go white. You'll notice that you'll be applying two text classes at the same time and this can lead to unpredictable behavior. Utilities are really best used when they don't conflict or overlap.

[8:03] It leads to much more predictable code because there's only one class that can be responsible for any given CSS property. If we remove this expression right here, and I were to add text gray 300 and text white like this, and save it.

[8:18] You'll actually see that the Tailwind Intellisense will give us an error, and it says there's a CSS conflict. Text white applies the same CSS properties as text gray 300.

[8:30] Especially when it comes to things like text colors or hover treatments, once you add more dynamic behavior, you really want to pull apart the different states and only apply the classes you need for each state.

[8:44] This is especially true when the states of our UI component increase to three or four or five. This is just a hard one lesson that I want to make sure and point out. It'll save you lots of time and make your code a lot more maintainable when using utility classes.

https://app.egghead.io/api/v1/lessons/tailwind-styling-the-active-channel-link-with-a-new-dynamic-url-segment/transcript

https://app.egghead.io/api/v1/lessons/tailwind-using-a-state-variable-to-add-unread-states-to-the-channel-nav/subtitles

Instructor: [0:00] Now that we have the active and inactive states covered for our channel links, let's go ahead and take care of this third state, the unread state.

[0:09] We can see over in Discord, when you select a channel that has unread messages, the treatment is exactly the same as when we navigate to a channel with no unread messages. There really are just three distinct states here, inactive unread, inactive read, and then active.

[0:26] If we come over and pop open the data that's generating our sidebar here in our clone, we'll see I've added this unread property to some of the channels in this file. That's because this is really persistent state. It's shared across instances of Discord.

[0:44] If you were to open it on your phone, read it, and then visit it on the website, it would go away. This is really persistent state. It's going to be attached to the channel. That's how we're going to be able to determine whether a channel is unread or not.

[0:57] Currently, we're just using this inline tertiary statement to switch between the active and inactive treatment. Whenever I get above two states for any UI component, I like to put these in a separate variable, just to make it a little bit more clear.

[1:13] Let's define a new variable called state. If this channel is active, this will just be the string active. Otherwise, if the channel has an unread property, we'll call this state inactive unread. Otherwise, this is going to be inactive read.

[1:34] We can define a new variable called classes, and this is going to contain our classes for each state of our link. We'll use the states as the keys. The first one will be active, the second will be inactive unread, and the last will be inactive read.

[1:55] Let's come down and grab our active state here and put that in active. This string of classes corresponds to inactive and read because that's the treatment that we gave these based on when we were working on this in the last video.

[2:12] We'll come here, grab these, and put them in inactive read. Let's take a look at the treatment for unread channels in Discord. If we highlight one of these, we'll see that it's just a pure white treatment.

[2:30] If it's inactive, an unread channel also has the same hover treatment as the other channels. We'll just make this text white and we'll grab this hover treatment for the background. We don't need this class because we'll see that the text doesn't change when we hover it.

[2:49] Now that we have our classes and the current state in this state variable, we should just be able to come down here and replace this with classes for the current state. Check it out. Whenever we have an unread channel, we get this new treatment.

[3:06] Still have the hover treatment, and we still have the active treatment. That's pretty cool. If we look over at Discord, we'll see that unread channels also have this extra little indicator here. We can build it very similar to how we built the server indicator.

[3:22] Let's come over to our anchor tag and make this relative. We'll just drop a new absolute div right here. Let's give it a width of two, a height of two, a background of white, and we'll use left zero so that it hugs the left of the anchor tag. We see our little box.

[3:42] Just like before, we have two units of space of margin right here. We want this to hug the left side of the column right here. We can fix this with some negative margin left of two, and that should do the trick. Let's go ahead and make the right side rounded.

[4:00] Rounded, right, and we'll use full since it's a full circle. This looks a little bit wide. Let's change width two down to width one. Look at that. That's spot on. We only want to render these if the channel is actually unread. We'll wrap this in channel.unread, and only render this div if it is.

[4:26] Looks pretty good. Over in Discord, when we click on this, you'll actually see that the unread indicator disappears when the channel is active. Instead of just being channel unread right here, we really want to use our state and say, if it's inactive and unread.

[4:46] We can just replace this with state is equal to inactive, unread. Now we see this indicator only when the channel is not active. That's pretty cool. One detail we missed was the active state. When we hover channel and we click, we see the background gets a little bit brighter.

[5:07] Then we let go, and it gets even brighter. That is the active CSS pseudo-state. We used it when we built this little nudge over here on these indicators. We're going to be able to do the same thing here. Let's just bring up our inspector, find which element activates that pseudo-class. If we click active here, we see that we get that brighter background.

[5:36] If we take a look at this, we'll see it's at 24 percent opacity, and it's 4F5, which is that BG gray 550. We also see it works on an unread channel and a read channel. Once the channel's active, there is no additional styling for the active pseudo-state.

[5:59] We should just be able to come here and add it to both of these, active background gray 550 at 24 percent opacity. Now whenever we click, we should see that little bit of brightness. That looks great. One last thing. Let's get the hover state on these buttons here.

[6:19] We can see that the text brightens up a little bit whenever we hover a category group. We can come and find this div right here, hover it, and then find the H2. We'll see that the color here is DCD, which is gray 100.

[6:42] Over in our clone, let's come find the button that contains the category. We'll add Hover Text Gray 100. There we go. Over in Discord, you'll see that this hover state, and the button itself, is clickable all the way over here.

[7:04] I think our button is in line right now, which is what buttons default to. Let's just give it a width of four. That should take care of that. Our channel list has all the little interactive bits and the pseudo-state's covered. It looks really good.

[7:21] It's matching Discord quite nicely and we've still managed to do this without having to write any CSS ourselves.

https://app.egghead.io/api/v1/lessons/tailwind-using-a-state-variable-to-add-unread-states-to-the-channel-nav/transcript

https://app.egghead.io/api/v1/lessons/tailwind-building-collapsible-categories-with-rotating-arrow-icons/subtitles

Instructor: [0:00] To build out this category toggling behavior, we'll see that there's actually two elements. First, when we close a category, we'll see that the arrow rotates to the right. Then second, we'll see that all red channels are no longer visible.

[0:15] To build this out in our clone, we first need to add some state. Let's grab the useState hook from React. We'll start out with an empty array here and we'll call this closed categories. Then we'll use set closed categories as the setter.

[0:37] Here is the button element that contains each category label right here. When we click on it, we want to run a new function we'll call toggle category, and we'll pass in the category ID. This is going to come from our loop right here.

[0:57] Let's go ahead and implement this toggle category function, right up here. This takes in a category ID.

[1:08] This will update the closed categories array right here. We'll call set closed categories. Instead of just passing in the new array, we want to use the function version here since the new array depends on the current value.

[1:23] We can pass in closed categories, and then an arrow function, and now we can write our logic. If the closed categories includes the category ID that were passing in right here, then we want to remove it. We'll return closed categories.filter.

[1:43] We'll only return categories whose ID is not equal to the category ID we passed in. Otherwise, we want to add this category ID to the array. We'll create a new array and we'll splat in all of the existing categories. Then we'll append our new category ID to the end.

[2:07] That should be it for the logic. Now we can actually use this array to update our UI. We have our arrow icon right here. Tailwind comes with some transform utilities we can use to rotate the arrow. We have some low numbers here, but then we can see, we have 90.

[2:24] That points the arrow to the left, but we also have -90 to point it to the right. If we look at Discord, whenever we close a group, we see that the arrow points to the right. We should just be able to make this dynamic by turning it into an expression. Then we'll just add a tertiary right here.

[2:46] If closed categories includes this category ID, which again is coming from this loop right here, we'll apply some classes. Otherwise, we'll apply some others. We'll just move this rotate 90 right here. With any luck, whenever we click a category, we see that we toggle the arrow.

[3:10] To get that transition in here, we can just drop a transition class, and we can see that rotates nicely. It looks like it's a little bit slower over here in Discord, so let's drop this duration down to 200. That looks pretty nice.

[3:32] Finally, let's go ahead and filter out the channels if we are viewing a closed category. We can do that right down here where we're looping over the channels. Right before we loop, let's add a filter here for each channel. Here's where we can write our logic.

[3:49] If we look over in Discord, we always want to show a channel if it's unread or if the category is open. Otherwise, we'll filter it out. First, we can see if the category is open. We're still inside the loop for this category, so we can say, closed categories includes the category ID.

[4:12] If this is true, the category is closed. If we invert it, we'll say that the category is open. Again, in that case, we always want to return the channel or we want to return it if the channel is unread. We should be able to say, return category is open or channel is unread.

[4:33] Let's check it out. If we close this category, we see we hide the read channels. That's pretty neat. These transform utilities, like rotate and scale, are really nice especially if you have animations on icons. You don't want to be swapping icons.

[4:49] You just want to be applying these handy little utilities to a single icon to achieve this result.

https://app.egghead.io/api/v1/lessons/tailwind-building-collapsible-categories-with-rotating-arrow-icons/transcript

https://app.egghead.io/api/v1/lessons/tailwind-building-the-channel-header-with-flexbox-shrink-and-truncating-text/subtitles

Sam Selikoff: [0:00] Now that we have our channel nav working over here, we can actually make this channel header dynamic. If we come over to Discord, we'll see a lot of elements here. Of course, as we navigate, they all change.

[0:11] The title updates, the description updates, and then we have these elements right here. Let's start with getting the title to be dynamic. Right now, we're rendering this static text right here in line 66.

[0:23] To actually get the title, we're going to again poke into our data.js file right here. We'll see that each channel has a label and a description. We want to use the channel ID in the URL in order to get that. I'll just paste in some code right here.

[0:42] This should look pretty familiar to what we've seen before. We're grabbing the router. We're going to go ahead and use the router queries server ID to get the server again, which is just a blob of JSON here for the current server.

[0:56] Then we're going to get all of the categories channels, flatten them, and then find the channel that matches the CID from the router. That will give us a blob of JSON that looks like this. This channel variable right here is going to have a label property.

[1:17] We can come back down here to where we were hardcoding this in and change it with channel.label. When we click around, we'll see that that title updates. At this point, we've built a lot of UI that looks a lot like this. I'm going to paste in all of these buttons and this text.

[1:38] We're going to focus on the interesting part, which is this description. Let's come back to our clone. Here's our label. Right inside this div, I'll paste in all this code. Let's see how it lines up. Looks like we have a little bit of extra padding here.

[1:55] Let's change this px-3 on the wrapper to px-2. It looks like these things are lining up with the exception of the search box and the description. Just take a look at what I pasted in. Again, this is pretty standard stuff at this point. We have a flex container.

[2:13] We're using items-center. All these elements line up nicely, vertically. We've got the hashtag icon with the fixed width and height. We have some typographic styles. Really nothing fancy going on here.

[2:27] We're wrapping all these buttons in a div and using margin left auto, which is going to create all of this margin here and push these far over to the right, which again works because we are in a flex container right here.

[2:39] Then we just wrap each one of these icons in a button and give it a little hover treatment similar to what we see on Discord. For the interesting part is we want this description. Not every channel has a description.

[2:53] We can see here, if it doesn't have a description, we don't actually render that little vertical line and the description text. If we do, we have this little divider here and then we have the text. Let's come down here below the hashtag and channel title.

[3:10] We'll conditionally render here based on the channel's description. Let's start with this little vertical line here, right there. We'll just make a div with a width of one pixel. This has a height of 24 pixels, which is h-6. If we throw background white on it, then we should see it show up.

[3:31] We'll also give it a little bit of margin. Then the background opacity here is actually .06. Now that little divider line matches up nicely, Let's use another div for the channel.description. Because we have these two siblings, let's go ahead and wrap them in a fragment.

[3:56] Here we see our description is rendering. This description is text-small, font-medium, and its text-gray-200. Typographically, that looks good. We also want a little bit of margin on this. Now we can talk about the actual layout.

[4:20] The text here is wrapping in order to try to squeeze into the space that we have, but we don't want that. We want this always to be on a single line. There's a few ways to control whitespace in Tailwind. We could use whitespace-nowrap. That'll force it all to be on one line.

[4:40] Ultimately, we want this truncation behavior that we see over in Discord. If we change the size of this, you'll see that as the window grows, this is really the element that's growing to fill the available space.

[4:54] It's also shrinking to reserve space for these elements right here, and right here, and to preserve the width of the two sidebars. If we come back to our clone, we'll see that our flexbox layout system has given more room to the description here.

[5:11] It's pushing off some elements here and it's also making our sidebar smaller. We never actually want that. We need to learn how to tell our layout which of these columns we actually want to grow and shrink.

[5:23] If we collapse these, we can see right here is our channel selector, right here is our main channel viewer. Then our server nav is in the app.

[5:34] With Flexbox, the way to do this is to use the flex-shrink utilities. If we put this on our third column here, we'll see that nothing happens right away. This is because a lot of this content is text, and text has a minimum width to it, which Flexbox respects.

[5:52] We need to tell Flexbox here that, actually, the minimum width of this column should be zero so that you can shrink down to it if you need to. Now that we've done that, we'll see that we are keeping the reserved space for the first two columns. This one has shrunk, so we're in a better spot here.

[6:09] The problem is, this line of text is still taking precedence and pushing our icons over. Let's find our channel.description again. If we were to come here and add overflow-hidden and save it, now, we'll see that our layout doesn't scroll at all anymore. Our icons are now lining up perfectly with Discord.

[6:33] Here, you can see just these last two. Again, we don't have the search bar right now, but you can see the space is being reserved for this div right here and this div right here, and this is actually the one that is flexing.

[6:45] Again, controlling layout with flex is all about marking certain elements as able to be shrunk. When we have overflow-hidden, that's going to tell our layout that you can go ahead and shrink this text note down however far it needs to go.

[6:59] Finally, we want to add this truncation behavior, which fortunately comes in CSS, and there's even a Tailwind utility for it. If we add the truncate class, we'll see that we now have the ellipsis. If we change this to be a little bit more dynamic, we'll see that that works perfectly here.

[7:20] If I hover over this truncate class, we'll see that this is applying overflow-hidden and whitespace-nowrap, which is basically exactly how we got to this treatment on our own. Then it's also applying the text-overflow: ellipsis class here.

[7:32] This is one of the only utilities that applies multiple rules because this ellipsis property only makes sense alongside these other two. That means we can remove our whitespace-nowrap and remove the overflow-hidden, and we'll have exactly the same treatment.

[7:53] We can play around with this a little bit. We can make it bigger or smaller. We'll see that this all works. All the spacing is reserved for every other element. If we come up here to Announcements or some channel that doesn't have a description, it won't render anything.

[8:07] Let's try to compare it here again and see where we ended up. This looks pretty good. Again, our size is off because of that, but everything is looking quite nice right now. Now, we've got this dynamic header almost completely built.

https://app.egghead.io/api/v1/lessons/tailwind-building-the-channel-header-with-flexbox-shrink-and-truncating-text/transcript

https://app.egghead.io/api/v1/lessons/tailwind-styling-the-search-box-using-the-forms-plugin/subtitles

Sam Selikoff: [0:00] The last thing to take care of in our channel header here is the search box. I wanted to make sure to cover at least a little bit about form controls because there's really only one trick you need to know.

[0:12] If we pop open package.json here, we'll see that I've already installed the Tailwind CSS Forms plugin. Once you install that, you've come to your tailwind.config. Come down here and add it to your Plugins array. This plugin effectively just applies some sensible defaults to all input fields in your app, making them just as easy to style with Tailwind utilities as other elements in your page.

[0:37] Let's come and see how it looks. We'll see that the search box goes right after the People icon right here. I'm going to come down, find People, and let's drop in a new div right here with an input field. We'll see it has sensible defaults for the input field, and it's easy to tweak with just normal Tailwind utilities. Let's drop a className on this.

[1:02] First thing we can see, this is dark. This has a background of gray-900. It also has no border. We can just say border-none. The height of this is also an even 24 pixels. We can make this a fixed height using h-6 for 24 pixels. The width is constrained to 144 pixels. If we come down here, we can go up and see 144 is included by default at w-36.

[1:46] Now, let's zoom in a little bit here so we can see the details. We'll also notice that there's a bit of rounding here. We can come and add rounded. We need a little bit more spacing around this. Let's add this to the wrapper div. We'll throw mx-2 right here. That's looking like it's lining up quite nicely. Let's go ahead and add this placeholder text of "Search."

[2:27] The way we style this placeholder text is just with the normal typography utilities. This is going to be text-sm and font-medium. It looks like it's a little bit brighter. Instead of text-gray, which is what would affect the actual text in the input, we can use placeholder. We'll see all the colors are available to us here as well.

[2:51] Let's try placeholder gray-300. It's a little too bright. Let's go to 400. It looks like there's a little bit less padding between the placeholder and the outside of the input. That's controlled with paddings. Let's try padding x-1. Or maybe two. Looks like 1.5. Look at that. Spot on.

[3:23] Finally, we can add this hourglass icon using some absolute positioning. Let's add relative here. We'll drop a new div with absolute right here. We can throw in our Icons.Spyglass right here. The spyglass is 16 by 16, so it's going to be width four, height four. There it is.

[3:46] Let's go ahead and position our div. Whenever I do things like this, I like the div to cover this area and then the div can use flex and item center to center any of its children. We'll put the containing div all the way to the right, with right-.

[4:07] Then we want the top to be zero and the bottom to be zero. There's a shortcut for top and bottom zero. It's just inset-y-. If we inspect this div, we'll see it's taking up this whole space. We can just make it a flex parent with item center.

[4:26] That should take care of centering this icon. The icon's over a little bit. I'm going to come down here, add margin to the right, 1.5. Let's make it a little bit darker with text-gray-400. Check that out. That's pretty pixel perfect. We're only using the default scales here.

[4:50] If we zoom out, we'll see that our layout's looking really nice. As we move around channels here and our layout techniques from earlier lessons are taking effect. We're reserving the space right here for all these elements.

[5:05] Even if we were to change this again, we'll see that the description there gets truncated, but this is always preserved, just like that. Let's check out a few more channels. It looks like we might have missed no wrapping on the channel.label. Let's drop a whitespace-nowrap right here. That should take care of it.

[5:33] When it comes to these forms again, basically, the only trick is to remember to install this forms plugin and register it.

[5:43] Then there's quite a lot of work that goes into resetting these inputs so they behave predictably when we do things like change their padding, their height, their colors across all browsers.

[5:52] All the hard work is done for us in that plugin and that just lets us style these exactly like we've been styling the rest of our UI.

https://app.egghead.io/api/v1/lessons/tailwind-styling-the-search-box-using-the-forms-plugin/transcript

https://app.egghead.io/api/v1/lessons/tailwind-using-components-to-dynamically-generate-the-channel-s-messages/subtitles

Sam Selikoff: [0:00] The time has come to replace our dummy messages with the message component that we wrote at the very beginning of this course. I'm going to come over here to our clone where we're iterating over these 40 messages right here.

[0:15] I'm just going to replace it with just a slightly modified version of what we started out with, just a few tweaks with the colors, but mostly exactly what we had at the beginning. There we see it being rendered. We see we have some extra padding here on this wrapping div.

[0:33] We also had space Y, which was putting space in between each div here. Let's just remove that so we can fill up the entire width just like we do on Discord. For the most part, where we started out with looks really good. I just want to highlight one thing.

[0:50] You'll see the line height is pretty tight here on Discord. By default, Tailwind applies different line heights to different font sizes. Again, we can just see it's a little bit tighter over here on Discord.

[1:02] The way we can change this is with the leading utilities. Again, for typography best practice reasons, there's a pretty tight relationship between what the line height should be based on the text size.

[1:16] The defaults do follow best practices. In our case, we want to tighten them up a little bit. Discord actually uses a line height here of 22 pixels. We'll see that's in between leading-5 and leading-6. Again, we'll just use the just-in-time compiler and throw leading-22 pixels on this div.

[1:35] We can see that tightens it up a little bit. Let's also do it to these second two messages right here and right here, leading-22 pixels. This is looking a lot more like what we see over here on Discord. I think we have a little bit more padding on Discord as well in the right direction.

[1:55] Let's change these px-4's to add some padding left, of four, and some padding right say, of six. Or maybe even 16. That helps us see that we're matching up almost exactly with the typography here for the messages. Now let's actually make these dynamic.

[2:20] If we look in our data file, we'll see that each channel has a messages property with a randomly generated message. The data looks like this. It has an ID, user Avatar ID, date, and text. All we need to do is come up here to where we're creating this random array of 40 elements.

[2:40] Instead, we should be able to access the current channels.messages, call.map to loop over them. For each message, we can now return this div. We'll key the div by message ID. Now we see our messages rendering again.

[3:02] In this treatment, we have this div that includes the author and the date. Then these two divs right here and right here, they contain text if the author of this message is the same as the previous one. For now, let's just comment these out and start replacing this with the dynamic data from our data.js file.

[3:25] The image source here will be message.avatar URL. The username will be message.user. The date will be message.date. The text here will be message.text. This is looking pretty great.

[3:48] How about we see we don't have the treatment where the author is the same, then we drop the name and the other information from subsequent messages. To take care of that, let's first create a new component just so this doesn't get too messy here. I'm going to copy all of this HTML.

[4:07] We'll come down to make a MessageWithUser component that returns that. We want to pass in the message here as a prop. Then right here, we can render the message with user component passing in the message.

[4:27] Let's come down here, create a second component just called message, which will also take in a message as a prop. This will return just the HTML we need right here, which should only render the message text. Now we have both treatments right here.

[4:53] We can do a little bit of logic using the message as well as the index from our loop. If we're the very first message, we definitely want to show the user, but also if this message has a different user than the previous one, we want to render the message with the user as well.

[5:09] We should be able to say, if the index is zero, it means we're the first message or the current message.user is not equal to the previous one. We can get that by channel.messages and then pulling the index out just from one before the current index, so i - 1. Then grab the user off of that.

[5:32] In either of these cases, we want to render the message with the user. Otherwise, we want to render just the message. Whoops! That should say, channel.messages. Check this out. Now we've got the first user always rendering.

[5:54] Also, if any of the messages follow the same user, we don't have the first treatment, we have the second one. This is looking really cool. Let's make this a little bit bigger. Get out of the responsive mode here and just take a little look. This is Discord and then here's our clone.

[6:17] Typography really matches just perfectly here. We've got the fonts. We've got a line height, and we have different messages here for each channel so it's fun to play around. We can hit the forward and back button here. We can zoom out a little bit just to see all of our layouts.

[6:35] All of our scroll containers are working. We can scroll this pane independently. If we zoom in, we can scroll this pane independently. Move this all around. We still have our collapsing categories here.

[6:54] We've really filled out a good amount of the Discord interface here just using Tailwind. This is a pretty awesome result.

https://app.egghead.io/api/v1/lessons/tailwind-using-components-to-dynamically-generate-the-channel-s-messages/transcript

https://app.egghead.io/api/v1/lessons/tailwind-dynamically-generating-the-server-and-channel-navs/subtitles

Instructor: [0:00] Our clone is looking great. We've been working on this Tailwind CSS server here and all this works. The navigation works. We can go forward and back. We can reload the app and all of the active states are correct, but we broke some of our nav in the process.

[0:16] If we click Next here, we'll see we have an error. We just need to update a little bit of this to make this all dynamic again. I went ahead and updated the format, just a tad of this data file. Before we were using keys for IDs for each server.

[0:31] I just made this a normal array of objects and updated the code right here to use that new format. Let's go back to Tailwind and fix these server links. These are over in our root app file. When we started, we were just iterating over this hard coded data. Let's delete this, import our data file from data. Down here, again, data is just a plain array now, so we can iterate over data for each server.

[1:10] Our server nav is working again. We can still click around here. If I click on Next, we'll see we get an error. That's because right now, we're hard-coding this channel ID of one, but each channel has a unique ID across all the servers.

[1:26] One belongs to Tailwind, but the first channel in Next is 17. Instead, we're just going to link to the first channel in each server. Server.categories, we'll grab the first category, .channels, grab the first channel, and then put the ID right there.

[1:47] If we go back, Tailwind still works. Let's try clicking on Next. Now we navigate to an actual channel in Next, but we see the channel nav here hasn't updated. Let's take a look at that. We were hard coding in just the Tailwind server right here.

[2:07] Instead of doing that, we already find the current server based on the router query. Let's just grab the server instead. Server.categories. Now they update. Finally, if I click on one of those links, we again, get an invalid URL. Let's come down and look at our channel link.

[2:28] We'll see we had hard-coded servers one right here. To get the current server -- we already have the router -- let's just come grab this code right here, paste it in our channel link, and then replace this with the current server's ID.

[2:49] We'll go back to a valid URL. Now check this out, all of our links are working again. The active state is good. We've got our descriptions right here. If we zoom out, we'll be able to see them. Our toggles are working. We can go to any of our servers. This is actually starting to feel like a real app now.

https://app.egghead.io/api/v1/lessons/tailwind-dynamically-generating-the-server-and-channel-navs/transcript

https://app.egghead.io/api/v1/lessons/tailwind-using-responsive-design-to-hide-the-desktop-navigation/subtitles

Lecturer: [0:00] The last main piece of our clone I want to cover is responsive design. We've been working off of the desktop view and when we shrink this, we do have some nice layout behavior here. Obviously, this won't work when we're on an iPhone.

[0:15] We can see already that we have some issues here. Right here, I have a screenshot of the Discord app on the phone. We can see mainly we're just hiding the server now from the left, as well as the channel nav. These actually come out in a collapsible menu right here.

[0:32] We also simplify the header a little bit. Let's work on adding this to our clone. First, we want to hide this server nav and this lives in our root app page. If we scroll down, we'll see this div contains everything in there. Basically, we want to hide all this on mobile.

[0:51] Tailwind has a hidden utility which we can see sets display-none. If we add that, that will hide, but of course, we don't want to hide it on desktop.

[1:02] We want it to start out hidden and then show it once we get to a certain breakpoint. The way we do this in Tailwind is with responsive prefixes. There's one called MD, which stands for medium. We can see right there that it applies to a minimum width of 768.

[1:19] At 768, if we set the display back to block, which is the default for a div, now we can see this showing up at 768 pixels. If we were to shrink this a little bit, it will hide. That's basically the idea behind working with responsive design in Tailwind. You use all exactly the same utilities.

[1:39] You just prefix ones you want to apply at certain breakpoints. Tailwind has a few different breakpoints by default. We have small at 640, medium at 768, large at 1024, extra-large at 1280, and then 2XL at 1536.

[1:59] Of course, all these can be customized, but just for now we're going to stick with medium for the 768 breakpoint, and that's basically the idea. Let's also do the same thing to our channel list here. This is over in our CID page. I believe it's this div right here.

[2:17] Here's our channel list, and here's our main channel area. We want this to be defaulted to hidden. We'll see right there we have a nice error message telling us hidden applies the same CSS property as flex.

[2:30] Since we're making this flex, we only want this to show up again on the medium breakpoint. Now that's hidden below 768, and once we get to 768, it should appear alongside our server nav.

[2:45] The way we've constructed this layout, we really don't have to change anything. Flexbox has taken care of making sure these sizes all work for us as we add and remove elements.

[2:54] Another small point is that these are mobile-first breakpoints, which means they are minimum width, which is generally best practice in responsive design.

[3:04] Even though we've been building this as a desktop because I wanted to focus on all the details that we've been focusing on, usually, when I build a responsive site, I would start by implementing the mobile version first. Then, as you get to bigger breakpoints, layering on these utilities prefixed with the responsive breakpoints.

[3:23] Let's shrink this down a little bit, check out our screenshot again. Here, we can see the header's really simplified to just the channel title. We have the hashtag-with-message icon, and then the team's icon over here.

[3:37] If we open up our main area div here and find the header, this is what we've been working with. Here's the channel description, and here's the label. We can do the same thing for the description. Let's start with it hidden on mobile, and then put it back to block for tablets. Now that hides, and again, it shows up once we get bigger.

[4:06] Let's take a look at these elements. These are all inside this div right here. Presumably, if this was a production app, there'd be a lot more functionality with all of these buttons and running this search, that were suitable to desktop.

[4:20] We could come here and apply the same technique, and start hiding the things that we don't need. Maybe this bell goes away, so it's hidden, medium, inline, something like that. As you can see, sometimes it gets a little confusing.

[4:38] If the differences between a particular part of your template in mobile and desktop are large, if there's a lot of differences, sprinkling a lot of these responsive classes everywhere can make it a little bit hard to follow what's going on.

[4:52] While that technique worked great for our layout, in this case, I would take a slightly different approach. I would just drop a comment right here, that says, Desktop Buttons. Then. let's just create a new one called Mobile Buttons. Let's grab this, paste it right here.

[5:14] If we take a look at the screenshot, we'll see we really only need the hashtag-with-speech-bubble icon for threads, and then we need the people. We can delete all the rest of this like that, save that. If we come back, we're doubling up.

[5:33] We want to make this one visible on mobile, which it is by default, and then hide it at 768. We'll say, medium hidden. That will apply the display-none class at 768 pixels. Then we want to come down to our desktop and do the opposite.

[5:51] We'll say, hidden and then we'll make this medium flex. Now we have a much simpler header here to work with, with these buttons. We don't need to go looking for where our responsive utilities are.

[6:06] It's just easy to see when we're working on mobile, which has a pretty drastically different treatment than desktop. This is what we need to look at. Otherwise, once we get up to 768, we'll just switch back over to this one and this will hide just fine.

[6:20] That's my two ways of thinking about working with responsive utilities in Tailwind. They're super easy to just sprinkle in if you have small changes to make between breakpoints. When you have larger ones, you can just separate them out.

[6:33] There's no always right or wrong answer here. You'll just get better with experience and knowing when to use which strategy. With that, we have a pretty nice clone here. Of course, building all the mobile navigation is pretty involved, and beyond the scope of this course.

[6:51] You can see that our flexbox layout, our fixed header is working really nice. The scroll's working nice. When we go up to laptop size, we see all of our original elements and everything is looking really great.

https://app.egghead.io/api/v1/lessons/tailwind-using-responsive-design-to-hide-the-desktop-navigation/transcript

Craft Scalable, Custom-Made Interfaces with Tailwind CSS

Sam Selikoff

Credits

Course Content