Langkau ke kandungan
🛠️
Whiz Tools

Pembina Komponen React Tailwind - Pratonton Langsung & Penjana Kod

Pembina Komponen React Tailwind percuma dengan pratonton langsung. Buat butang, input, textarea, pilih & breadcrumb dengan Tailwind CSS. Eksport kod React sedia pengeluaran serta-merta.

Pembina Komponen React dengan Tailwind CSS

Bina komponen React dengan Tailwind CSS dan lihat pratonton langsung

Jenis Komponen

Sifat

Paparan Responsif

Pratonton Keadaan

Pratonton Langsung

Kod Dijana

jsx
<button
  className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
>
  Button
</button>
Kalkulator Pemuatan...
📚

Dokumentasi

Apakah Pembina Komponen React dengan Tailwind?

Pembina Komponen React Tailwind ialah alat pelayar percuma yang menjana komponen React yang digayakan dengan Tailwind CSS. Pengguna memilih jenis komponen, seperti butang atau input teks, melaraskan beberapa pilihan gaya, dan alat itu memaparkan pratonton langsung di sebelah kod JSX yang sepadan. Semuanya berjalan dalam pelayar. Akaun atau panggilan pelayan tidak diperlukan.

Jenis komponen

Alat ini boleh menjana lima jenis komponen:

  • Butang — butang yang boleh diklik dengan teks tersuai
  • Input teks — medan borang satu baris dengan teks ruang letak
  • Textarea — medan borang berbilang baris dengan bilangan baris yang ditetapkan
  • Select — senarai juntai bawah yang dibina daripada senarai pilihan
  • Breadcrumb — baris pautan yang menunjukkan lokasi halaman dalam tapak, seperti Laman Utama / Produk / Kategori

Sifat yang boleh diubah

Lima sifat gaya digunakan pada setiap jenis komponen:

  • Warna teks — putih, hitam, kelabu, biru, merah atau hijau
  • Warna latar belakang — tiada, putih, kelabu muda, biru, merah atau hijau
  • Padding (jarak dalaman) — tiada, kecil, sederhana, besar atau lalai butang
  • Jejari bucu (pembundaran bucu) — tiada, kecil, sederhana, besar atau bulat sepenuhnya
  • Lebar — automatik, penuh, separuh, satu pertiga atau satu perempat

Sesetengah sifat hanya muncul untuk jenis komponen tertentu: teks butang, teks ruang letak pada input teks atau textarea, bilangan baris pada textarea, senarai pilihan pada select, dan senarai item pada breadcrumb. Input teks, textarea dan select juga mempunyai kotak pilihan "diperlukan" dan "dilumpuhkan"; butang juga mempunyai kotak pilihan "dilumpuhkan".

Empat sifat ditetapkan dan tidak boleh diubah melalui antara muka: margin (sentiasa m-0), gaya sempadan (sentiasa border border-transparent), saiz fon (sentiasa text-base) dan ketebalan fon (sentiasa font-medium). Setiap komponen yang dijana membawa empat kelas yang sama ini. Untuk menggunakan margin, sempadan atau saiz fon yang berbeza, sunting kod yang disalin secara manual.

Cara senarai kelas yang dijana dibina

Alat ini membina rentetan kelas Tailwind bagi setiap komponen mengikut susunan tetap:

  1. Kelas warna teks, jika ditetapkan
  2. Kelas warna latar belakang, jika ditetapkan
  3. Kelas padding, margin, sempadan dan jejari sempadan
  4. Kelas lebar, kecuali lebar ditetapkan kepada "automatik"
  5. Kelas saiz fon dan ketebalan fon yang ditetapkan
  6. Kelas bagi keadaan interaktif (hover, fokus, aktif), yang berbeza mengikut jenis komponen
  7. Kelas bagi keadaan dilumpuhkan, jika "dilumpuhkan" ditandakan

Butang menerima hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2 dan focus:ring-blue-500. Butang yang tidak dilumpuhkan juga menerima cursor-pointer. Sebaliknya, input teks, textarea dan select menerima focus:outline-none, focus:ring-2, focus:ring-blue-500 dan focus:border-blue-500. Breadcrumb tidak menerima mana-mana kelas interaktif ini, dan keadaan dilumpuhkan tidak pernah digunakan pada breadcrumb kerana senarai navigasi tidak boleh dilumpuhkan.

Contoh: butang

Dengan tetapan lalai (teks putih, latar belakang biru-500, padding sederhana, bucu bulat), alat ini menghasilkan:

1<button
2  className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer"
3>
4  Button
5</button>
6

Contoh: input teks

Dengan teks kelabu, latar belakang putih, padding kecil, jejari sempadan besar, lebar penuh dan "diperlukan" ditandakan:

1<input
2  type="text"
3  className="text-gray-700 bg-white p-2 m-0 border border-transparent rounded-lg w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
4  placeholder="Enter your name"
5  required
6/>
7

