tailwindcss forms

@tailwindcss/formulir

Sebuah plugin yang menyediakan pengaturan ulang dasar untuk gaya formulir yang membuat elemen formulir mudah diganti dengan utilitas.

Instalasi

Instal plugin dari npm:

 npm install -D @tailwindcss/forms

Kemudian tambahkan plugin ke file tailwind.config.js Anda:

 // tailwind.config.jsmodule.exports = {
  tema: {// ...
  },
  plugin: [memerlukan('@tailwindcss/forms'),// ...
  ],}

Penggunaan dasar

Lihat demo langsung

Semua elemen formulir dasar yang Anda gunakan sekarang akan memiliki beberapa gaya default sederhana yang mudah diganti dengan utilitas.

Saat ini kami menambahkan gaya formulir dasar yang ramah utilitas untuk tipe elemen formulir berikut:

• 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

Setiap elemen telah dinormalisasi/direset ke gaya sederhana yang konsisten secara visual yang mudah disesuaikan dengan utilitas, bahkan elemen seperti <select> atau <input type="checkbox"> yang biasanya perlu diatur ulang dengan appearance: none dan dikustomisasi menggunakan kustom CSS:

 <!-- Anda sebenarnya dapat menyesuaikan padding pada elemen yang dipilih sekarang: --><select class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- Atau ubah warna kotak centang menggunakan utilitas warna teks: --><input type="checkbox" class="rounded text-pink-500" />

Contoh penyesuaian dan praktik terbaik lainnya akan segera hadir.

Menggunakan kelas untuk menata gaya

Selain gaya global, kami juga menghasilkan sekumpulan kelas terkait yang dapat digunakan untuk menerapkan gaya formulir secara eksplisit ke suatu elemen. Ini bisa berguna dalam situasi di mana Anda perlu membuat elemen non-bentuk, seperti <div> , terlihat seperti elemen formulir.

 <input type="email" class="form-input round-full px-4 py-3" /><select class="form-select round-full px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox round text-pink-500" />

Berikut adalah tabel lengkap kelas form-* yang disediakan untuk referensi:

Basis	Kelas
[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

Hanya menggunakan gaya global atau kelas saja

Meskipun kami merekomendasikan menganggap plugin ini sebagai "reset formulir" daripada kumpulan gaya komponen formulir, dalam beberapa kasus pendekatan default kami mungkin terlalu berat, terutama saat mengintegrasikan plugin ini ke dalam proyek yang sudah ada.

Jika menghasilkan gaya dan kelas global (dasar) tidak berfungsi dengan baik dengan proyek Anda, Anda dapat menggunakan opsi strategy untuk membatasi plugin hanya pada salah satu pendekatan berikut.

 // tailwind.config.jsplugins: [
  require("@tailwindcss/forms")({strategy: 'base', // hanya menghasilkan global stylestrategy: 'class', // hanya menghasilkan kelas
  }),],

Saat menggunakan strategi base , elemen formulir ditata secara global, dan tidak ada kelas form-{name} yang dihasilkan.

Saat menggunakan strategi class , elemen formulir tidak ditata secara global, melainkan harus ditata menggunakan kelas form-{name} yang dihasilkan.