Intermediate React, v3 Styling Forms with a Tailwind Plugin

Transcript from the "Styling Forms with a Tailwind Plugin" Lesson

[00:00:00]
>> So this form is looking pretty bleak, [LAUGH] right? Everything's shoved up against each other, it's got some nice lines dividing it. Nice great looking controls, but yeah, on the whole, pretty bleak. So, there's a million ways to style a form. I'm sure many of you that are watching this, both live and recorded later, have styled 10 million forms and you will yet style 10 million more.

[00:00:26] And I don't know if you're excited or not excited about that, probably depends on your job satisfaction to some degree. I'm not looking forward to styling any more forms in my career despite the fact that I will probably be doing it next week. The nice thing that Tailwind has, it has a concept of a plugin.

[00:00:43] And so one of those plugins, bless them, is forums. That they just give you some nice default looking forums. So I'm gonna show you how to install and use a plugin for Tailwind. So head back over to your page here. Let's go ahead and stop our parcel and I want you to npm install -D @tailwindcss/forms@0.2.1.

[00:01:16] This will get you a nice Tailwind CSS plugin for like, just really nice default looking form controls.
>> Why are you use -D to install it?
>> Why did we use -D here? This is a developer tool, so it goes in the dev dependencies, not the production dependencies.

[00:01:36] Yes, so if I look at my package.json, there's the dependencies. These are the ones that actually go out to my production, react, react-dom and react-router-dom. And then you can see most of my things are in the devDependencies, which is things I used to build the project but don't actually go out to production.

[00:01:55] That's what that is, cool. Okay, so one of my favorite other plugins that we're not gonna use today is something called aspect ratio. So there's a Tailwind plugin for, I want this to be 16 by 9 or I want this to be 1 by 2. And if you've ever had to keep images consistent sizes or I've ever had to have YouTube videos remain constant in aspect ratio, it's a blessing, right?

[00:02:22] Because otherwise you're doing this like weird padding bottom trick to do it. If you've never had to do it then lucky you. If you've ever had to do it, you know exactly what I'm talking about. So anyway, we're not doing that one today but just know that exists and that I'm so happy that it exists.

[00:02:38] So we installed our dependency. We're gonna go in here to plugins and we're just gonna add require@tailwindcss/forms. So this is using common js here, that's why it's using module exports and requires, just the way it works, it's totally fine. You could probably have parcel build your config. I wouldn't suggest that.

[00:03:08] I suggest just doing it how they tell you to do it. All right, so now we have this new fancy plugin and we should be able to just start back up our server, npm run dev. This is going to basically apply a bunch of default styles to your forms without you having to do anything.

[00:03:34] So now if I refresh this, you can see these look a bit nicer now, right? They have nice down arrows, all that kinda stuff and then we'll style them a little bit more to make them more appropriate. But we got all this styling for free from that Tailwind forms plugin.

[00:03:53] If you go look at the the docs for it, they actually have several different kinds of styles that you can apply. We're just gonna stick with the default ones for now, but there are more in that plugin. So I'm sure you can imagine you can install entire like design systems with this.

[00:04:08] You can make your own plugin that applies like the, my company design styles and it just comes all with it which is pretty cool. Okay, so let's go to our inputs on SearchParams, SearchParams and these inputs and we just wanna put a class name of width 60 just to give them some nice width.

[00:04:40] So all the selects, I'm gonna go do that as well as the input up here as well, just so they're of uniform width. And there we go. Now if I save that and come back over here, getting better by the minute, still not quite there. I think the other thing that we should do here, Probably gives these some.

[00:05:21] I think I missed a class here. There's supposed to be some spacing between these. On the forum pb, mb rounded, background gray, shadow flex, flex justice. Well, something we can always do here is like margin 10 or margin bottom 10. Maybe some margin top two, so maybe just instead of mb, we can just put my, right.

[00:06:02] So my 10. Maybe a little too spacious but. There you go, there's some more spacing there on that as well.