Tailwind CSS, tasarımcılar tarafından özenle hazırlanmış devasa bir renk paleti ile gelir. Renk kodlarını (Hex, RGB) ezberlemenize gerek kalmadan, isimlendirilmiş renkler ve tonlar (shades) üzerinden ilerlersiniz.
Tailwind CSS Öğrenmek İster misin?
Projelerinizi hızlandırmak için Tailwind CSS Kursuma hemen göz atın.
1. Renk Mantığı ve Tonlama
Tailwind'de renkler {Renk İsmi}-{Ton Ağırlığı} formatında kullanılır. Ton ağırlığı 50 (en açık) ile 950 (en koyu) arasında değişir.
- red-500: Standart Kırmızı
- blue-100: Çok açık mavi (Genelde arka plan için)
- slate-900: Çok koyu gri (Genelde metin için)
2. Metin Renkleri (Text Colors)
Yazı rengini değiştirmek için text- ön eki kullanılır.
<p class="text-blue-600">Bu yazı koyu mavi renktedir.</p> <p class="text-gray-500">Bu yazı gri ve sönük renktedir.</p> <h1 class="text-black">Tam Siyah Başlık</h1>
3. Arka Plan Renkleri (Background Colors)
Arka plan rengini değiştirmek için bg- ön eki kullanılır.
<button class="bg-green-500 text-white p-2 rounded"> Yeşil Buton </button> <div class="bg-yellow-100 p-4"> Sarı arka planlı uyarı kutusu. </div>
4. Opaklık (Opacity) Ayarları
Tailwind'de bir rengin şeffaflığını ayarlamak için modern bir yazım şekli vardır. Renk sınıfının sonuna / (slash) işareti koyup yüzde değerini (0-100 arası) yazarsınız.
- bg-blue-500/50: %50 şeffaflıkta mavi arka plan.
- text-black/25: %25 görünürlükte siyah yazı.
Örnek:
<div class="bg-red-600/20 text-red-700 p-4 border border-red-600 rounded"> Hafif kırmızı arka planlı modern hata mesajı. </div>
Bu derste renkleri ve opaklığı öğrendik. Bir sonraki derste tasarımın okunabilirliğini sağlayan Tipografi (Font Boyutları ve Ağırlıklar) konusuna geçeceğiz.