CSS → utility Tailwind
Privasi sejak awal — berjalan sepenuhnya di peramban Anda
Tempel deklarasi CSS di sebelah kiri, salin utility Tailwind di kanan. Konverter memetakan skala standar spacing, warna, tipografi, dan layout ke utility nativenya, lalu jatuh ke notasi kurung siku untuk nilai apa pun yang tak dikenal Tailwind.
Properti yang bisa dipetakan
Konverter memahami area CSS sehari-hari: spacing untuk padding dan margin, ukuran serta ketebalan font, warna (text dan bg), display, arah serta perataan flex, border-radius, width dan height, position, dan gap. Setiap properti dipetakan ke shortcut kanonis Tailwind — p-4, text-lg, justify-between — sehingga output terasa seperti Tailwind tulisan tangan.
Kenapa notasi arbitrer penting
Codebase nyata kerap memakai nilai tanpa shortcut: font-size kustom 13px, warna brand dengan hex spesifik, gap 1.7rem. Saat konverter menemui hal itu, ia mengeluarkan bentuk arbitrer Tailwind seperti text-[13px] atau bg-[#3b82f6]. Class tetap Tailwind yang valid, JIT memprosesnya, dan round-trip ke Tailwind-to-CSS berjalan bersih.
Kapan akan tembus apa adanya
Selector kompleks, animasi, gradien, dan keyframes sengaja tidak dikonversi — mereka berada di layer yang Tailwind tangani lewat plugin atau @apply, dan mapping heuristik akan berbohong soal kebenaran. Deklarasi itu keluar verbatim dalam class [prop:value], sehingga Anda bisa menelaahnya tanpa kehilangan data.
Pertanyaan yang Sering Diajukan
- Properti CSS apa saja yang dikenali?
- Skala spacing untuk padding dan margin, warna teks dan latar, display, perataan flex, ukuran dan ketebalan font, border-radius, width dan height, position, dan gap. Sisanya jatuh ke class arbitrer [prop:value].
- Bagaimana jika nilai di luar skala standar?
- Konverter mengeluarkan notasi arbitrer seperti p-[13px] atau bg-[#3b82f6]. JIT mengompilasinya dan class tetap Tailwind yang valid tanpa edit manual.
- Apakah variabel CSS kustom dipahami?
- Ya. Nilai var(--token) lolos sebagai kurung siku; variabelnya tetap perlu dideklarasikan di theme tailwind.config atau sebagai custom property di :root.
- Apakah konversinya lossless?
- Pada pola umum, ya. Animasi, gradien, dan selector eksotis bertahan sebagai class arbitrer — mereka selamat, tetapi Anda mungkin ingin tetap menyimpan CSS aslinya.
- Bisa bolak-balik dengan alat Tailwind-to-CSS?
- Mayoritas bisa. Utility sederhana kembali identik; nilai arbitrer bertahan, namun deklarasi tanpa dukungan tetap berbentuk arbitrer ketika kembali.
- Adakah yang diunggah?
- Tidak. Seluruh proses berjalan di tab peramban ini; konten stylesheet Anda tidak meninggalkan halaman.