Styling the Search Box Using the Forms Plugin
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.
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.