Tailwind Forms

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

Configuration

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

module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

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.