Skill'in Kendi İfadeleriyle
Tailwind CSS v4 (2024+) üzerinde production'a hazır tasarım sistemleri oluşturur. CSS öncelikli yapılandırma sürecini, app.css içindeki @theme'in tailwind.config.ts'nin yerini nasıl aldığını, OKLCH ile yazılmış semantik renk token'larını, keyframe'leri @theme içinde bulunan radius ve animasyon token'larını, @custom-variant ile tanımlanan sınıf tabanlı karanlık modu ve @layer base içinde uygulanan temel stilleri ele alır.
Ayrıca marka'dan semantiğe, semantikten bileşen token'larına uzanan token hiyerarşisini, temel stiller, varyantlar, boyutlar, durumlar ve override'lardan oluşan bir bileşen mimarisini, ayrıca duyarlı ve erişilebilir bileşen desenlerini ortaya koyar. Bir bileşen kitaplığı oluşturan, bir kod tabanında UI desenlerini standartlaştıran veya Tailwind v3'ten geçiş yapan ekipler için yazılmıştır.
Nasıl Çalışır
- 01Tailwind'i CSS Giriş Noktasında İçe Aktarın
app.css, v3'ün @tailwind base/components/utilities direktifleri yerine tek bir @import ile başlar.
- 02@theme Altında Semantik Token Setini Tanımlayın
Background, foreground, primary, secondary, muted, accent, destructive, border, ring ve card, OKLCH cinsinden renk token'ları olarak tanımlanır.
- 03Keyframe'leriyle Birlikte Animasyon Token'ları Ekleyin
--animate-fade-in ve --animate-fade-out 0,2 saniyede, --animate-slide-in ve --animate-slide-out 0,3 saniyede çalışır; her biri @theme içinde tanımlanan eşleşen bir @keyframes bloğuna sahiptir.
- 04.dark Altında Aynı Token Adlarını Override Edin
Karanlık blok, yeni adlar eklemek yerine her token'ı yeniden atar; background, foreground, primary, secondary, muted, accent, destructive, border, ring, card ve ring-offset'i yansıtır.
- 05Temel Katman Varsayılanlarını Ayarlayın
@layer base, border-border'ı her öğeye uygular ve body'ye temalı arka plan, yazı rengi ve antialiasing verir.
- 06Bileşenleri Katman Sırasına Göre Oluşturun
Bileşenler bu sırayla temel stiller, varyantlar, boyutlar, durumlar ve override'lardan geçer.