Fitur Rahasia Tailwind CSS: Menggunakan Arbitrary Values [ ]

Saat Tailwind Kehabisan Pilihan

Kekuatan utama Tailwind CSS adalah konsistensinya. Pembuatnya sudah menyediakan angka-angka sakti. Untuk jarak, kamu disuruh pakai mt-4 (margin top 16px) atau mt-5 (margin top 20px). Untuk warna biru, kamu disuruh pakai palet bawaan bg-blue-500.

Tapi di dunia kerja nyata, seorang Desainer UI sering kali sangat cerewet. Desainer memintamu membuat margin sebesar tepat 17px, dan *background* tombolnya harus persis menggunakan warna brand perusahaan: #FF5733.

Pemula biasanya akan menyerah, membuat kelas di HTML, lalu menuliskan sisanya di file custom.css tradisional. TUNGGU! Tailwind sudah memikirkan masalah ini dengan merilis fitur Arbitrary Values (Nilai Sembarang).

Sihir Kurung Siku [ ]

Mulai Tailwind versi 3.0 ke atas, kamu bisa memasukkan angka atau teks "sembarangan" yang tidak ada di daftar bawaan Tailwind dengan cara menyisipkannya di dalam Tanda Kurung Siku [ ] langsung di kelas HTML!

Contoh 1: Mengatur Jarak (Spacing) Spesifik

Daripada menebak apakah mt-4 itu berapa pixel, paksakan saja angkamu sendiri:

<!-- Margin-top diubah paksa menjadi tepat 17 pixel -->
<div class="mt-[17px] mb-[3vh] p-[2.5rem]">
  Isi konten
</div>

Contoh 2: Menggunakan Warna Hex Kustom (Brand Color)

Tidak perlu menyetting file tailwind.config.js jika warna itu hanya digunakan 1 kali saja di seluruh website.

<!-- Warna teks, background, dan border custom langsung di HTML! -->
<button class="bg-[#FF5733] text-[#ffffff] border-2 border-[#123456]">
  Beli Sekarang
</button>

Contoh 3: CSS Grid Buatan Sendiri

Jika fitur Grid kolom bawaan Tailwind tidak memuaskan untuk *Layout Responsive* yang aneh, kamu bisa menyuntikkan *Property String* CSS murni di dalamnya.

<!-- Membuat grid kolom yang ukurannya min 200px dan sisanya flekibel 1fr -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))]">
  <div>Card 1</div>
  <div>Card 2</div>
</div>

Aturan Penggunaan: Kapan Jangan Memakainya?

Fitur Kurung Siku (Arbitrary Values) ini ibarat obat darurat. Sangat hebat, tapi jangan dipakai terus-menerus!

Jika kamu mendapati dirimu menulis bg-[#FF5733] di 20 file halaman yang berbeda, itu artinya kamu telah melanggar prinsip kebersihan kode. Untuk warna utama perusahaan (Brand Identity) yang akan terus diulang-ulang, letakkanlah kode *hex* tersebut di dalam file tailwind.config.js pada bagian theme > extend > colors, agar kamu bisa memanggilnya dengan cantik menggunakan bg-brand-orange.