Contoh: textarea dan select

Textarea dan select mengikut peraturan pembinaan kelas yang sama seperti input teks. Textarea dengan teks hitam, padding sederhana, pembundaran sederhana, lebar penuh dan 4 baris:

1<textarea
2  className="text-black p-4 m-0 border border-transparent rounded w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
3  placeholder="Enter your message"
4  rows={4}
5></textarea>
6

Select dengan warna dan jarak yang sama seperti contoh input teks di atas, serta tiga pilihan:

1<select
2  className="text-gray-700 bg-white p-2 m-0 border border-transparent rounded w-full text-base font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
3  required
4>
5  <option value="option1">Option 1</option>
6  <option value="option2">Option 2</option>
7  <option value="option3">Option 3</option>
8</select>
9

Contoh: breadcrumb

Pautan dan pemisah breadcrumb sentiasa menggunakan kelas tetap (hover:text-blue-600 pada pautan, mx-2 text-gray-400 pada pemisah "/" ). Hanya senarai luar menerima lima sifat gaya yang dikongsi. Dengan teks kelabu serta tiada padding atau pembundaran:

1<nav className="flex" aria-label="Breadcrumb">
2  <ol className="text-gray-700 p-0 m-0 border border-transparent text-base font-medium flex space-x-2">
3  <li className="flex items-center">
4    <a href="/" className="hover:text-blue-600">Home</a>
5  </li>
6  <li className="flex items-center">
7    <span className="mx-2 text-gray-400">/</span>
8    <a href="/components" className="hover:text-blue-600">Components</a>
9  </li>
10  </ol>
11</nav>
12

Pratonton responsif berbanding kelas responsif

Alat ini mempunyai kawalan "Paparan Responsif" dengan tiga pilihan: mudah alih, tablet dan desktop. Pertukaran antara pilihan ini hanya mengubah lebar kotak pratonton, supaya pengguna dapat melihat secara kasar rupa komponen pada skrin yang lebih sempit. Ia tidak menambahkan awalan breakpoint Tailwind seperti sm:, md:, lg: atau xl: pada kod yang dijana. Hasil JSX adalah sama tanpa mengira paparan responsif yang dipilih. Sesiapa yang memerlukan komponen kelihatan berbeza pada lebar skrin yang berbeza perlu menambahkan kelas breakpoint tersebut sendiri pada kod yang disalin.

Cara menambahkan Tailwind CSS pada projek React

  1. Pasang pakej: npm install -D tailwindcss postcss autoprefixer
  2. Sediakan fail konfigurasi: npx tailwindcss init -p
  3. Senaraikan fail sumber projek dalam tailwind.config.js di bawah content
  4. Tambahkan tiga arahan Tailwind pada fail CSS utama: @tailwind base; @tailwind components; @tailwind utilities;
  5. Tampalkan komponen yang dijana ke dalam fail React

Soalan lazim

Apakah fungsi Pembina Komponen React Tailwind? Alat ini menjana komponen React bergaya dan kelas Tailwind CSS yang sepadan, serta memaparkan pratonton langsung semasa pengguna melaraskan tetapan.

Adakah alat ini menambahkan kelas titik henti responsif seperti sm: atau md: secara automatik? Tidak. Kawalan mudah alih/tablet/desktop hanya mengubah saiz kotak pratonton. Kod yang dieksport tidak mempunyai kelas sm:, md:, lg: atau xl:; kelas ini perlu ditambahkan secara manual jika diperlukan.

Bolehkah saya mengubah margin, gaya sempadan atau saiz fon? Tidak melalui antara muka. Setiap komponen yang dijana menggunakan margin (m-0), sempadan (border border-transparent), saiz fon (text-base) dan ketebalan fon (font-medium) tetap yang sama. Ubahnya dengan menyunting kod yang disalin secara terus.

Adakah alat ini menyimpan komponen saya? Tidak. Tiada ciri simpan. Salin kod yang dijana dan simpan dalam fail projek itu sendiri.

Adakah alat ini menjana TypeScript? Alat ini menghasilkan JSX (sintaks JavaScript). Hasilnya ialah penanda JSX biasa, jadi boleh ditampalkan ke dalam fail .tsx tanpa perubahan, walaupun tiada definisi jenis dijana.

Adakah alat ini percuma untuk digunakan? Ya. Ia beroperasi sepenuhnya dalam pelayar, tanpa memerlukan akaun dan tanpa menghantar sebarang permintaan ke pelayan.

Adakah alat ini berfungsi dengan Next.js, Gatsby atau rangka kerja React yang lain? Ya. Kod yang dijana ialah JSX biasa dengan kelas Tailwind, jadi ia berfungsi dalam mana-mana rangka kerja berasaskan React yang telah dikonfigurasikan dengan Tailwind CSS.