Lewati ke konten
Alat konversi

Konverter CSS ke Tailwind — CSS ke Kelas Tailwind

Konversi deklarasi CSS menjadi kelas utilitas Tailwind CSS, yang ditampilkan sebagai aturan @apply untuk setiap selektor. Gunakan untuk mencari utilitas yang sesuai saat memigrasikan gaya yang sudah ada. Konverter ini menargetkan Tailwind CSS v3.

Temukan utilitas Tailwind yang sesuai dengan aturan CSS yang ada saat migrasi.

CSS

TailwindCSS 3.x

Kapan menggunakannya

  • Temukan utilitas Tailwind yang sesuai dengan aturan CSS yang ada saat migrasi.
  • Pelajari nama kelas Tailwind dengan mengonversi CSS yang sudah Anda kenal.

Cara penggunaan

  1. Tempelkan aturan CSS.
  2. Sesuaikan nilai dasar rem atau konfigurasi Tailwind jika proyek Anda menggunakan pengaturan khusus.
  3. Salin kelas setelah @apply ke markup atau stylesheet, lalu periksa hasilnya dalam proyek Tailwind Anda.

Masukan CSS

.card { display: flex; padding: 1rem; }

Keluaran Tailwind (skala default)

.card {
  @apply flex p-4;
}

Detail dan batasan

Nama kelas dan skala mengikuti Tailwind CSS v3. Kompatibilitas dengan konfigurasi dan sintaks Tailwind CSS v4 tidak dijamin.

Nilai khusus, selektor kompleks, dan elemen semu mungkin tidak dapat dikonversi. Hasil tidak dijamin terlihat identik, jadi periksa pada halaman sebenarnya.

Kolom konfigurasi khusus dievaluasi sebagai JavaScript di browser Anda. Jangan tempelkan konfigurasi yang tidak Anda percayai.

FAQ

Apakah alat ini mendukung Tailwind CSS v4?

Alat ini menggunakan nama kelas dan skala Tailwind CSS v3. Banyak utilitas, seperti flex, p-4, dan text-sm, tetap memakai nama yang sama di v4, tetapi v4 memindahkan konfigurasi ke CSS dan mengganti nama sebagian utilitas, jadi periksa hasilnya dalam proyek v4 Anda.

Bagaimana cara menggunakan nama kelas sebagai pengganti @apply?

Salin daftar setelah @apply ke atribut class elemen, misalnya class="flex p-4". Bentuk @apply mengelompokkan kelas berdasarkan selektor asli.

Bisakah alat ini mengonversi kelas Bootstrap ke Tailwind?

Tidak. Alat ini mengonversi deklarasi CSS, bukan nama kelas dari framework lain. Tempelkan aturan CSS di balik komponen Bootstrap untuk melihat utilitas yang sesuai.

Mengapa sebagian deklarasi tidak dikonversi?

Nilai di luar skala Tailwind, selektor kompleks, dan elemen semu mungkin tidak memiliki utilitas langsung. Pertahankan sebagai CSS atau tambahkan ke konfigurasi Tailwind Anda.