Tidak suka iklan? Pergi Bebas Iklan Hari ini 

Pengubah Kelas Tailwind CSS ke CSS Biasa

PengembangTeks

IKLAN · HAPUS?

MEMASUKKAN

Proses Otomatis

KELUARAN

Sisi klien

IKLAN · HAPUS?

Memandu

Pengubah Kelas Tailwind CSS ke CSS Murni

Pengubah Kelas Tailwind CSS ke CSS Biasa

Tempel string kelas utilitas Tailwind v3 dan segera dapatkan aturan CSS murni yang setara. Setiap kelas Tailwind diperluas ke pernyataan CSS yang tepat dengan nilai rem, px, dan warna dari token desain resmi — tanpa tebakan, tanpa pembulatan.

Penting saat memindahkan komponen Tailwind ke CSS murni, saat Anda ingin memeriksa pernyataan bawah, atau saat Anda perlu mengirimkan CSS yang ditulis secara manual tanpa langkah pembangunan Tailwind.

Cara Penggunaan

Tempel string kelas Tailwind Anda ke kotak masukan (misalnya, flex items-center gap-4 p-6 bg-blue-500).
Opsional ubah pilihan pengaturan — defaultnya adalah .element.
Baca CSS yang dihasilkan di panel keluaran. Variasi responsif (md:, lg:…) dikelilingi oleh @media kueri; variasi status (hover:, focus:…) menghasilkan pilihan pengaturan mereka sendiri.
Salin hasilnya atau unduh sebagai sebuah .css file.

Fitur

Skala Spasi Lengkap – Setiap nilai margin, padding, gap, lebar, dan tinggi dari Tailwind diubah menjadi nilai canonical dalam rem atau px.
Palate Warna Lengkap – Semua 22 keluarga warna dengan variasi 50 hingga 950 diubah menjadi kode heksadesimal tepat untuk teks, latar belakang, batas, isi, dan garis.
Variasi Responsif – sm:, md:, lg:, xl:dan 2xl: dikeluarkan sebagai blok yang tepat. @media (min-width: ...) .
Variasi Status – hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, before:, after: dan lainnya menjadi pilihan pengaturan CSS atau kueri media yang sesungguhnya.
Nilai Sembarang – Sintaks kotak seperti w-[37rem] atau bg-[#abc123] dilewatkan ke pernyataan yang sesuai.
Utility Negatif – Bentuk dengan tanda garis awal seperti -mt-4 menghasilkan nilai negatif rem yang benar.
Pengaturan Kustom – Pilih pengaturan apa saja untuk mengelilingi aturan hasil (.card, #hero, dll).
Salin dan unduh – Satu klik untuk menyalin CSS atau menyimpannya sebagai file.

IKLAN · HAPUS?

 Tanya Jawab Umum

Apa perbedaan antara CSS berbasis utility dan CSS berbasis komponen?

CSS berbasis utility menyediakan kelas-kelas yang berfungsi secara khusus (misalnya, flex, p-4, text-center) yang masing-masing dipetakan ke satu pernyataan CSS, sehingga penyesuaian gaya terjadi langsung di dalam markup. CSS berbasis komponen mengelompokkan banyak pernyataan di bawah nama kelas semantik (misalnya, .card, .button) yang menggambarkan elemen tersebut daripada tampilannya. CSS berbasis utility mengorbankan ukuran HTML yang lebih besar untuk atom yang dapat digunakan ulang dan dapat diprediksi; CSS berbasis komponen mengorbankan ukuran file CSS yang lebih besar untuk abstraksi tingkat tinggi.
Bagaimana skala jarak Tailwind berhubungan dengan satuan rem?

Skala jarak default Tailwind adalah perkalian dari basis 0.25rem, di mana 1rem setara dengan 16px pada browser default. Jadi p-4 diubah menjadi padding: 1rem (16px), p-2 adalah 0.5rem (8px), dan p-6 adalah 1.5rem (24px). Kecuali untuk jarak-0 (0px) dan jarak-px (1px), yang menghindari satuan rem sehingga Anda dapat menempatkan batas pixel-perfect atau celah tipis tanpa perhitungan aritmetika.
Mengapa kerangka utilitas responsif menggunakan kueri min-width secara default?

Framework mobile-first seperti Tailwind menggunakan kueri min-width sehingga gaya dasar menargetkan viewport terkecil dan secara bertahap meningkatkan untuk layar lebih besar. Ini sesuai dengan cara browser mobile menampilkan sebelum mereka tahu tampilan akhir, menghindari flash-of-wrong-style pada koneksi lambat, dan memungkinkan setiap breakpoint mengganti hanya apa yang berubah — menjaga cascade sebagai penambahan alih-alih pengurangan.