Manajemen Warna & Latar

Kenapa ini penting

Warna adalah hal pertama yang ditangkap mata dan sangat terkait dengan identitas brand. Bayangkan aplikasi bank yang tiba-tiba memakai warna oranye neon, atau tombol "Hapus" berwarna hijau. Warna juga punya fungsi: merah untuk bahaya, hijau untuk sukses, abu-abu untuk teks sekunder.

Tailwind memberi palet lengkap yang sudah seimbang, cara mudah mengatur transparansi, gradient, gambar latar, dan yang paling penting, cara mendaftarkan warna brand sendiri di @theme sehingga seluruh tim memakai kode warna yang sama.

Konsep inti

Palet bawaan

Tailwind punya 20+ keluarga warna (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), masing-masing dengan shade 50 sampai 950. Angka kecil = terang, angka besar = gelap. Di v4, palet didefinisikan dengan ruang warna OKLCH, yang menghasilkan warna lebih hidup di layar modern dan gradasi kecerahan yang lebih merata.

Warna dipakai dengan awalan properti: bg- (latar), text- (teks), border-, ring-, outline-, fill- dan stroke- (SVG), shadow-, decoration-, accent- (checkbox/radio), caret- (kursor ketik).

Analogi: palet Tailwind seperti kotak pensil warna 22 warna × 11 tingkat. Kamu tidak perlu mencampur cat sendiri setiap kali.

Opacity dengan garis miring

bg-black/50 berarti hitam dengan opacity 50%. Berlaku untuk semua utility warna: text-white/80, border-gray-900/10, bahkan nilai bebas bg-indigo-600/[0.37]. Ini jauh lebih baik daripada class opacity-50, karena opacity-* membuat seluruh elemen (termasuk teks di dalamnya) transparan.

Gradient

Di v4, gradient linear ditulis bg-linear-to-r (ke kanan), bg-linear-to-br (ke kanan bawah), atau dengan sudut bebas bg-linear-45. Penulisan v3 bg-gradient-to-r masih didukung, tetapi gaya v4 adalah bg-linear-*. Ada juga bg-radial dan bg-conic. Titik warna diatur dengan from-*, via-*, to-*, dan posisinya dengan from-10%, to-90%.

Gambar latar

Gunakan arbitrary value: bg-[url(/img/hero.jpg)]. Lengkapi dengan bg-cover (memenuhi area), bg-center, bg-no-repeat, bg-fixed (efek parallax sederhana). Untuk teks di atas foto, tambahkan lapisan gelap agar teks terbaca.

Warna kustom di `@theme`

Variabel dengan namespace --color-* otomatis menjadi semua utility warna. --color-brand-500: #0ea5e9; menghasilkan bg-brand-500, text-brand-500, border-brand-500, dan seterusnya. Kalau ingin menghapus palet bawaan tertentu, set ke initial: --color-lime-*: initial;. Untuk memakai hanya warnamu sendiri, --color-*: initial; lalu definisikan semuanya.

Bonus: semua warna tema tersedia sebagai CSS variable biasa, jadi di CSS kustom kamu bisa menulis color: var(--color-brand-500);.

Contoh kode

/* src/style.css */
@import "tailwindcss";

@theme {
  /* Warna brand "Laut" dengan beberapa shade */
  --color-laut-50: oklch(0.97 0.02 230);
  --color-laut-500: oklch(0.62 0.15 230);
  --color-laut-700: oklch(0.45 0.13 235);
  /* Warna semantik sederhana */
  --color-sukses: #16a34a;
  --color-bahaya: #dc2626;

  /* Hapus keluarga warna yang tidak dipakai tim */
  --color-lime-*: initial;
  --color-fuchsia-*: initial;
}

/* CSS kustom tetap bisa memakai token yang sama */
.garis-brand {
  border-left: 4px solid var(--color-laut-500);
}

<!-- Memakai warna kustom -->
<button class="rounded-md bg-laut-500 px-4 py-2 text-white hover:bg-laut-700">Berlayar</button>
<p class="text-sukses">Data tersimpan.</p>
<p class="text-bahaya">Gagal terhubung.</p>

