Konverter CSS Variables ke Tailwind Config

Apa yang dilakukan konverter ini?

Banyak proyek dimulai dengan design tokens yang ditulis sebagai CSS custom properties, misalnya --primary: #ff0055; atau --brand-500: #6366f1;. Saat mulai memakai Tailwind, kamu perlu warna yang sama di theme-nya agar class seperti bg-primary dan text-brand-500 tersedia. Mengetik ulang semuanya lambat dan rawan salah. Tool ini membaca setiap custom property, mengambil yang berupa warna, lalu menyusun struktur Tailwind untuk kamu.

Cara variabel dikelompokkan

• --brand-50 sampai --brand-900 menjadi objek bertingkat brand: { 50: …, 900: … }, sehingga kamu mendapat bg-brand-50 sampai bg-brand-900.
• Akhiran seperti -light, -dark, -hover, dan -foreground dikelompokkan di bawah nama dasarnya. Variabel tanpa akhiran menjadi DEFAULT, jadi bg-primary dan bg-primary-light sama-sama bisa dipakai.
• Awalan color- dihapus (--color-surface menjadi surface).
• Token non-warna seperti --radius-md: 8px atau font stack dilewati dan ditampilkan dalam daftar.

Tailwind v3 vs v4

Tailwind v3 mengatur warna lewat JavaScript di theme.extend.colors. Tailwind v4 memindahkan konfigurasi ke CSS: variabel --color-* di dalam blok @theme otomatis menghasilkan utility warna. Palet default v4 juga memakai OKLCH, itulah sebabnya output v4 mengubah nilai literal menjadi oklch().

Nilai literal atau referensi var()?

Dengan referensi variabel (primary: 'var(--primary)'), kamu bisa mendefinisikan ulang --primary di dalam .dark atau theme brand, dan setiap class Tailwind akan mengikuti secara otomatis. Perlu dicatat bahwa Tailwind v3 tidak bisa menerapkan modifier opacity seperti bg-primary/50 pada warna var() biasa. Jika membutuhkannya, simpan channel warnanya saja (misalnya --primary: 255 0 85 dengan rgb(var(--primary) / <alpha-value>)). Tailwind v4 menangani modifier opacity pada variabel lewat color-mix().

Juga dicari sebagai: tailwind config, css custom properties ke tailwind, konversi warna css ke tailwind, tailwind colors, theme tailwind, @theme, design tokens, tailwind v4.

Tool yang cocok dipakai bersama CSS Variables ke Tailwind

• Generator Warna Tailwind — Tempel satu warna brand dan dapatkan skala shade 11 langkah (50 sampai 950) yang seimbang, dibangun dengan OKLCH — lengkap dengan petunjuk kontras dan ekspor untuk Tailwind v3, v4, CSS, dan SCSS.
• Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
• CSS Formatter — Ubah stylesheet yang di-minify menjadi CSS yang mudah dibaca, dengan satu properti per baris dan blok @media yang tersarang dengan benar.
• Pencari Nama Warna — Tempel kode HEX untuk mendapatkan nama warna yang paling mendekati dan nama token yang rapi untuk CSS, SCSS, JavaScript, atau konfigurasi Tailwind kamu.