Tailwind punya palet warna siap pakai, dan cara memakainya selalu sama: awalan properti, nama warna, lalu angka shade (tingkat terang-gelapnya). text-blue-600 mewarnai huruf dengan biru tingkat 600, bg-yellow-100 memberi latar kuning tingkat 100. Bayangin kipas contoh warna di toko cat. Tiap warna punya satu lembar, dan di lembar itu ada deretan kotak dari yang paling pucat sampai paling pekat, masing-masing bernomor. Kamu tinggal sebut lembarnya (blue) dan nomornya (600).
🧪 Tebakan cepat: paragraf di halaman putih dikasih
text-yellow-100. Teksnya kebaca gak? Tebak dulu, jawabannya ada di bagian "Angka shade: 50 paling terang".
Rumus nama class warna
Ini dua elemen dari latihan:
<p id="judul" class="text-blue-600">Judul Biru</p>
<div id="kotak" class="bg-yellow-100">Kotak Kuning</div>
text-blue-600membuatcolor: var(--color-blue-600): warna huruf judulnya jadi biru.bg-yellow-100membuatbackground-color: var(--color-yellow-100): latar kotaknya jadi kuning muda.- Tiap class dipasang di elemennya sendiri: warna teks di
#judul, warna latar di#kotak.
Polanya {awalan}-{warna}-{shade}, dan awalannya menentukan properti yang diwarnai:
| Awalan | Properti CSS | Contoh |
|---|---|---|
text- |
color (warna huruf) |
text-red-500 |
bg- |
background-color (warna latar) |
bg-red-500 |
border- |
border-color (warna garis tepi) |
border-red-500 |
Warna yang gak punya shade cukup ditulis namanya: text-white, bg-black, bg-transparent.
Angka shade: 50 paling terang
Tiap warna punya 11 shade: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 dan 950. 50 paling terang, nyaris putih. 950 paling gelap, nyaris hitam. 500 ada di tengah.
| Shade | Kesannya | Cocok buat |
|---|---|---|
| 50 sampai 200 | pucat | latar lembut, misalnya bg-yellow-100 |
| 400 sampai 600 | warna penuh | tombol, ikon, aksen |
| 600 sampai 950 | pekat | teks di latar terang, misalnya text-blue-600 |
Jadi text-yellow-100 di halaman putih hampir gak kebaca: kuning 100 itu nyaris putih. Itu jawaban tebakannya. Teks di latar terang pakai 600 ke atas. Teks di latar gelap pakai 100 sampai 200, atau text-white.
Warna yang tersedia
- Abu-abu:
slate,gray,zinc,neutral,stone. - Berwarna:
red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose. - Tailwind v4.2 menambah empat abu-abu lagi:
mauve,olive,mist,taupe.
Di v4 nilainya ditulis dalam format warna oklch, misalnya blue-600 = oklch(54.6% 0.245 262.881). Kamu gak perlu hafal angkanya, cukup nama dan shade-nya.
Transparan dengan garis miring
Tambahkan / dan angka persen di belakang class warna:
<div class="bg-black/50 text-white p-4">Teks di atas foto</div>
bg-black/50= latar hitam dengan opacity 50%. Foto di belakangnya tetap kelihatan, cuma lebih gelap, jadi teks putihnya kebaca.- Bisa di warna apa pun:
text-blue-600/75,bg-yellow-100/50.
💡 Gradien
<div class="bg-linear-to-r from-blue-500 to-purple-500 text-white p-4">Gradien</div>
bg-linear-to-rmembuatlinear-gradientke arah kanan (r= right). Ini nama di v4. Tutorial v3 menulisnyabg-gradient-to-r, dan v4 masih menerimanya.from-blue-500warna awal,to-purple-500warna akhir.
⚠️ Jebakan yang sering ketemu
- Class dipasang di elemen yang salah.
text-blue-600harus di#judul,bg-yellow-100di#kotak. Latihan mengecek pasangan id dan class-nya, jadi tukar tempat pun gagal. - Lupa angka shade.
text-blueataubg-yellowgak ada di palet, jadi gak ada CSS yang dibuat dan warnanya gak berubah. - Awalan dari nama properti CSS.
color-blue-600danbackground-yellow-100bukan class Tailwind. Awalannyatext-danbg-. - Nama warna dirakit dari teks.
"bg-" + warna + "-500"gak ketemu waktu Tailwind membaca file-mu. Tulis class-nya utuh.
TL;DR: Class warna ditulis {awalan}-{warna}-{shade}: text- buat warna huruf (color), bg- buat latar (background-color), border- buat garis tepi. Shade 50 paling terang, 950 paling gelap, 500 di tengah. Teks di latar terang pakai 600 ke atas (text-blue-600), latar lembut pakai 50 sampai 200 (bg-yellow-100). text-white dan bg-black gak punya angka. Garis miring bikin transparan: bg-black/50 = hitam 50%. Gradien v4: bg-linear-to-r from-blue-500 to-purple-500. Pasang tiap class di elemen yang tepat, dan jangan lupa angka shade-nya.
