Check out a free preview of the full Intermediate React, v4 course:
The "Tailwind Plugins" Lesson is part of the full, Intermediate React, v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian installs the TailwindCSS form plugin which adds some uniform styling to all form elements in the application. Disabled styles are added to the breed input and the submit button has padding added to it.

Get Unlimited Access Now

Transcript from the "Tailwind Plugins" Lesson

[00:00:00]
>> The next thing that we're gonna work on here is inputs. We wanna make these look like not hot garbage. So low bar here [LAUGH]. Luckily, Tailwind CSS does have a bunch of kinda pre made form stuff for you that you can just use because kind of a solved problem, right?

[00:00:23] It's not very fun styling forms. I don't know about you, but I've styled hundreds, thousands, let's go with thousands of inputs in my career. So first thing we're gonna install into the library here, stop your server say npm install- D, and we're gonna do @tailwind Css/forms@0.4.0 Okay, this is gonna give us a tailwind plugin.

[00:01:05] So you can run your server again if you want, actually not, leave it for a second. Go over to your tailwind config .js and then here in plugins, we're just gonna add one little thing here, I'm gonna say require, @tailwindcss/forms. Okay, now this will include a bunch of stuff for us that'll take care of a lot of our form styling for us.

[00:01:34] So now if you say npm run dev, get our server up and running again and refresh our page here. Note, it still doesn't look great, but notice that this ended up looking a little bit closer to looking nice, right? So we're getting there. So it just has a bunch of default styles, but we can make this look a lot nicer.

[00:01:57] So first thing kind of wisely they do for their CSS here is they just don't style input texts, unless you put the style or type equals text on it. So good, head back over to search params. And here on this input here, notice we don't have a type on here, which implicitly makes it a type equals text.

[00:02:19] They want you to explicitly go in here and say type equals text. So now if you go back over here, notice that now it looks nice, right? They're just trying to make you be explicit. And they don't want their CSS selectors to be overly greedy cuz none of us have done that before, right?

[00:02:41] Some guilty looks on people's faces. Okay, so to each of the inputs and selects here, let's just go ahead and add kind of the same thing here. We're gonna say, className=, and then we're gonna add W60, which is with 15, remember about 40 pixels. Margin bottom five and block.

[00:03:13] Okay, and then I want you to take an add that, just you can copy and paste and put it on all the selects as well. Order is not important here. Okay? So now if we go back over to here, starting to look significantly better, right? The block, put it on a different line from this, that made it look better.

[00:03:41] We have a nice uniform width now, that helps, some nice spacing with some margin bottom on that. And, yeah, again it's hard not to find it impressive, we just did a little bit and we ended up with something fairly nice on the other side of that. Okay, and this one right now, if we put this to blank, technically this is disabled at the moment, but it doesn't look disabled.

[00:04:11] So we now we need to go and add a disabled opacity to that breed selector. So head back over to breed. This one is theme, we need to go up to breed. So this is breed, we need to add one more here that's gonna be disabled, colon, let's do opacity 50.

[00:04:35] So when it's disabled, it's just gonna make it see through partially. Now you can see this looks grayed out, right? It makes it look disabled and as soon as we put in bird or something like that, now it's re-enabled again. Now one thing you might be catching on to here, it's a lot of repeating yourself, right?

[00:04:57] As opposed to putting one class name that applies itself multiple times, there's ways to mitigate that entails tailwind CSS test. You can easily do that with react and I can have a select component that I use and then just apply that to the site component, that's probably what I would do.

[00:05:11] But there's other more advanced ways of using Tailwind we can kind of make your own kind of classes of Tailwind components. I'm gonna leave that to the tailwind class whenever that gets tied on for the Masters. I don't really wanna get too much into that. I'm kinda just trying to get you introduced here.

[00:05:29] Okay, let's go, obviously our button is not great at the moment. I don't know, maybe you like that [LAUGH], I don't. So let's go add a little bit of style to that. Okay, I'm just gonna put it here cuz I know prettier will fix it. Rounded, obviously rounded buttons, everyone likes that.

[00:05:54] Px-6, so this is padding in the left right direction of 6, py-2. So padding in the up down direction have 2. I don't know, I have to color here. Text-white hover, opacity 50, so that the button looks clickable. And let's do border none. See what that looks like?

[00:06:37] That looks like a respectable button.