Tailwind Forms

Learn the configuration of Tailwind forms by using the Tailwind CSS forms plugin.

We'll cover the following

Forms plug-in

Tailwind provides a series of useful defaults for forms using the @tailwindcss/forms plug-in. Similarly to the typography plug-in described earlier, install the plug-in:

$ yarn add @tailwindcss/forms


Next, we add require('@tailwindcss/forms') to the Tailwind configuration file:

module.exports = {
  plugins: [

This will give reasonable styles to the basic form elements. The plug-in uses the type attribute to affect sizing for input forms. Therefore, we need to have type=text for basic inputs for the styling to work.

Note: The Tailwind forms are not designed to be a finished work by themselves, but rather a better reset to start from when adding styling to our custom page.

Get hands-on with 1200+ tech skills courses.