Lewati ke konten
🛠️
Whiz Tools

Pembangun Komponen React Tailwind - Pratinjau Langsung & Generator Kode

Pembangun Komponen React Tailwind gratis dengan pratinjau langsung. Buat tombol, input, textarea, select & breadcrumbs dengan Tailwind CSS. Ekspor kode React siap produksi secara instan.

Pembangun Komponen React dengan Tailwind CSS

Bangun komponen React dengan Tailwind CSS dan lihat pratinjau langsung

Jenis Komponen

Properti

Tampilan Responsif

Pratinjau Status

Pratinjau Langsung

Kode yang Dihasilkan

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

Apa itu Pembuat Komponen React Tailwind?

Pembuat Komponen React Tailwind adalah alat browser gratis yang menghasilkan komponen React dengan gaya Tailwind CSS. Pengguna memilih jenis komponen, seperti tombol atau input teks, menyesuaikan beberapa opsi gaya, dan alat tersebut menampilkan pratinjau langsung di sebelah kode JSX yang sesuai. Semuanya berjalan di browser. Akun atau panggilan ke server tidak diperlukan.

Jenis komponen

Alat ini dapat menghasilkan lima jenis komponen:

  • Button — tombol yang dapat diklik dengan teks khusus
  • Text input — bidang formulir satu baris dengan teks placeholder
  • Textarea — bidang formulir multibaris dengan jumlah baris yang ditentukan
  • Select — daftar tarik-turun yang dibuat dari daftar opsi
  • Breadcrumb — deretan tautan yang menunjukkan lokasi halaman dalam situs, seperti Beranda / Produk / Kategori

Properti yang dapat diubah

Lima properti gaya berlaku untuk setiap jenis komponen:

  • Warna teks — putih, hitam, abu-abu, biru, merah, atau hijau
  • Warna latar belakang — tanpa warna, putih, abu-abu muda, biru, merah, atau hijau
  • Padding (jarak bagian dalam) — tanpa padding, kecil, sedang, besar, atau default tombol
  • Radius border (pembulatan sudut) — tanpa pembulatan, kecil, sedang, besar, atau bulat penuh
  • Lebar — otomatis, penuh, setengah, sepertiga, atau seperempat

Beberapa properti hanya muncul untuk jenis komponen tertentu: teks tombol, teks placeholder pada input teks atau textarea, jumlah baris pada textarea, daftar opsi pada select, dan daftar item pada breadcrumb. Input teks, textarea, dan select juga memiliki kotak centang "wajib" dan "dinonaktifkan"; tombol juga memiliki kotak centang "dinonaktifkan".

Empat properti ditetapkan dan tidak dapat diubah melalui antarmuka: margin (selalu m-0), gaya batas (selalu border border-transparent), ukuran font (selalu text-base), dan ketebalan font (selalu font-medium). Setiap komponen yang dihasilkan membawa empat kelas yang sama ini. Untuk menggunakan margin, batas, atau ukuran font yang berbeda, edit kode yang disalin secara manual.

Cara daftar kelas yang dihasilkan dibangun

Alat ini membangun string kelas Tailwind untuk setiap komponen dalam urutan tetap:

  1. Kelas warna teks, jika ditetapkan
  2. Kelas warna latar belakang, jika ditetapkan
  3. Kelas padding, margin, batas, dan radius batas
  4. Kelas lebar, kecuali lebar ditetapkan sebagai "otomatis"
  5. Kelas ukuran font dan ketebalan font yang tetap
  6. Kelas untuk status interaktif (hover, focus, active), yang berbeda menurut jenis komponen
  7. Kelas untuk status dinonaktifkan, jika "dinonaktifkan" dicentang

Tombol mendapatkan hover:bg-opacity-90, focus:ring-2, focus:ring-offset-2, dan focus:ring-blue-500. Tombol yang tidak dinonaktifkan juga mendapatkan cursor-pointer. Sebagai gantinya, input teks, textarea, dan select mendapatkan focus:outline-none, focus:ring-2, focus:ring-blue-500, dan focus:border-blue-500. Breadcrumb tidak mendapatkan kelas interaktif ini, dan status dinonaktifkan tidak pernah berlaku untuk breadcrumb karena daftar navigasi tidak dapat dinonaktifkan.

