section | label | package | playground | excerpt | next |
---|---|---|---|---|---|
Presets |
Tailwind CSS Forms |
@twind/preset-tailwind-forms |
true |
A preset that provides a basic reset for form styles that makes form elements easy to override with utilities.
|
./preset-typography.md |
Note Based on @tailwindcss/forms.
@twind/preset-tailwind-forms | @tailwindcss/forms |
---|---|
>=1.0.0-next.40 <1.1.0 |
>=0.5 <0.6 |
>=1.0.0-next.27 <1.0.0-next.40 |
>=0.4 <0.5 |
with @twind/core
Install from npm:
npm install @twind/core @twind/preset-tailwind @twind/preset-tailwind-forms
Add the preset to your twind config:
import { defineConfig } from '@twind/core'
import presetTailwind from '@twind/preset-tailwind'
import presetTailwindForms from '@twind/preset-tailwind-forms'
export default defineConfig({
presets: [presetTailwind(/* options */), presetTailwindForms(/* options */)],
/* config */
})
Usage with a script tag
<head>
<script
src="https://cdn.jsdelivr.net/combine/npm/@twind/core@1,npm/@twind/preset-tailwind@1,npm/@twind/preset-tailwind-forms@1"
crossorigin
></script>
<script>
twind.install({
presets: [twind.presetTailwind(/* options */), twind.presetTailwindForms(/* options */)],
/* config */
})
</script>
</head>
with Twind CDN
<head>
<script src="https://cdn.twind.style/tailwind-forms" crossorigin></script>
<script>
twind.install({
presets: [twind.presetTailwindForms(/* options */)],
/* config */
})
</script>
</head>
All of the basic form elements you use will now have some simple default styles that are easy to override with utilities.
Same as with @tailwindcss/forms › Basic Usage
Same as with @tailwindcss/forms › Using only global styles or only classes
import { defineConfig } from '@twind/core'
import presetTailwind from '@twind/preset-tailwind'
import presetTailwindForms from '@twind/preset-tailwind-forms'
export default defineConfig({
presets: [
presetTailwind(/* options */),
presetTailwindForms({
strategy: 'base', // only generate global styles
strategy: 'class', // only generate classes
}),
],
/* config */
})