Custom Values — Tailwind CSS

Tailwind mendukung arbitrary values untuk nilai di luar skala bawaan: Custom values Arbitrary properties: Custom CSS property Arbitrary variants: Item ketiga…

Kadang desain minta angka yang gak ada di skala Tailwind, misalnya lebar persis 200px. Untuk itu ada arbitrary value (nilai bebas): tulis nilainya di dalam kurung siku, w-[200px], dan Tailwind menyalin isinya apa adanya ke CSS. Bayangin beli baju. Biasanya kamu ambil dari rak: S, M, L, cepat dan ukurannya seragam. Kalau gak ada yang pas, kamu ke penjahit dan minta ukuran persis. Skala Tailwind itu raknya, kurung siku itu penjahitnya.

🧪 Tebakan cepat: w-[200], tanpa px. Kotaknya jadi selebar berapa? Tebak dulu, jawabannya ada di bagian "Isi kurung siku ditulis apa adanya".

Kurung siku: nilai yang persis

Desainnya minta kotak biru 200 × 60px. Skala lebar Tailwind punya w-48 (192px) dan w-52 (208px), dua-duanya meleset. Jadi lebar dan tingginya ditulis sendiri:

<div id="custom" class="w-[200px] h-[60px] bg-blue-500">
  Custom Size
</div>

Class	CSS yang dihasilkan	Artinya
`w-[200px]`	`width: 200px;`	lebar persis 200px
`h-[60px]`	`height: 60px;`	tinggi persis 60px
`bg-blue-500`	`background-color: var(--color-blue-500);`	biru dari palet bawaan

Bentuknya selalu sama: nama utilitas, tanda hubung, lalu nilai CSS di dalam [ ]. w- jadi width, h- jadi height, bg- jadi background-color.
Warnanya tetap bg-blue-500 dari palet. Yang butuh nilai bebas cuma lebar dan tingginya, jadi jangan semua class dijadikan kurung siku.

Isi kurung siku ditulis apa adanya

Tailwind gak memeriksa apakah isi kurung siku itu CSS yang valid. Dia menyalinnya ke CSS, lalu browser yang menilai.

Kamu tulis	CSS yang dihasilkan	Hasil di browser
`w-[200px]`	`width: 200px;`	lebar 200px
`w-[200]`	`width: 200;`	gak valid, dibuang
`w-200px`	gak ada	bukan class Tailwind
`w-[50%]`	`width: 50%;`	setengah lebar induknya
`p-[10px_20px]`	`padding: 10px 20px;`	garis bawah jadi spasi

Jawaban tebakannya: w-[200] gak bikin kotak 200px. Tailwind menulis width: 200, tapi angka tanpa satuan gak valid untuk width, jadi browser membuangnya. Kotaknya kembali ke lebar bawaan <div>: selebar induknya. Gak ada pesan error sama sekali, makanya jebakan ini sering lolos.

Kenapa spasi diganti _? Atribut class dipisah per spasi. p-[10px 20px] dibaca sebagai dua class, p-[10px dan 20px], dan dua-duanya gak menghasilkan apa-apa.

Bukan cuma ukuran: warna dan lainnya

Kurung siku bisa dipakai di hampir semua utilitas:

<p class="text-[13px] text-[#ff6600]">Teks oranye 13px</p>
<div class="bg-[#1da1f2] mt-[13px]">Biru khusus, jarak atas 13px</div>
<div class="grid grid-cols-[200px_1fr]">Kolom 200px, lalu sisanya</div>

text-[#ff6600] jadi color: #ff6600. Hex, rgb(...), dan hsl(...) semuanya boleh.
text-[13px] jadi font-size: 13px. Tailwind tahu 13px itu ukuran dan #ff6600 itu warna, jadi dua-duanya bisa pakai text-.
Punya variabel CSS sendiri, misalnya --brand? Di Tailwind v4 tulis pakai kurung biasa: bg-(--brand) jadi background-color: var(--brand).

Kapan skala, kapan kurung siku

Skala dulu. Jarak dan ukuran dari skala bikin halaman rapi dan seragam. Di Tailwind v4, angka spacing boleh berapa saja, tiap angka = 4px: w-50 = 200px, h-15 = 60px.
Kurung siku untuk nilai sekali pakai yang memang gak ada di skala: ikon 37px, posisi top-[117px], warna dari logo klien.
Nilai yang dipakai berulang, misalnya warna brand di 30 tombol, lebih baik jadi token tema dengan @theme, lalu dipanggil bg-brand. Itu dibahas di materi Tailwind Config.

Editor latihan memakai Tailwind v4, sama seperti Playground, jadi w-50 dan h-15 juga jalan di sana. Tapi latihannya soal kurung siku, jadi tulis w-[200px] dan h-[60px].

⚠️ Jebakan yang sering ketemu

Lupa satuan. w-[200] dibuang browser. Tulis w-[200px] dan h-[60px], lengkap dengan px. Latihannya mengecek lebar 200px dan tinggi 60px.
Lupa kurung siku. w-200px bukan class, jadi gak ada CSS-nya. Nilainya harus di dalam [ ].
Spasi di dalam kurung. p-[10px 20px] pecah jadi dua class. Pakai garis bawah: p-[10px_20px].
Sintaks variabel v3. bg-[--brand] di v4 jadi background-color: --brand, gak valid. Pakai bg-(--brand) atau bg-[var(--brand)].

TL;DR: Nilai yang gak ada di skala ditulis di kurung siku: w-[200px] jadi width: 200px, h-[60px] jadi height: 60px, text-[#ff6600] jadi color: #ff6600. Isinya disalin apa adanya, jadi satuannya wajib (w-[200] dibuang browser), spasi diganti _, dan tanpa kurung siku (w-200px) gak ada CSS sama sekali. Pakai skala bawaan dulu, kurung siku untuk nilai sekali pakai, dan @theme untuk nilai yang dipakai berulang. Variabel CSS di v4 ditulis bg-(--brand).