@twind/forms

A Twind extension that provides a basic reset for form styles that makes form elements easy to override with utilities.

Based on @tailwindcss/forms and with form classes.

Installation

Install from npm:

# Using npm
npm install @twind/forms

# Using Yarn
yarn add @twind/forms

Usage as Directive

import { forms } from '@twind/forms'

document.body.innerHTML = `
  <form class="${tw`max-w-xs mx-auto ${forms}`}">
    <!-- ... -->
  </form>
`

Usage as Plugin

import { forms } from '@twind/forms'

setup({
  plugins: {
    forms,
  },
})

<form class="max-w-xs mx-auto forms">
  <!-- ... -->
</form>

Usage as Preflight

Add to the preflight of your setup call:

import { withForms } from '@twind/forms'

setup({
  preflight: withForms(),
})

setup({
  preflight: withForms({
    /* custom preflight */
  }),
})

setup({
  preflight: withForms((preflight, context) => {
    /* custom preflight */
  }),
})

Usage as form field Directive

import {
  formCheckbox,
  formField,
  formFile,
  formInput,
  formRadio,
  formSelect,
  formTextarea,
} from '@twind/forms'

document.body.innerHTML = `
  <input class="${tw`${formInput}`}">
`

Usage as form field Plugins

import { forms } from '@twind/forms'

setup({
  plugins: {
    'form-checkbox': formCheckbox,
    'form-field': formField,
    'form-file': formFile,
    'form-input': formInput,
    'form-radio': formRadio,
    'form-select': formSelect,
    'form-textarea': formTextarea,
  },
})

<input class="${tw`form-input`}" />