CSS ke Konverter Tailwind
Konversi deklarasi CSS biasa (display: flex, padding: 16px, color: #ffffff) ke kelas utilitas Tailwind CSS yang paling dekat, dengan fallback ke arbitrary-value syntax ketika tidak ada token yang cocok.
Input
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-to-tailwind-converter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": "display: flex;\npadding: 16px;\njustify-content: c…"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `css-to-tailwind-converter` tool (CSS to Tailwind Converter) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/css-to-tailwind-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS ke Konverter Tailwind — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Tailwind CSS membangun antarmuka dari kelas utilitas kecil yang dapat digunakan kembali daripada stylesheet yang ditulis tangan — p-4 sebagai ganti padding: 16px;, flex items-center justify-between sebagai ganti rule display: flex dengan tiga baris lagi di bawahnya. Jika Anda bermigrasi stylesheet yang ada ke Tailwind, atau hanya memiliki cuplikan CSS dari alat desain dan menginginkan setara Tailwind, mengetik ulang setiap deklarasi dengan tangan adalah membosankan dan mudah untuk salah. Alat ini mengonversi deklarasi CSS biasa ke kelas utilitas Tailwind mereka secara otomatis.
Cara kerjanya
Tempel deklarasi CSS — baik pasangan property: value; biasa atau blok rule .selector { ... } lengkap (pemilih dan kurung kurawal dihapus secara otomatis) — dan alat ini berjalan melalui setiap deklarasi dan memetakannya ke kelas Tailwind:
- Properti kata kunci langsung (
display,position,flex-direction,text-align,cursor, dan puluhan lagi) memetakan langsung ke nama Tailwind mereka, mis.display: flex→flex,position: relative→relative. - Properti spasi (
margin,padding,gap,width,height,top/right/bottom/left, dan varian per-sisi mereka) cocok dengan skala spasi default Tailwind — skala langkah seperempat-rem (4px) di mana16pxpersis4unit, jadipadding: 16pxmenjadip-4. Nilai shorthand (margin: 0 auto,padding: 8px 16px) diperluas ke set kelas pencocokan terkecil (mx-auto,px-4 py-2, dll). - Warna (
color,background-color,border-color) cocok dengan palet default Tailwind lengkap (slate, gray, zinc, red, orange, ... hingga stone, semua nuansa 50–950). Kecocokan hex yang tepat menjaditext-blue-500; apa pun yang lain jatuh kembali ke kelas arbitrary-value sepertitext-[#123456]. - Ukuran font, bobot font, tinggi garis, spasi huruf, jari-jari perbatasan, opacity, z-index, box shadow, transisi, dan banyak lagi cocok dengan skala Tailwind masing-masing dengan cara yang sama.
- Apa pun yang tidak memiliki utilitas Tailwind langsung (properti yang tidak biasa, nilai di luar setiap skala) dipancarkan sebagai komentar
/* property: value - No direct Tailwind equivalent */sebaris dengan daftar kelas, sehingga tidak ada yang hilang diam-diam.
Hasilnya adalah string kelas yang dipisahkan oleh spasi tunggal (ditambah komentar fallback apa pun) dalam urutan yang sama dengan deklarasi input Anda — siap untuk ditempel ke atribut class/className.
Cara menggunakannya
- Tempel deklarasi CSS Anda, atau blok rule lengkap, ke dalam kotak input.
- Daftar kelas Tailwind dihasilkan secara otomatis saat Anda mengetik.
- Salin hasilnya, atau unduh sebagai file teks.
FAQ
Apakah ini mencakup setiap properti CSS? Tidak — ini adalah konversi upaya terbaik yang mencakup properti yang memiliki utilitas langsung Tailwind (layout, flexbox/grid, spasi, tipografi, warna, perbatasan, efek, transisi). Properti tanpa rekan Tailwind ditinggalkan sebagai komentar penjelasan daripada ditebak.
Mengapa warna saya menjadi text-[#123456] bukan kelas bernama?
Hanya nilai hex yang cocok persis dengan salah satu nuansa palet default Tailwind yang menyelesaikan ke kelas bernama (text-blue-500, dll). Nilai hex atau RGB lainnya menggunakan sintaks arbitrary-value Tailwind, yang merupakan CSS yang valid dalam nama kelas dan bekerja keluar dari kotak tanpa perubahan konfigurasi.
Apakah ini memperhitungkan tailwind.config.js khusus?
Tidak — konversi didasarkan pada skala tema default Tailwind. Jika proyek Anda telah menyesuaikan skala spasi, warna, atau ukuran font, beberapa kelas yang disarankan mungkin tidak cocok dengan konfigurasi Anda; gunakan fallback arbitrary-value untuk kelas-kelas itu dan sesuaikan dengan token Anda sendiri.
Apakah CSS saya dikirim ke mana pun? Tidak — semuanya berjalan secara lokal di browser Anda (atau, ketika dipanggil melalui API, hanya dalam penanganan permintaan). Tidak ada yang disimpan.