Mendobrak Batas: Nilai Sembarang (Arbitrary Values)
Bayangkan kamu sedang bekerja, lalu sang Desainer UI meminta sebuah kotak dengan warna persis #1DA1F2 (Biru Twitter)
atau tinggi yang sangat janggal seperti persis 317px.
Tidak ada bg-twitter ataupun
h-317 di dalam kelas bawaan
Tailwind. Haruskah kita mengeluh dan mengotori `tailwind.config.js` hanya untuk satu elemen kecil ini?
Tidak Pula! Kenalkan: Kurung Siku Ajaib [].
🎨 1. Injeksi Nilai Secara Langsung (Just-in-Time)
Sejak versi Just-in-Time (JIT) compiler dirilis, Tailwind mengizinkan kita menyisipkan nilai mentah CSS di dalam tanda kurung siku (Bracket) pada utilitas apapun. Compiler Tailwind akan secara cerdas menciptakan class tersebut di detik itu juga!
Warna Hex Spesifik
bg-[#1DA1F2]
Ukuran Pixel Aneh
h-[47px]
Grid Kolom Dinamis
grid-cols-[1fr_2fr]
🧬 2. Utilitas Sembarang (Arbitrary Properties)
Bagaimana jika CSS yang kamu butuhkan belum didukung oleh utilitas
Tailwind versi manapun? (Contoh nyata: Membuat gaya rambut gradasi text transparan `-webkit-text-fill-color`,
atau property CSS terbaru yang rilis besok lusa).
Gunakan nama Property CSS persis seperti aslinya di dalam kurung siku dengan sintaks: [properti:nilai]!
Text Efek
Fading Modern
Tulisan ini menghilang transparan di bagian
bawahnya berkat kombinasi mask-image murni CSS yang diinjeksi ke Tailwind.
Trik ini membebaskanmu dari kebutuhan membuka file CSS murni (style.css) lagi.
🎭 3. Membaca Tema (Theme) dari Dalam Kurung Siku
Kurung siku ini ternyata bisa "berbicara" dengan file tailwind.config.js. Gunakan
sintaks fungsi theme() di
dalamnya jika butuh mengakses warna global tapi digunakan di properti CSS mentah.
Shadow berlapis unik dibuat manual memakai:
[box-shadow:0_0_0_4px_theme('colors.indigo.500'),0_3px_5px_theme('colors.indigo.200')]
⚠️ Peringkat Darurat: Kapan JANGAN Menggunakan Ini
Meskipun Nilai Sembarang [] sangat hebat
(bagaikan lem ajaib super kuat), jangan jadikan ini kebiasaan!
- Sebagai aturan industri, jika kamu mengulangi kode
bg-[#FF007F]lebih dari 3 kali di file yang berbeda, kamu DIWAJIBKAN mundur dan mendaftarkan warna tersebut ke file konfigurasi globaltailwind.config.js. - Penggunaan `[]` berlebih akan menghancurkan sistem konsistensi desain (Design System). Tiba-tiba di pojok kiri atas *padding* menjadi `p-[17px]` sedangkan di kanan menjadi `p-[18px]`. Sangat buruk!
- Gunakan Bracket Injeksi ini eksklusif HANYA untuk "Sekali-Pakai-Buang" (One-off styling) yang tidak ada utilitasnya dan tidak relevan dimasukkan sebagai Tema Global.