Admin Fahru

Pengaturan Warna pada Project Tailwind CSS

Logo Tailwind CSS

Warna adalah salah satu komponen penting dalam desain. Warna memberi banyak pengaruh pada sebuah tampilan website, selain menjadi daya tarik utama, warna juga memberi efek psikologis pada orang yang melihatnya. Umumnya warna menjadi identitas tersendiri bagi perusahaan, sebut saja birunya Facebook, hijaunya Tokopedia, dan lainnya.

Warna pada Tailwind CSS bersifat umum yang berlaku pada text, background, border, placeholder, ring, dan divide.

Artikel ini akan berfokus pada pengenalan warna bawaan Tailwind CSS, cara menggunakan warna pada project, menyertakan warna tambahan, dan cara mengkustomisasi warna dalam Tailwind CSS.

Warna Default

Tailwind CSS memiliki 8 warna bawaan (default) yang didesain oleh pembuatnya agar dapat mempermudah pekerjaan web developer. Warna tersebut antara lain grey, red, yellow, green, blue, indigo, purple, dan pink. Setiap warna memiliki rentang gelap yang bervariasi dari 50 (cerah) sampai 900 (sangat gelap).

Berikut ini warna bawaan dari Tailwind CSS :

Cara Penggunaan Warna

Cara penggunaan warna pada Tailwind CSS mengikuti pola prefix - warna. Prefix yang didukung saat artikel ini dibuat adalah sebagai berikut :

Prefix Definisi Contoh
bg- Background / Warna latar bg-blue-500
border- Warna pada batasan elemen html border-blue-500
text- Warna pada teks text-blue-500
placeholder- Warna pada placeholder dalam input teks placeholder-blue-500
ring- Warna pada ring (bagian luar border) elemen html ring-blue-500
ring- Warna pada ring (bagian luar border) elemen html ring-blue-500
divide- Warna pada divide (border pembatas) antar elemen html divide-blue-500

Contoh elemen button yang menggunakan warna background biru dengan warna text putih

<button class="bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg" type="button">
  Button
</button>

Mendefinisikan warna kustom.

Kadang kita perlu menambahkan warna kustom yang sesuai dengan warna tema perusahaan, maka kita bisa mendefinisikan warna kustom secara langsung pada pengaturan tailwind.config.js.

Contohnya kita tambahkan warna biru tosca seperti berikut ini         maka cara menambahkan di konfigurasi tailwind sebagai berikut :

// tailwind.config.css
module.exports = {
  // .. kode sebelum theme: {}
  theme: {
    extend: {
      colors: {
        'biru-tosca': '#00a4a9'
      }
    },
  },
  //.. kode setelah theme: {}
}

Cara penggunaannya pun sama seperti warna lainnya, kita hanya perlu menambahkan -biru-tosca pada prefix yang diinginkan.

Ekstensi Warna Tailwind CSS

Tailwind CSS menyediakan warna tambahan yang dapat digunakan jika telah diaktifkan atau diatur pada tailwind.config.js. Varian warna ini antara lain blueGray, coolGray, trueGray, warmGray, orange, amber, yellow, lime, emerald, teal, cyan, lightBlue, indigo, violet, purple, fuchsia, pink, dan rose.

Karena ekstensi warna atau warna tambahan maka kita perlu mengatur terlebih dahulu config tailwind agar bisa menggunakannya. Di bawah ini kode untuk meng-extend warna yang diatur dalam tailwind.config.js.

// tailwind.config.css
// tambahkan library tailwind/color
const colors = require('tailwindcss/colors')

module.exports = {
  // .. kode sebelum theme: {}
  theme: {
    extend: {
      colors: {
        'blue-gray': colors.blueGray,
        'cool-gray': colors.coolGray,
        'true-gray': colors.trueGray,
        'warm-gray': colors.warmGray,
        'orange': colors.orange,
        'amber': colors.amber,
        'lime': colors.lime,
        'emerald': colors.emerald,
        'teal': colors.teal,
        'cyan': colors.cyan,
        'light-blue': colors.lightBlue,
        'indigo': colors.indigo,
        'violet': colors.violet,
        'purple': colors.purple,
        'fuchsia': colors.fuchsia,
        'pink': colors.pink,
        'rose': colors.rose,
        'biru-tosca': '#00a4a9'
      }
    },
  },
  //.. kode setelah theme: {}
}

Jika menggunakan kode diatas, maka contoh penggunaan warna adalah bg-lime-500 untuk mengatur background berwarna lime, text-cyan-500 untuk mengatur warna teks menjadi cyan, dan lain sebagainya.

Berikut versi lengkap warna yang ada pada Tailwind CSS

Silahkan kunjungi dokumentasi resmi Tailwind CSS mengenai warna di laman berikut : Customizing Colors - Tailwind CSS.


Pengaturan
Mode
Warna
Search panel