Modern CSS with Tailwind, 2nd Edition

Tailwind Forms

Tailwind provides a series of useful defaults for forms using the @tailwindcss/forms plugin.^[11] As with the typography plugin described earlier, to install the plugin, first add the package:

$ yarn add @tailwindcss/forms

Then 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. (See https://tailwindcss-forms.vercel.app for a demo.) For input forms, the plugin uses the type attribute to affect sizing, so you do need to have type=text even for basic inputs for the styling to work. Note that the Tailwind forms aren’t designed to be a finished work by themselves, but rather a better ...