Tailwind Belirteçleri, CSS Değişkenleri ve CSS-in-JS

Style Dictionary'nin CSS platformu çıktısı, CSS özel özelliklerinden oluşan bir dosya üretir: --color-primary-500: #3b82f6; --spacing-4: 16px; ve benzerleri. Bu değişkenler :root üzerinde tanımlanır ve böylece genel kullanıma açılır. Bu, uygulamadaki tüm belirteç kullanımının temelidir.

Oluşturulan CSS belirteç dosyasını genel stil sayfanıza veya kök yerleşim bileşeninize aktarın: @import './tokens/tokens.css'. Next.js'te bu dosyayı app/layout.tsx veya styles/globals.css içine aktarın. Aktarıldıktan sonra uygulamadaki her CSS kuralı ve bileşen, özel özelliklere başvurabilir.

Bileşen stil sayfalarında veya CSS Modüllerinde CSS değişkenlerine başvurun: background-color: var(--color-primary-500); ve padding: var(--spacing-4);. JSON kaynağındaki belirteç değeri değişirse Style Dictionary'yi yeniden derlemek CSS dosyasını günceller ve bu değişkeni kullanan tüm bileşenler yeni değeri otomatik olarak yansıtır.

CSS özel özellikleri, çalışma zamanında tema değiştirmeyi mümkün kılar. Koyu mod için belirteç değerlerini bir tema seçicisi altında geçersiz kılın: [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; }. document.documentElement.setAttribute('data-theme', 'dark') ayarlandığında tüm belirteç değerleri yeniden yükleme veya yeniden derleme olmadan anında değiştirilir.

Belirteç değerlerini kullanmak için Tailwind temasını tailwind.config.js içinde genişletin: theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } }. Tailwind sınıflarının (bg-primary-500) her zaman esas belirteç değerlerini kullanmasını sağlamak için Style Dictionary'nin JS çıktısını Tailwind yapılandırmasına aktarın.

Tailwind'de çalışma zamanında değiştirilebilen temalar için rengi bir CSS değişkenine başvuracak şekilde yapılandırın: 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)'. Bunun için CSS değişkeninizin RGB bileşenlerini rgb() sarmalayıcısı olmadan depolaması gerekir (--color-primary-rgb: 59 130 246). Böylece Tailwind opaklık yardımcılarını otomatik olarak yönetir.

CSS-in-JS kitaplıkları bir JavaScript tema nesnesi kullanır. Style Dictionary'nin JS çıktısını tema sağlayıcısının değeri olarak geçirin: <ThemeProvider theme={tokens}>. Bileşenler belirteçlere const theme = useTheme() ve theme.color.primary[500] aracılığıyla erişir. Style Dictionary, tür bilgileri içeren belirteç nesnesini oluşturur; tema sağlayıcısı da bunu dağıtır.

stylelint-no-hardcoded-colors eklentisi ve özel ESLint kuralları, stil sayfalarında veya bileşen dosyalarında sabit kodlanmış onaltılık değerlerin bulunmamasını zorunlu kılabilir. Geliştirici color: var(--color-primary-500) yerine color: #3b82f6 yazarsa lint aracı bunu işaretler. Böylece belirteç sistemi tek renk kaynağı olarak korunur.

Tailwind sınıf adları çalışma zamanında belirteç adlarından dinamik olarak oluşturulduğunda, kaynakta statik dizeler olarak görünmedikleri için Tailwind'in ayıklama işlemi bu sınıfları kaldırabilir. Dinamik sınıf desenlerini tailwind.config.js içindeki izin verilenler listesine ekleyin: safelist: [{ pattern: /bg-primary-/ }].

Figma Tokens eklentisi, Figma belirteç değerlerini doğrudan Style Dictionary JSON biçimine aktarır. İş akışı şöyledir: tasarımcılar Figma Değişkenleri'ndeki renkleri günceller, eklenti aracılığıyla dışa aktarır, güncellenen JSON'u kaydeder, ön derleme betiği Style Dictionary'yi çalıştırır ve güncellenen CSS ile JS çıktıları React uygulamasında kullanılır. Tasarım ve kod eşzamanlı kalır.

CSS özel özellikleri, tanımlandıkları öğe ve onun alt öğeleriyle sınırlıdır. Bu, bileşen düzeyinde tema geçersiz kılmalarını mümkün kılar: bir kart bileşeni kök öğesinde --color-background: var(--color-surface-elevated) tanımlayabilir ve tüm alt öğeler, herhangi bir özelliği zincirleme aktarmaya gerek kalmadan yükseltilmiş yüzey rengini kullanır.

Tasarım belirteçleri için statik Tailwind değerleri yerine CSS özel özelliklerini (değişkenlerini) kullanmanın temel avantajı nedir?

Style Dictionary, genel içe aktarma için CSS özel özellikleri; Tailwind ve CSS-in-JS entegrasyonu içinse JS nesneleri üretir. CSS değişkenleri, [data-theme] geçersiz kılmaları aracılığıyla çalışma zamanında tema değiştirmeyi mümkün kılar. Tailwind, yapılandırmasını JS çıktısındaki belirteç değerleriyle genişletir; opaklığa duyarlı temalandırma için Tailwind, RGB CSS değişkenlerine başvuracak şekilde yapılandırılır. Lint kuralları yalnızca belirteçlerin renk olarak kullanılmasını zorunlu kılar ve sabit kodlanmış değerleri kod tabanından uzak tutar.