Perhaps you'd like a little more control over how your forms look. Well, with FormKit, that's totally fine. You can opt in to all the functionality provided by FormKit and not use the default Genesis theme. So if I were to remove theme Genesis here in my FormKit config, and then let's also remove the import of the Genesis theme for the pro inputs.
Over on the left-hand side, you can see that now we've got a unstyled form field. Cool. view, or you'd probably do this in a separate style sheet, but I'm not going to create one right now. And then you could just target each of those different form kit sections in order to style things as you please.
So we had a, what, one of the form kit sections was labeled. formkit-label, and let's make that text bold. Nice. So yeah, you could go about completely creating your own theme for FormKit in this manner.
However, a really popular CSS framework nowadays is Tailwind CSS. If you'd like to use Tailwind CSS to style your FormKit components, we can go about this just a little differently. Now, notice here that I have stripped down my file, I've gotten rid of the script section altogether and I've just replaced the everything inside the template with this form kit field, the simple form kit text field that's wrapped in a div. Okay.
So now I could add arbitrary Tailwind CSS classes using the class props that we looked at earlier. So remember we have a class prop for each section. So here we could say label class. is font bold.
That would give us a very similar result as the custom CSS we wrote a moment ago. Now over in the browser, this isn't going to actually take effect yet. See, even if I refresh the page, yeah, we don't have a bold label. That's because I haven't actually installed Tailwind CSS with my project.
So let's do that really quickly. By the way, if I weren't using NuxJS, I probably would have done this off screen and not for you on screen. But the reason I'm doing it with Nuxt is because of how easy it is. So check this out.
All I have to do to install Tailwind with a Nuxt project is do npm install at nuxtjs slash tailwind css and this installs the official Nuxt module for Tailwind. Then over in my Nuxt config file we can just register the module inside of our modules option here. Excellent. As soon as I save my file, things restart in the browser and now you can see that we have a bold label.
But our input disappears and that's because the reset that comes with Tailwind. Let me just copy and paste some pre-made Tailwind classes here to make things look a little nicer. Excellent. So now you can see that If we only had a single input on our page or maybe only a single form to deal with, this really isn't too bad.
We can just manually add those classes to each individual input. Now one other variation to this is using the single classes prop. Let me just copy and paste that in. So this is doing the exact same thing as before.
Now we're just defining them under a single prop. All right. What if we want to make things a little more scalable, though, and not have to define these on individual inputs? Well, that's where a first-party formkit package comes in called at formkit slash themes.
Let's install that real quick. This package allows us to author our theme as a JavaScript object, group by input type and section key. Additionally, it'll give us access to a number of tailwind variants based on input and form state. such as formkit-invalid and formkit-disabled.
All right, now with the package installed, there are a couple things we need to do. ts file in order to configure Tailwind CSS. I'll paste the configuration in here, and I just got this from the formkit website. So the first thing it's doing is importing a Tailwind CSS theme from that FormKit themes that we just installed.
Then we're using that FormKit Tailwind plugin as a plugin for Tailwind CSS. Also, it's very important here that we tell Tailwind where to expect those classes to exist. In other words, where are we going to be writing these classes inside of our project so that Tailwind knows what to generate for our CSS file? That's going to be all the HTML and JavaScript files inside of our source directory.
That should also be view files. Not sure why that wasn't in there. ts, because we're going to be using classes there as well. ts, we can import a helper function called generate classes.
and this comes from the FormKit themes package. Now, inside of our config down here, let's create a new option called config, and then under that, an option called classes. Now, we can call the generate classes function and pass in an object where we can define the different classes for our different inputs based on which section we're trying to style. What do I mean by that?
Well, let's give it a try so you can see First I'll target a basic text input then let's target the label section on all text inputs and Maybe give it a tailwind class of I don't know. What about BG? blue 500 as soon as I hit save you see that we get a blue background on the label in our browser nice, so Any classes that we add in this list here will be applied to all of the inputs that are of type text. We could also do the same for other types of inputs as well, such as password, URL, and so on.
If we wanted to add classes to a certain section on all types of inputs, we could use the global keyword. Now we can target a section We'll say label again here, and maybe this time give it some crazy text color, like red. Ooh, that is a little hard on the eyes, but you get the idea. view, if I copy and paste my text input here and change this one to a password type, now this one still gets the red label, but it doesn't get the blue background because global applies to everything.
but the text only applies to the text type input. If you'd like something that's a little bit more in between all the inputs and inputs of a particular type, FormKit also provides a concept of families. The available families are family box, button, dropdown, and text. This allows us to apply those Tailwind CSS classes to groups of types of inputs all at one time.
Boxes would be things like checkboxes and radio buttons. Buttons, of course, anything that is a button. Dropdowns would be things like selects and autocomplete options and things like that. Well, text would be things like password, URL, regular text, and so on.
Awesome. So no matter how granular or how broad you want to be, FormKit has you covered. Another cool thing we could do is provide form kit specific variants. So Intel invariants are things like the colon hover and the colon invalid states and things like that.
Well, we have some variants and form kits such as form kit invalid that we could use to style any section whenever that input is invalid. So let's say that we'll give it a darker red color whenever the input has an error. view, let's add a validation required to the password field so we can see this in action. I'll focus the input, blur it again, and sure enough, now our label is darker than it was before.
Besides the invalid variant, FormKit also provides a number of other variants that might prove useful. Things like disabled, errors, complete, and a few more. If you'd like to dig more into creating a Tailwind theme for FormKit, you can check out this guide called Create a Tailwind CSS Theme on the official FormKit docs. It was a great source when I was putting this lesson together and includes much of the information I shared with you, plus a few more helpful tips and tricks.
Perhaps you'd like a little more control over how your forms look. Well, with FormKit, that's totally fine. You can opt in to all the functionality provided by FormKit and not use the default Genesis theme. So if I were to remove theme Genesis here in my FormKit config, and then let's also remove the import of the Genesis theme for the pro inputs.
Over on the left-hand side, you can see that now we've got a unstyled form field. Cool. view, or you'd probably do this in a separate style sheet, but I'm not going to create one right now. And then you could just target each of those different form kit sections in order to style things as you please.
So we had a, what, one of the form kit sections was labeled. formkit-label, and let's make that text bold. Nice. So yeah, you could go about completely creating your own theme for FormKit in this manner.
However, a really popular CSS framework nowadays is Tailwind CSS. If you'd like to use Tailwind CSS to style your FormKit components, we can go about this just a little differently. Now, notice here that I have stripped down my file, I've gotten rid of the script section altogether and I've just replaced the everything inside the template with this form kit field, the simple form kit text field that's wrapped in a div. Okay.
So now I could add arbitrary Tailwind CSS classes using the class props that we looked at earlier. So remember we have a class prop for each section. So here we could say label class. is font bold.
That would give us a very similar result as the custom CSS we wrote a moment ago. Now over in the browser, this isn't going to actually take effect yet. See, even if I refresh the page, yeah, we don't have a bold label. That's because I haven't actually installed Tailwind CSS with my project.
So let's do that really quickly. By the way, if I weren't using NuxJS, I probably would have done this off screen and not for you on screen. But the reason I'm doing it with Nuxt is because of how easy it is. So check this out.
All I have to do to install Tailwind with a Nuxt project is do npm install at nuxtjs slash tailwind css and this installs the official Nuxt module for Tailwind. Then over in my Nuxt config file we can just register the module inside of our modules option here. Excellent. As soon as I save my file, things restart in the browser and now you can see that we have a bold label.
But our input disappears and that's because the reset that comes with Tailwind. Let me just copy and paste some pre-made Tailwind classes here to make things look a little nicer. Excellent. So now you can see that If we only had a single input on our page or maybe only a single form to deal with, this really isn't too bad.
We can just manually add those classes to each individual input. Now one other variation to this is using the single classes prop. Let me just copy and paste that in. So this is doing the exact same thing as before.
Now we're just defining them under a single prop. All right. What if we want to make things a little more scalable, though, and not have to define these on individual inputs? Well, that's where a first-party formkit package comes in called at formkit slash themes.
Let's install that real quick. This package allows us to author our theme as a JavaScript object, group by input type and section key. Additionally, it'll give us access to a number of tailwind variants based on input and form state. such as formkit-invalid and formkit-disabled.
All right, now with the package installed, there are a couple things we need to do. ts file in order to configure Tailwind CSS. I'll paste the configuration in here, and I just got this from the formkit website. So the first thing it's doing is importing a Tailwind CSS theme from that FormKit themes that we just installed.
Then we're using that FormKit Tailwind plugin as a plugin for Tailwind CSS. Also, it's very important here that we tell Tailwind where to expect those classes to exist. In other words, where are we going to be writing these classes inside of our project so that Tailwind knows what to generate for our CSS file? That's going to be all the HTML and JavaScript files inside of our source directory.
That should also be view files. Not sure why that wasn't in there. ts, because we're going to be using classes there as well. ts, we can import a helper function called generate classes.
and this comes from the FormKit themes package. Now, inside of our config down here, let's create a new option called config, and then under that, an option called classes. Now, we can call the generate classes function and pass in an object where we can define the different classes for our different inputs based on which section we're trying to style. What do I mean by that?
Well, let's give it a try so you can see First I'll target a basic text input then let's target the label section on all text inputs and Maybe give it a tailwind class of I don't know. What about BG? blue 500 as soon as I hit save you see that we get a blue background on the label in our browser nice, so Any classes that we add in this list here will be applied to all of the inputs that are of type text. We could also do the same for other types of inputs as well, such as password, URL, and so on.
If we wanted to add classes to a certain section on all types of inputs, we could use the global keyword. Now we can target a section We'll say label again here, and maybe this time give it some crazy text color, like red. Ooh, that is a little hard on the eyes, but you get the idea. view, if I copy and paste my text input here and change this one to a password type, now this one still gets the red label, but it doesn't get the blue background because global applies to everything.
but the text only applies to the text type input. If you'd like something that's a little bit more in between all the inputs and inputs of a particular type, FormKit also provides a concept of families. The available families are family box, button, dropdown, and text. This allows us to apply those Tailwind CSS classes to groups of types of inputs all at one time.
Boxes would be things like checkboxes and radio buttons. Buttons, of course, anything that is a button. Dropdowns would be things like selects and autocomplete options and things like that. Well, text would be things like password, URL, regular text, and so on.
Awesome. So no matter how granular or how broad you want to be, FormKit has you covered. Another cool thing we could do is provide form kit specific variants. So Intel invariants are things like the colon hover and the colon invalid states and things like that.
Well, we have some variants and form kits such as form kit invalid that we could use to style any section whenever that input is invalid. So let's say that we'll give it a darker red color whenever the input has an error. view, let's add a validation required to the password field so we can see this in action. I'll focus the input, blur it again, and sure enough, now our label is darker than it was before.
Besides the invalid variant, FormKit also provides a number of other variants that might prove useful. Things like disabled, errors, complete, and a few more. If you'd like to dig more into creating a Tailwind theme for FormKit, you can check out this guide called Create a Tailwind CSS Theme on the official FormKit docs. It was a great source when I was putting this lesson together and includes much of the information I shared with you, plus a few more helpful tips and tricks.