Softonic

CSS untuk Tailwind

Langkah 1 / 2
Konversi to Tailwind

Migrasi stylesheet lama ke Tailwind satu aturan demi satu aturan merupakan proses yang merepotkan. Konverter ini menerima blok kode CSS biasa, dengan atau tanpa selector dan tanda kurung bundar, lalu menulis ulang setiap deklarasi sebagai utilitas Tailwind. Pasangan kode yang telah dikenali akan dihubungkan ke utilitas bernama tertentu seperti flex, items-center, atau rounded-lg; seluruh sisanya menggunakan sintaks nilai sembarang Tailwind, yaitu [property:value], sehingga tidak ada kode yang dihilangkan secara diam-diam.

Bagaimana konverter memproses kode CSS Anda

  1. 1

    Lampirkan CSS

    Masukkan aturan lengkap seperti `.card { padding: 16px; border-radius: 8px; }` atau hanya deklarasi yang terdapat di dalam tanda kurung.

  2. 2

    Parser menghapus komentar

    Komentar blok `/* ... */` dihapus sebelum deklarasi-deklarasi tersebut dipisahkan menggunakan titik koma.

  3. 3

    Setiap deklarasi dipetakan.

    Properti umum sesuai dengan utilitas Tailwind yang sebenarnya (spacing, radius, font-size, flex, display, text-align); properti yang tidak diketahui menggunakan nilai default `[prop:value]`.

  4. 4

    Salin dan terapkan

    Tempel daftar kelas ke dalam atribut `class` dari elemen HTML yang sesuai.

Apa yang dipetakan ke utilitas bernama tertentu?

Tema bawaan Tailwind tidak dapat mencakup semua nilai CSS yang mungkin; oleh karena itu, konverter memberikan prioritas pada nilai-nilai yang didukung oleh utilitas resmi, sedangkan untuk nilai lainnya menggunakan nilai sembarang.

Pemetaan Langsung

Deklarasi CSS Utilitas Tailwind
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

Pemetaan yang menyesuaikan skala

Nilai padding, margin, lebar, tinggi, serta dimensi minimum/maksimum semuanya dibagi dengan 4 untuk menghasilkan langkah penyesuaian jarak Tailwind, misalnya, padding: 16px menjadi p-4 dan width: 32px menjadi w-8. Nilai yang tidak cocok dengan langkah yang telah ditentukan akan kembali ke nilai sembarang pada utilitas yang sesuai; contohnya, width: 37px menjadi w-[37px].

border-radius dipetakan ke utilitas bernama terdekatnya (rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl). Ukuran di atas 16px akan ditetapkan sebagai rounded-full; pengaturan ini praktis untuk elemen berbentuk pil, tetapi tidak tepat untuk radius yang sangat besar, periksa hasil output sebelum dikirim ke produksi.

font-size diubah menjadi text-xs melalui text-3xl berdasarkan ambang batas piksel.

Peringatan penting

  • Pseudo-class, media query, dan selector tidak diterjemahkan; hanya deklarasi yang berada di dalam tanda kurung yang diterjemahkan. Anda tetap perlu menambahkan varian seperti hover: atau md: secara manual.
  • Warna-warna muncul dengan nilai sembarang seperti text-[#1f2937] karena konverter tidak mengenal palet tema Tailwind Anda. Ganti dengan text-gray-800 atau token khusus secara manual.
  • Properti shorthand yang jarang Anda gunakan (border, background, transition) akan ditampilkan secara harfiah sebagai [property:value]; pastikan kebenarannya sebelum dikirim ke produksi.

Pertanyaan yang Sering Diajukan

Hasilnya menggunakan nama utilitas yang stabil di antara Tailwind v3 dan v4. Nilai sembarang dalam tanda kurung persegi juga valid di kedua versi tersebut. Anda dapat memutuskan untuk mentransformasi kembali kode warna ke dalam palet v4 @theme setelah menempelkannya.

Konverter tidak memiliki akses ke skala warna tailwind.config.js Anda. Atur nilai sembarang tersebut secara manual ke token palet terdekat, misalnya text-gray-800 atau token merek yang telah Anda definisikan.

Ya, tempelkan beberapa aturan. Alat ini akan menghasilkan satu daftar kelas untuk setiap pemilih, dipisahkan oleh komentar /* selector */ agar Anda dapat menyelaraskannya dengan kode HTML yang sesuai.

Kode CSS dikirim ke server kami agar konverter dapat mengubahnya menjadi kelas Tailwind. Kode tidak disimpan dan tidak dimasukkan ke dalam tautan halaman.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Pemilih Warna HEX

Pilih atau masukkan warna HEX untuk mendapatkan RGB, HSL, perkiraan CMYK, luminans relatif, serta kontras terhadap putih dan hitam.

Alat ini tersedia dalam bahasa lain