@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:

``sh


Using npm

npm install @twind/forms

Using Yarn

yarn add @twind/forms
`

Usage as Directive

`js
import { forms } from '@twind/forms'

document.body.innerHTML =

max-w-xs mx-auto ${forms}}">


`

Usage as Plugin

`js
import { forms } from '@twind/forms'

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

`html







`

Usage as Preflight

Add to the preflight of your setup call:

`js
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

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

document.body.innerHTML =
${formInput}}">

`

Usage as form field Plugins

`js
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,
},
})
`

`html
}" />
``