Menggunakan Variabel Warna dan Tema Kustom di Tailwind Config

Menggunakan variabel warna dan tema kustom di Tailwind Config adalah salah satu langkah penting untuk menciptakan tampilan website yang konsisten dan sesuai dengan identitas brand. Dengan memanfaatkan file konfigurasi tailwind.config.js, kamu bisa menambahkan warna khusus, membuat mode gelap (dark mode), hingga mengatur palet warna sesuai kebutuhan proyek. Tailwind CSS dikenal karena fleksibilitas dan kemudahannya dalam kustomisasi. Namun, banyak developer pemula belum memanfaatkan sepenuhnya fitur theme customization ini. Padahal, dengan memahami cara menambahkan warna brand atau membuat mode gelap, kamu bisa mempercepat proses styling tanpa perlu menulis CSS manual terlalu banyak.

Apa Itu Tailwind Config?

File tailwind.config.js adalah pusat pengaturan Tailwind CSS. Di dalamnya, kamu bisa menambahkan berbagai konfigurasi seperti:

Warna kustom
Ukuran font tambahan
Spacing (padding dan margin)
Mode gelap (dark mode)
Dan bahkan ekstensi plugin

Secara default, Tailwind sudah menyediakan warna bawaan seperti blue, gray, red, dan sebagainya. Tapi dalam proyek nyata — misalnya untuk website perusahaan atau aplikasi brand tertentu — warna bawaan itu sering tidak cukup. Maka di sinilah pentingnya kustomisasi warna.

Mengaktifkan File tailwind.config.js

Sebelum menambahkan variabel warna, pastikan file tailwind.config.js sudah tersedia. Jika belum, buat dengan perintah berikut di terminal proyek kamu:

npx tailwindcss init

Perintah ini akan membuat file tailwind.config.js di root proyek. Di dalamnya terdapat struktur dasar seperti berikut:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Menambahkan Warna Brand di Tailwind Config

Langkah selanjutnya adalah menambahkan warna brand (warna utama yang merepresentasikan identitas proyek kamu).
Kita akan menambahkan warna baru, misalnya brand dengan beberapa varian shade.

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#6EE7B7',
          DEFAULT: '#10B981',
          dark: '#047857',
        },
      },
    },
  },
};

Dengan konfigurasi di atas, kamu bisa menggunakan warna brand di seluruh proyek seperti ini:

<button class="bg-brand text-white px-4 py-2 rounded">
  Tombol Brand
</button>

<p class="text-brand-dark">Teks warna brand gelap</p>

Kelebihan metode ini adalah konsistensi desain. Kamu tidak perlu menghafal kode hex warna setiap kali membuat elemen baru.

Menggunakan Variabel Warna dari CSS Custom Properties

Kadang kamu ingin agar warna bisa berubah secara dinamis — misalnya saat berganti tema (light/dark mode). Kamu bisa memanfaatkan CSS Custom Properties (variabel CSS).

Contoh definisi warna di file CSS global:

:root {
  --color-brand: #0ea5e9;
  --color-brand-dark: #0369a1;
}

[data-theme='dark'] {
  --color-brand: #38bdf8;
  --color-brand-dark: #0c4a6e;
}

Kemudian, di tailwind.config.js, tambahkan seperti ini:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: 'var(--color-brand)',
        'brand-dark': 'var(--color-brand-dark)',
      },
    },
  },
};

Dengan begitu, kamu bisa menggunakan:

<div class="bg-brand text-white p-4">
  Tema Warna Dinamis
</div>

Dan saat atribut data-theme="dark" aktif di HTML, warna otomatis berubah mengikuti variabel CSS yang kamu definisikan.

Menambahkan Mode Gelap (Dark Mode) di Tailwind

Tailwind menyediakan dukungan bawaan untuk dark mode. Kamu hanya perlu menambahkan konfigurasi berikut di tailwind.config.js:

module.exports = {
  darkMode: 'class', // atau 'media'
  theme: {
    extend: {},
  },
};

darkMode: 'media' → mengikuti pengaturan sistem pengguna (OS)
darkMode: 'class' → dikontrol dengan menambahkan class .dark pada elemen <html> atau <body>

Contoh penggunaannya:

<html class="dark">
  <body class="bg-white dark:bg-gray-900 text-black dark:text-white">
    <h1 class="text-brand">Mode Gelap Aktif</h1>
  </body>
</html>

Kamu juga bisa mengombinasikan mode gelap dengan warna brand:

extend: {
  colors: {
    brand: {
      light: '#93c5fd',
      DEFAULT: '#3b82f6',
      dark: '#1e40af',
    },
  },
}

Dan di HTML:

<button class="bg-brand hover:bg-brand-dark dark:bg-brand-dark dark:hover:bg-brand">
  Tombol Responsif Tema
</button>

Dengan ini, tombol otomatis berganti warna saat pengguna mengaktifkan mode gelap.

Tips Mengelola Warna dan Tema Kustom

Agar proyek tetap terstruktur dan mudah dikembangkan, berikut beberapa tips praktis:

Gunakan nama warna yang bermakna.
Hindari nama seperti primary, secondary jika tidak konsisten. Gunakan nama seperti brand, accent, atau highlight yang lebih fleksibel.
Gunakan satu sumber kebenaran.
Simpan semua kode warna hanya di satu tempat (tailwind.config.js atau file CSS global).
Gunakan mode gelap berbasis class.
Lebih mudah dikontrol dengan JavaScript dibanding media query yang otomatis.
Gunakan plugin Tailwind tambahan bila perlu.
Misalnya @tailwindcss/forms atau @tailwindcss/typography untuk tampilan yang lebih konsisten.

Contoh Kasus Lengkap

Berikut contoh kombinasi antara warna brand dan dark mode yang dapat kamu terapkan di proyek Tailwind CSS:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#86efac',
          DEFAULT: '#22c55e',
          dark: '#15803d',
        },
      },
    },
  },
  plugins: [],
};

Dan di file HTML:

<html class="dark">
  <body class="bg-gray-50 dark:bg-gray-900">
    <nav class="bg-brand dark:bg-brand-dark p-4 text-white">
      <h1 class="text-2xl font-bold">Tailwind Brand Theme</h1>
    </nav>

    <section class="p-6 text-gray-700 dark:text-gray-200">
      <p>Warna brand dan mode gelap berjalan bersamaan dengan mulus.</p>
    </section>
  </body>
</html>

Kesimpulan

Menggunakan variabel warna dan tema kustom di Tailwind Config adalah langkah penting untuk menjaga konsistensi desain sekaligus fleksibilitas tampilan. Dengan memanfaatkan tailwind.config.js, kamu bisa menambahkan warna brand sendiri, membuat mode gelap, dan bahkan menggunakan variabel CSS untuk perubahan tema dinamis.

Pendekatan ini tidak hanya membuat kode lebih rapi dan mudah dirawat, tetapi juga mempercepat pengembangan antarmuka modern yang responsif dan profesional. Jika kamu sering membuat proyek dengan Tailwind CSS, pastikan untuk menjadikan konfigurasi tema sebagai bagian awal dari workflow desainmu.