<!-- Opacity dengan garis miring vs opacity-* -->
<div class="bg-black/50 p-4 text-white">Latar transparan 50%, teks tetap pekat</div>
<div class="bg-black p-4 text-white opacity-50">Seluruh kotak termasuk teks jadi pudar</div>

<!-- Gradient linear v4 -->
<div class="h-32 rounded-xl bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500"></div>
<!-- → gradasi ungu ke merah muda dari kiri ke kanan -->

<div class="h-32 rounded-xl bg-linear-45 from-amber-300 to-rose-500"></div>
<!-- → gradasi diagonal 45 derajat -->

<!-- Teks bergradient -->
<h1 class="bg-linear-to-r from-sky-500 to-emerald-500 bg-clip-text text-5xl font-black text-transparent">
  Ombak Biru
</h1>

<!-- Hero dengan gambar latar dan overlay gelap -->
<section class="relative grid h-96 place-items-center bg-[url(https://picsum.photos/seed/pantai/1600/900)] bg-cover bg-center">
  <div class="absolute inset-0 bg-black/50"></div>
  <h2 class="relative text-4xl font-bold text-white">Liburan ke Pantai</h2>
</section>
<!-- → foto pantai dengan lapisan hitam 50%, judul putih jelas terbaca -->

Kesalahan umum

Memakai opacity-50 padahal hanya ingin latar transparan. Gunakan bg-black/50 agar teks tetap pekat.
Mencampur bg-gradient-to-r dan bg-linear-to-r dalam satu proyek. Pilih gaya v4 (bg-linear-*) agar konsisten.
Menulis kode hex berulang dengan arbitrary value (bg-[#0ea5e9] di 30 tempat). Daftarkan sebagai --color-*.
Teks di atas foto tanpa overlay, sehingga sulit dibaca. Tambahkan lapisan bg-black/40 atau gradient gelap.
Menghapus semua warna (--color-*: initial) tanpa mendefinisikan white dan black. Utility bg-white ikut hilang. Definisikan ulang warna dasar yang kamu butuhkan.

Latihan

Mudah, Buat kotak notifikasi hijau muda (bg-green-50) dengan teks hijau tua dan border hijau transparan 30%.
Sedang, Daftarkan warna brand --color-mangga-500: #f59e0b dan --color-mangga-600: #d97706, lalu buat tombol yang memakainya beserta efek hover.
Menantang, Buat banner promo dengan gradient diagonal dari amber-400 ke rose-500, teks judul putih, dan sebuah tombol putih dengan teks berwarna rose-600.

Lihat solusi

Notifikasi:

<div class="rounded-lg border border-green-600/30 bg-green-50 p-4 text-green-800">
  Pembayaran berhasil diterima.
</div>

Warna mangga:

@import "tailwindcss";
@theme {
  --color-mangga-500: #f59e0b;
  --color-mangga-600: #d97706;
}

<button class="rounded-md bg-mangga-500 px-4 py-2 font-semibold text-white hover:bg-mangga-600">Pesan</button>

Banner promo:

<section class="rounded-2xl bg-linear-to-br from-amber-400 to-rose-500 p-8 text-center">
  <h2 class="text-3xl font-extrabold text-white">Diskon 50% Akhir Pekan</h2>
  <p class="mt-2 text-white/90">Berlaku sampai Minggu pukul 23.59</p>
  <a href="#" class="mt-6 inline-block rounded-full bg-white px-6 py-3 font-semibold text-rose-600">Belanja Sekarang</a>
</section>

Ringkasan

Palet bawaan memakai OKLCH, shade 50 (terang) sampai 950 (gelap).
Opacity per warna ditulis dengan garis miring: bg-black/50.
Gradient v4: bg-linear-to-* atau bg-linear-<sudut>, plus from-*, via-*, to-*.
Gambar latar: bg-[url(...)] + bg-cover bg-center, tambahkan overlay untuk teks.
Warna kustom didaftarkan sebagai --color-* di @theme, dan bisa dihapus dengan initial.