Skip to content

Files

Latest commit

 

History

History
102 lines (80 loc) · 2.7 KB
·

preset-tailwind-forms.md

File metadata and controls

102 lines (80 loc) · 2.7 KB
·
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.

🤝 Compatibility

@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

📦 Installation

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.

🙇 Usage

Same as with @tailwindcss/forms › Basic Usage

Using only global styles or only classes

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 */
})