tailwindcss forms

@tailwindcss/forms

Ein Plugin, das ein grundlegendes Zurücksetzen für Formularstile ermöglicht und das Überschreiben von Formularelementen mit Dienstprogrammen erleichtert.

Installation

Installieren Sie das Plugin von npm:

 npm install -D @tailwindcss/forms

Fügen Sie dann das Plugin zu Ihrer tailwind.config.js -Datei hinzu:

 // tailwind.config.jsmodule.exports = {
  Thema: {// ...
  },
  Plugins: [require('@tailwindcss/forms'),// ...
  ],}

Grundlegende Verwendung

Sehen Sie sich die Live-Demo an

Alle von Ihnen verwendeten grundlegenden Formularelemente verfügen jetzt über einige einfache Standardstile, die mit Dienstprogrammen leicht überschrieben werden können.

Derzeit fügen wir grundlegende, dienstprogrammfreundliche Formularstile für die folgenden Formularelementtypen hinzu:

• input[type='text']

• input[type='password']

• input[type='email']

• input[type='number']

• input[type='url']

• input[type='date']

• input[type='datetime-local']

• input[type='month']

• input[type='week']

• input[type='time']

• input[type='search']

• input[type='tel']

• input[type='checkbox']

• input[type='radio']

• select

• select[multiple]

• textarea

Jedes Element wurde auf einen einfachen, visuell konsistenten Stil normalisiert/zurückgesetzt, der mit Dienstprogrammen leicht angepasst werden kann, sogar Elemente wie <select> oder <input type="checkbox"> die normalerweise mit appearance: none zurückgesetzt und mit „Benutzerdefiniert“ angepasst werden müssen CSS:

 <!-- Sie können den Abstand für ein ausgewähltes Element jetzt tatsächlich anpassen: --><select class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- Oder ändern Sie die Farbe eines Kontrollkästchens mithilfe von Textfarbdienstprogrammen: --><input type="checkbox" class="rounded text-pink-500" />

Weitere Anpassungsbeispiele und Best Practices folgen in Kürze.

Verwenden von Klassen zum Stylen

Zusätzlich zu den globalen Stilen generieren wir auch eine Reihe entsprechender Klassen, mit denen sich die Formularstile explizit auf ein Element anwenden lassen. Dies kann in Situationen nützlich sein, in denen Sie ein Nicht-Formularelement wie ein <div> wie ein Formularelement aussehen lassen müssen.

 <input type="email" class="form-input abgerundet-vollständige px-4 py-3" /><select class="form-select abgerundet-vollständige px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox abgerundeter text-pink-500" />

Hier ist eine vollständige Tabelle der bereitgestellten form-* Klassen als Referenz:

Base	Klasse
[type='text']	form-input
[type='email']	form-input
[type='url']	form-input
[type='password']	form-input
[type='number']	form-input
[type='date']	form-input
[type='datetime-local']	form-input
[type='month']	form-input
[type='search']	form-input
[type='tel']	form-input
[type='time']	form-input
[type='week']	form-input
textarea	form-textarea
select	form-select
select[multiple]	form-multiselect
[type='checkbox']	form-checkbox
[type='radio']	form-radio

Nur globale Stile oder nur Klassen verwenden

Obwohl wir empfehlen, dieses Plugin als „Formular-Reset“ und nicht als Sammlung von Formularkomponentenstilen zu betrachten, kann unser Standardansatz in einigen Fällen zu schwerfällig sein, insbesondere wenn dieses Plugin in bestehende Projekte integriert wird.

Wenn die Generierung sowohl der globalen (Basis-)Stile als auch der Klassen mit Ihrem Projekt nicht gut funktioniert, können Sie die strategy verwenden, um das Plugin auf nur einen dieser Ansätze zu beschränken.

 // tailwind.config.jsplugins: [
  require("@tailwindcss/forms")({strategy: 'base', // nur globale Stile generierenstrategy: 'class', // nur Klassen generieren
  }),],

Bei Verwendung der base werden Formularelemente global gestaltet und es werden keine form-{name} -Klassen generiert.

Bei Verwendung der class werden Formularelemente nicht global gestaltet, sondern müssen stattdessen mithilfe der generierten form-{name} -Klassen gestaltet werden.