Contoh: tombol

Dengan pengaturan default (teks putih, latar belakang biru-500, padding sedang, sudut membulat), 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 abu-abu, latar belakang putih, padding kecil, radius batas besar, lebar penuh, dan "wajib" dicentang:

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 mengikuti aturan pembangunan kelas yang sama seperti input teks. Contoh textarea dengan teks hitam, padding sedang, pembulatan sedang, 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 opsi:

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

Tautan dan pemisah breadcrumb selalu menggunakan kelas tetap (hover:text-blue-600 pada tautan, mx-2 text-gray-400 pada pemisah "/"). Hanya daftar bagian luar yang menggunakan lima properti gaya bersama. Dengan teks abu-abu dan tanpa padding atau pembulatan:

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

Pratinjau responsif versus kelas responsif

Alat ini memiliki kontrol "Tampilan Responsif" dengan tiga opsi: seluler, tablet, dan desktop. Peralihan di antara opsi tersebut hanya mengubah lebar kotak pratinjau, sehingga pengguna dapat melihat secara umum tampilan komponen pada layar yang lebih sempit. Peralihan itu tidak menambahkan prefiks breakpoint Tailwind, seperti sm:, md:, lg:, atau xl:, ke kode yang dihasilkan. Keluaran JSX sama, apa pun tampilan responsif yang dipilih. Siapa pun yang memerlukan tampilan komponen berbeda pada lebar layar yang berbeda harus menambahkan kelas breakpoint tersebut sendiri ke kode yang disalin.

Cara menambahkan Tailwind CSS ke proyek React

  1. Instal paket: npm install -D tailwindcss postcss autoprefixer
  2. Siapkan berkas konfigurasi: npx tailwindcss init -p
  3. Cantumkan berkas sumber proyek dalam tailwind.config.js di bawah content
  4. Tambahkan tiga direktif Tailwind ke berkas CSS utama: @tailwind base; @tailwind components; @tailwind utilities;
  5. Tempelkan komponen yang dihasilkan ke berkas React

Pertanyaan yang sering diajukan

Apa fungsi Pembuat Komponen React Tailwind? Alat ini menghasilkan komponen React bergaya beserta kelas Tailwind CSS yang sesuai, lalu menampilkan pratinjau langsung saat pengguna menyesuaikan pengaturan.

Apakah alat ini secara otomatis menambahkan kelas breakpoint responsif seperti sm: atau md:? Tidak. Kontrol seluler/tablet/desktop hanya mengubah ukuran kotak pratinjau. Kode yang diekspor tidak memiliki kelas sm:, md:, lg:, atau xl:; kelas tersebut harus ditambahkan secara manual jika diperlukan.

Dapatkah saya mengubah margin, gaya batas, atau ukuran font? Tidak melalui antarmuka. Setiap komponen yang dihasilkan menggunakan margin tetap yang sama (m-0), batas (border border-transparent), ukuran font (text-base), dan ketebalan font (font-medium). Ubah semuanya dengan mengedit kode yang disalin secara langsung.

Apakah alat ini menyimpan komponen saya? Tidak. Tidak ada fitur penyimpanan. Salin kode yang dihasilkan dan simpan di berkas milik proyek itu sendiri.

Apakah alat ini menghasilkan TypeScript? Alat ini menghasilkan JSX (sintaks JavaScript). Keluaran tersebut berupa markup JSX biasa, sehingga dapat ditempelkan ke berkas .tsx tanpa perubahan, meskipun tidak ada definisi tipe yang dihasilkan.

Apakah alat ini gratis untuk digunakan? Ya. Alat ini berjalan sepenuhnya di browser, tanpa akun dan tanpa mengirimkan permintaan ke server.

Apakah alat ini berfungsi dengan Next.js, Gatsby, atau framework React lainnya? Ya. Kode yang dihasilkan berupa JSX biasa dengan kelas Tailwind, sehingga berfungsi pada framework berbasis React apa pun yang telah dikonfigurasi dengan Tailwind CSS.