Tailwind CSS Renk Sistemi Rehberi

Tailwind CSS, utility-first bir framework olarak zengin bir renk paleti sunar. gray, red, blue, green gibi renk aileleri ve her ailede 50-950 arası tonlar (50 en açık, 950 en koyu) mevcuttur. Bu sistemi anlamak ve özelleştirmek, tutarlı ve hızlı tasarım geliştirmenize yardımcı olur.

Renk sınıfları text-, bg-, border-, ring- gibi öneklerle kullanılır. Örn: bg-blue-500, text-gray-700. Gradient'ler için özel sınıflar da vardır.

Tailwind Renk Paleti Yapısı

Her renk ailesi 50, 100, 200, ... 900, 950 tonlarına sahiptir. 500 genelde ana (base) renktir. Tasarımda 50-100 arka plan, 700-900 metin için kullanılır. Slate, zinc, stone gibi nötr tonlar gray'e alternatiftir.

Gradient Yardımcıları

Tailwind'de gradient oluşturmak için bg-gradient-to-{direction} (to-r, to-b, to-br, to-t vb.) ve from-, via-, to- sınıfları kullanılır.

<div class="bg-gradient-to-r from-blue-500 to-purple-600">
  Gradient kutu
</div>

<div class="bg-gradient-to-br from-indigo-400 via-purple-500 to-pink-500">
  Üç renkli gradient
</div>

Tema Özelleştirme ve Genişletme

tailwind.config.js içinde theme.extend.colors ile yeni renkler ekleyebilirsiniz. Marka renklerinizi buraya tanımlayıp tüm projede tutarlı kullanırsınız.

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        },
      },
    },
  },
};

Dark Mode

dark: öneki ile karanlık tema sınıfları uygulanır. dark:bg-gray-900 dark:text-white gibi. Class veya media stratejisi config'de ayarlanır. Tema değişiminde JavaScript ile dark class'ı html/body'ye eklenir.

Arbitrary Values

Özel renk değerleri köşeli parantez ile kullanılır: bg-[#1a1a2e], from-[#667eea]. Tasarım dosyasından aldığınız tam HEX değerlerini hızlıca denemenize olanak tanır.

İlgili rehberler: CSS Değişkenleri ile Tema · Palette ve Tints · Araç (Tailwind çıktısı) · Marka Renkleri