Cara menggunakan Konverter CSS ke Tailwind
- Tempel aturan CSS (beserta selector) atau cukup deklarasinya saja.
- Lihat daftar class yang dihasilkan untuk setiap selector.
- Salin class ke HTML atau JSX kamu, lalu periksa arbitrary value dan ganti dengan theme token jika memang perlu.
Cara nilai dipetakan
Skala spacing default Tailwind memakai kelipatan 0.25 rem (4 px), jadi padding: 16px menjadi p-4 dan margin: 0 auto menjadi my-0 mx-auto. Nilai yang tidak ada di skala memakai sintaks arbitrary value: padding: 13px → p-[13px]. Tipografi, radius, dan weight dipetakan ke langkah yang sudah bernama:
| CSS | Tailwind |
|---|---|
display: flex; flex-direction: column | flex flex-col |
gap: 16px | gap-4 |
font-size: 24px; font-weight: 700 | text-2xl font-bold |
border-radius: 12px | rounded-xl |
background-color: #7c5cff | bg-[#7c5cff] |
width: 100% | w-full |
.btn:hover { color: #fff } | hover:text-white |
Batasan yang perlu kamu tahu
- Warna menjadi arbitrary value; setelah itu petakan ke palet tema kamu (misalnya
bg-violet-500). Tool CSS variables ke Tailwind membantu menyusun tema. - Properti yang tidak punya utility ditulis sebagai arbitrary property:
[mask-image:url(...)]. - Media query, selector kompleks, dan animasi perlu diterjemahkan manual ke
md:,group-hover:, dan konfigurasi tema. !importantmenjadi awalan!.
Untuk nilai satuan, generator arbitrary value Tailwind membuat class individual, dan generator warna Tailwind membuat palet lengkap.
Juga dicari sebagai: css ke tailwind, konversi css ke tailwind, tailwind converter, css to tailwind classes, generator tailwind css, migrasi css ke tailwind.
Tool yang cocok dipakai bersama Konverter CSS ke Tailwind
- Konverter PX ke REM — Konversi antara pixel, rem, dan em dengan ukuran font root kamu sendiri, atau tempel seluruh stylesheet dan ubah semua nilai px sekaligus.
- CSS Formatter — Ubah stylesheet yang di-minify menjadi CSS yang mudah dibaca, dengan satu properti per baris dan blok @media yang tersarang dengan benar.
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
- Generator CSS Keyframes — Editor visual untuk @keyframes.
Pertanyaan yang sering diajukan
Apakah mendukung Tailwind v4?
Ya. Utility dan arbitrary value yang dihasilkan bisa dipakai di Tailwind v3 maupun v4.
Kenapa warna ditulis sebagai bg-[#hex]?
Warna persis dipertahankan sebagai arbitrary value supaya tampilannya tidak berubah. Ganti dengan warna tema kamu ketika sudah punya palet.
Bisakah mengonversi media query?
Tidak otomatis. Konversi aturan di dalam media query secara terpisah lalu tambahkan prefix responsif yang sesuai, seperti
md:.Bisakah saya memasang Konverter CSS ke Tailwind sebagai aplikasi web dan memakainya offline?
Bisa. Konverter CSS ke Tailwind adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.