Tempelkan HTML dan CSS, pratinjau fragmen yang dirender, dan ekspor Tailwind CSS yang bersih untuk Tailwind Play atau basis kode Anda.

Tidak ada pratinjau sumber

Pratinjau sumber muncul saat input valid.

Tailwind v4

Belum ada output

Output Tailwind yang dihasilkan muncul di sini secara otomatis.

Tidak ada pratinjau Tailwind

Pratinjau Tailwind yang dihasilkan muncul di sini setelah konversi.

Konverter Tailwind dengan piksel sempurna

Ubah HTML dan CSS menjadi Tailwind CSS bersih

Membaca HTML dan CSS secara bersamaan
Penyeleksi, kelas, gaya sebaris, dan aturan bersarang diselesaikan berdasarkan markup sebenarnya sebelum utilitas Tailwind dibuat.
Mempertahankan markup yang bermakna
Struktur semantik, atribut, teks, tautan, dan elemen formulir tetap berada di HTML yang diekspor sementara gaya berpindah ke utilitas.
Konversi yang didukung pratinjau
Pratinjau sumber dan yang dihasilkan memudahkan untuk membandingkan fragmen asli dengan keluaran Tailwind.
Cakupan elemen bersarang
Elemen anak, SVG, ikon, dan fragmen UI yang tersusun dikonversi dengan konteks gaya sekitarnya.
Berguna untuk membangun kembali komponen
Migrasikan salinan fragmen UI, prototipe, dan cuplikan statis ke dalam komponen Tailwind tanpa kehilangan bentuk HTML asli.
Handoff ke Tailwind Play
Tailwind CSS yang dihasilkan dapat dibuka langsung di Tailwind Play untuk pengeditan cepat, eksperimen, dan berbagi.

Panduan konverter HTML/CSS

Ubah HTML dan CSS menjadi Tailwind

Konverter HTML/CSS ke Tailwind dibuat untuk fragmen UI yang ditempel, bagian laman landas, prototipe, dan templat lama yang gayanya dibagi antara penyeleksi, kelas, dan deklarasi sebaris.

Tailfind merender markup dengan CSS-nya, membaca hasil yang dihitung, dan mengekspor HTML yang siap Tailwind sehingga Anda dapat memindahkan struktur yang sama ke proyek Tailwind tanpa menerjemahkan setiap deklarasi secara manual.

Gunakan saat Anda perlu mengonversi HTML ke Tailwind CSS dengan cepat, membuat handoff ke Tailwind Play lebih bersih, atau memulai pembangunan ulang komponen statis di Angular, React, Vue, Svelte, atau HTML biasa.

Bisakah Tailfind mengonversi HTML dan CSS menjadi Tailwind CSS?
Ya. Tempelkan fragmen HTML dan CSS-nya, dan Tailfind akan merender hasilnya sebelum mengekspor HTML reguler dengan kelas utilitas Tailwind.
Apakah konverter menyimpan nilai CSS khusus?
Tailfind lebih memilih utilitas Tailwind default ketika nilainya cocok dengan skala kerangka kerja dan menggunakan utilitas arbitrer eksplisit untuk warna, spasi, bayangan, dan ukuran kustom.
HTML jenis apa yang paling cocok?
Fragmen UI yang kecil dan mandiri berfungsi paling baik, termasuk kartu, formulir, bagian, prototipe, dan cuplikan lama tempat CSS yang relevan dapat ditempelkan dengan markup.

Lewati konversi manual

Ubah halaman apa pun yang aktif menjadi Tailwind CSS yang bersih

Tailfind membawa konverter ke browser Anda, sehingga Anda dapat menangkap UI produksi langsung dari halaman yang Anda lihat.

Tangkapan layar aplikasi