Tips Tailwind V4 Terbaru : Menambahkan Custom Class Color di Tailwind 4

Daftar Isi

  • Benefit Setelah Baca
  • Pastikan Tailwind Sudah Terpasang
    1. Install Tailwind CSS
  • Tambahin Warna Custom
  • Kustomisasi Lainnya
  • Kesimpulan

Buat kamu yang sering ngoding tampilan (alias slicing) pakai Tailwind CSS, pasti udah tau betapa enaknya pake utility class kayak text-red-500, bg-blue-200, dan semacamnya. Tapi kadang, desain dari Figma atau brand yang kita garap punya warna-warna khusus yang nggak ada di bawaan Tailwind.

Nah, daripada tiap kali nulis text-["#00008B"] , bg-["#00008B"] atau nyari warna manual, mending sekalian tambahin aja ke konfigurasi Tailwind-nya. Jadi kita bisa pake class kayak text-dark_blue, bg-dark_blue, dan lain-lain. Gampang kok!

Benefit Setelah Baca

  • ✅ Mudah Menambahkan Class Warna Kustom
  • ✅ Lebih Efisien
  • ✅ Konsisten Desain
  • ✅ Mempersingkat Waktu Slicing

Pastikan Tailwind Sudah Terpasang

Buat kamu yang baru mulai, ini cara paling simple buat setup Tailwind:

1. Install Tailwind CSS

Buka Terminal terus ketik :

npm install tailwindcss @tailwindcss/cli

Ini bakal install Tailwind CSS dan CLI-nya biar kamu bisa compile file CSS dari class Tailwind.

2. Import Tailwind CSS

Jangan lupa buat folder src dulu baru bikin file CSS misalnya input.css, terus isi dengan ini :

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

Ini gunanya buat masukin semua base class Tailwind ke file kamu.

3. Jalankan Build Tailwind

Ketik perintah ini di terminal:

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

Artinya: kamu compile dari input.css jadi output.css, dan --watch bikin dia update otomatis kalau ada perubahan class.

4. Tambahin CSS-nya ke HTML

Sekarang tinggal hubungkan file CSS yang udah jadi (output.css) ke HTML kamu:

<!-- src/index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./output.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </body>
</html>

Done! Tailwind-nya udah siap kamu pakai!

Tambahin Warna Custom

Misalnya kamu punya warna branding #00008B (biru gelap) dan pengen pakai dia di project-mu. Di Tailwind 4, kamu cukup buka file input.css dan tambahkan:

@theme {
  --color-dark_blue: #00008B;
  --color-primary: #83D987;
}

Tailwind otomatis bikin class-class berikut:

  • text-dark_blue
  • bg-dark_blue
  • border-dark_blue
  • ring-dark_blue
  • dan lainnya

Jadi kamu tinggal panggil aja class-nya di HTML:

<h1 class="text-dark_blue">BuildWithAngga</h1>
<button class="bg-primary text-white py-2 px-4">
  Tombol
</button>

Hasil :

Result Custom Color

Kustomisasi Lainnya

Sama juga caranya. Misalnya kamu pengen bikin ukuran teks extra-giant tinggal tambahkan:

@theme {
  --text-extra_giant: 200px;
}

Nanti bisa langsung kamu pakai:

<h1 class="text-dark_blue text-extra_giant">BuildWithAngga</h1>

Hasil :

Result Custom Text Size

Kesimpulan

Tailwind CSS 4 bikin kustomisasi jadi lebih gampang, lebih cepat, dan lebih ringan.

Kalau kamu suka styling yang ringkas dan fleksibel, Tailwind 4 ini cocok banget buat kamu. Slicing jadi lebih lancar, nggak banyak mikir, tinggal gas!