In this guide, we’ll walk through the process of creating a custom Tailwind theme for your forms and inputs. Tailwind has risen to the forefront of CSS utility class libraries, and FormKit was authored with its capabilities in mind. Let’s get started!
.vuesingle file components.
genesistheme that ships with FormKit — otherwise you will get weird styling results.
If your component represents your entire form and your project only requires a single form, this may be all that you need. Here is an example of applying the same Tailwind classes to a FormKit
text input using both the
section-key props and the
This is a low-barrier way to apply Tailwind styles to your FormKit forms, but what if you have multiple forms? Copy-pasting class lists between components is not ideal and will lead to inadvertent variations in styling across your project over time.
Let's explore how we can apply Tailwind classes globally to all FormKit inputs within our project.
FormKit ships a first-party package
@formkit/themes that includes Tailwind CSS support — making it easy to create a Tailwind CSS theme for FormKit in your project.
sectionKey. Additionally, you can access a number of Tailwind variants based on input and form state such as
formkit-disabled: which allow you to dynamically change your input styling.
To get started we need to add the package to our project.
From there we need to do two things:
@formkit/themesto our project's
generateClasseshelper function from
@formkit/themesand use it where we define our FormKit config options.
formkit.config.jswithin Nuxt, instead of
app.js, you will need to add the path to that file to your
Once this setup is complete we are ready to begin writing our Tailwind theme!
To start, let's apply some sensible classes to a
text style input. This will cover a large surface area because we'll easily re-use these styles to other text-like inputs such as
To specifically target
text inputs we'll create a
text key in our theme object and then apply classes to each
sectionKey as needed.
Here is a
text input with Tailwind classes applied:
formKitTailwind plugin from
@formkit/themes provides a number of variants you can use in your class lists to dynamically respond to input and form state.
The currently provided variants are:
You use these variants in the same way you use the built-in Tailwind variants such as
Let's add some variants for
formkit-disabled to our text input:
Now we're cooking! To create a comprehensive theme all we need to do is define class lists for the
sectionKeys of all the other input types we'll use in our project.
There are some improvements we can make though. The
generateClasses helper function from
@formkit/themes allows for a special
global key that will apply to all inputs. This is helpful for
sectionKeys such as
messages that are usually styled the same across all input types in a project.
Let's create a "Kitchen Sink" of input types, each having their defined class lists applied. Additionally, we'll move our theme to a separate file to assist with readability:
globalkey in your theme object you can apply a class list to all inputs that have a given
sectionKey. This is useful for things like labels or help text when you want to style them identically regardless of input type.
And there we have it! All FormKit core inputs styled with Tailwind utility classes across our entire project.
If we need to override any specific one-offs within our project, we can do so using the section-key class props or the classes prop on a given
FormKit input within our project which was covered in the opening section of this guide.
Of particular importance when doing an override is the special
$reset modifier for class lists. When the FormKit class system encounters a
$reset class it will erase the current class list for the given section and only collect class names that occur after the
$reset token was encountered. This is valuable in a system like Tailwind where it would be painful to have to write override classes or individually disable classes for every globally configured class when deviating from our theme:
This guide has walked through creating a Tailwind theme that covers all input types included in FormKit core, but there's still more that could be done in your own project.
Here are some ways to take the above guide even further:
formkit-invalid:formkit-submitted:to add extra emphasis to invalid fields when a user tries to submit an incomplete form.
Hopefully, this guide helped you understand how classes are applied to FormKit inputs and how you can leverage the
formKitTailwind plugin from the
@formkit/themes package to make use of Tailwind in your FormKit projects. If you want to dive in deeper, try reading about the core internals of FormKit and the FormKit schema!