Cara menggunakan Generator Arbitrary Value Tailwind
- Tempel satu atau lebih deklarasi CSS (satu blok aturan utuh juga bisa).
- Opsional: tambahkan varian seperti
md:atauhover:. - Salin semua kelas sekaligus, atau salin satu per satu dari tabel.
Apa itu arbitrary value Tailwind?
Saat desain membutuhkan nilai yang tidak ada di theme Tailwind kamu, kamu bisa menuliskannya langsung di dalam kurung siku: w-[372px], bg-[#1da1f2], grid-cols-[1fr_200px_auto]. Untuk properti CSS yang sama sekali tidak punya utility di Tailwind, gunakan arbitrary property: [clip-path:polygon(0_0,100%_0,100%_85%,0_100%)].
Aturan sintaks yang ditangani tool ini
- Tanpa spasi: nama kelas tidak boleh mengandung spasi, jadi spasi diganti garis bawah —
1fr 200px auto→1fr_200px_auto. Spasi setelah koma langsung dihapus. - Type hint: beberapa utility ambigu dengan CSS variable (apakah
text-[var(--x)]itu warna atau ukuran?). Tool akan menambahkan hint sepertitext-[color:var(--brand)]atautext-[length:var(--size)]. - !important: diubah menjadi prefiks
!. - Properti yang tidak didukung seperti
mask-imageatauclip-pathditulis sebagai arbitrary property.
Kapan tidak perlu memakai arbitrary value
Arbitrary value cocok untuk kebutuhan sekali pakai. Jika nilai yang sama muncul di beberapa tempat, sebaiknya tambahkan ke theme. Untuk warna, gunakan tool CSS Variables to Tailwind atau Tailwind Color Generator agar tetap konsisten dan mudah dibaca.
Juga dicari sebagai: arbitrary value tailwind, tailwind kurung siku, css ke tailwind, grid-cols-[], arbitrary property tailwind, custom value tailwind, konverter css tailwind.
Tool yang cocok dipakai bersama Generator Arbitrary Value Tailwind
- Generator Glassmorphism — Desain kartu kaca buram dengan slider langsung dan salin CSS lintas browser, lengkap dengan prefix -webkit-backdrop-filter dan fallback untuk browser lama.
- Kalkulator clamp() — Masukkan ukuran minimum dan maksimum serta rentang viewport, lalu dapatkan nilai clamp() yang ramah zoom dengan penjelasan perhitungannya, pratinjau langsung, dan skala tipografi atau spasi fluid yang lengkap.
- CSS Formatter — Ubah stylesheet yang di-minify menjadi CSS yang mudah dibaca, dengan satu properti per baris dan blok @media yang tersarang dengan benar.
- Generator Animasi CSS — Desain animasi CSS di atas timeline keyframe sungguhan.
Pertanyaan yang sering diajukan
Bagaimana cara menulis spasi di Tailwind arbitrary value?
Gunakan garis bawah:
grid-cols-[1fr_auto]. Tailwind akan mengubahnya kembali menjadi spasi. Untuk menulis garis bawah sungguhan, escape dengan \_.Apa itu arbitrary property?
Kelas dalam bentuk
[property:value] untuk properti CSS yang tidak punya utility Tailwind, misalnya [mask-type:luminance].Apakah ini bisa dipakai di Tailwind v3 dan v4?
Bisa. Sintaks kurungnya sama di keduanya. Tailwind v4 juga menerima shorthand
(--var) untuk CSS variable.Kenapa ada “color:” di dalam kelas saya?
Itu adalah type hint. Hint ini memberi tahu Tailwind bahwa nilai
var() adalah warna, sehingga yang dihasilkan adalah color, bukan font-size.Bisakah saya memasang Generator Arbitrary Value Tailwind sebagai aplikasi web dan memakainya offline?
Bisa. Generator Arbitrary Value Tailwind adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.