Adding a Tailwind CSS Form Plugin

[00:00:00]
>> We have our form here. And these inputs are not exactly what you would call inspiring, right? So it'd be great if we had some sort of consistent styling amongst all of our inputs here. Now, we could go and style them individually. You might imagine that that would look kinda gross, right?

[00:00:24]
So let's not do that. Let's lean into something called a Tailwind plugin, so you can go get a consistent design style. So this is kinda getting more into towards Bootstrap and and stuff like that that have more of a design system feel to them. You can get some of those things with Tailwind as well via plugins.

[00:00:47]
So go ahead and open your terminal here and say npm install D, capital D that is, tailwindcss/forms, and we want 0.5.3, so @ttailwindcss/forms@0.5.3. Okay, then head back over to your tailwind.config, and plugins here, you're just gonna put require, @tailwindcss/forms, like that. This will bring in all the necessary stuff that we need.

[00:01:35]
And this will allow us to use tailwindcss/form. So it's actually kind of just default styles for our form. So actually now if you go look and, I need to start my server again, npm run dev, and refresh the page, you can see here, getting closer, right? It looks bigger, it's got a nice down arrow to it.

[00:01:59]
We're getting closer to this looking nice. So head back over to your application, go to searchParams, and then now we need to do just a few things. So the first thing that we wanna do is notice that our location here isn't getting any style whatsoever. That's because the way that Tailwind CSS is doing its selectors, it's looking for a type and not necessarily an input.

[00:02:29]
So you can see here on my location, I don't have a type on here. That's because if an input doesn't have a type, it's implied a text input. We just need to be explicit about it, so say type = "text". And you'll see right away, this already gets some style.

[00:02:47]
That's because I was looking for the type = text. Okay, now on all of our selects and inputs,, I want you to add this. I want you to add className = "width = 60 margin bottom-5 block". And you can see here, this looks already a lot nicer. Go ahead and grab this className.

[00:03:15]
Put it on the select here, and put it on the select here. Already looking significantly better, right? And this actually already has some nice, grayed out styles as well. So actually, we don't really need to be do much more than that. I'm gonna show you just so you know, if you wanna have different styles for disabled, because if you remember correctly, the select when you have nothing in it, so right now, it's disabled.

[00:03:55]
But you can kinda see, right, it's a little grayed out. It's probably hard to see on that screen, but let's just go ahead and make it even more obvious that it's disabled. So on the breed selector, you can put disabled: opacity-50. This will make it 50% see through, so it look really grayed out.

[00:04:19]
And you can see there, it looks really grayed out now whenever it's disabled. If I do bird now, you can see that now it's enabled again. So we saw that with hover, but that works with disabled, it works with focus, it works with any one of those kinds of modifiers that you would see in CSS.

[00:04:41]
Okay, let's round it up by making our button look useful here. So on our button, say, ClassName= width-60, sorry, wrong one, rounded px-6 py-2 color text-white hover: opacity-50, Border-none And then background, orange-500. I need color, trying to remember what that was for. I don't think so. All right, yeah, you don't need that color, I don't know why I have that in my notes.

[00:05:40]
Anyway, now you can see I have a nice little orange Submit button there Cool, any questions about styling forms or disabled states or anything like that, or plugins? You can make your own plugins, by the way. If you have your own style system and you're sharing it amongst all various different people, by all means, plugins is the great way to do that.