Tema ve Özelleştirme

Tailwind teması, CSS değişkenlerinden oluşan düz bir kümedir. Temayı, girdi CSS dosyanızda bir @theme { … } bloğuyla genişletir veya değiştirirsiniz; bu değerleri tema işlevleri aracılığıyla CSS içinden kullanır ve çözümlenen değerleri PHP üzerinden okursunuz. CSS içinde bütünüyle yer alan temada eski tip bir JavaScript yapılandırma dosyası yoktur.

@theme bloğu

Bir @theme bloğu, tasarım belirteçlerini CSS özel özellikleri olarak tanımlar. Her değişkendeki ad alanı öneki (--color-*, --font-*, --breakpoint-*, --spacing-*, …), belirtecin hangi yardımcı sınıfları ve varyantları beslediğini Tailwind'e bildirir.

use TailwindPHP\tw;

$css = tw::generate('<div class="bg-brand text-brand xs:flex">', '
    @import "tailwindcss";

    @theme {
        --color-brand: #3b82f6;
        --font-heading: "Inter", sans-serif;
        --breakpoint-xs: 20rem;
        --spacing-huge: 10rem;
    }
');

Her belirteç, ad alanı altında yardımcı sınıflar kaydeder. Yukarıdaki örnek bg-brand, text-brand, border-brand, font-heading ailesini, bir xs: duyarlı varyantı ve p-huge/m-huge aralıklarını kullanılabilir kılar; bunlar yalnızca sınıf içeriğinizde göründüklerinde oluşturulur.

/* bg-brand resolves to the theme variable */
:root, :host {
  --color-brand: #3b82f6;
}
.bg-brand {
  background-color: var(--color-brand);
}

--breakpoint-xs belirteci, xs: varyantını doğrudan kaydeder:

@media (min-width: 20rem) {
  .xs\:flex {
    display: flex;
  }
}

Yaygın ad alanları

Ad alanını temizleme

Bir ad alanı joker karakterini initial olarak ayarlamak, kendi belirteçleriniz eklenmeden önce Tailwind için o ad alanındaki varsayılanları kaldırır. Böylece temiz bir paletle başlayabilirsiniz:

@theme {
    /* Drop every default color, then define only what you need */
    --color-*: initial;
    --color-brand: #3b82f6;
    --color-ink: #111827;
}

--*: initial; tüm temayı temizler. Joker karakter içermeyen bir anahtardaki (--color-red-500: initial;) tek bir initial değeri yalnızca o belirteci kaldırır. -* joker karakteri için değer olarak yalnızca initial kabul edilir; başka bir değer hata verir.

CSS içinde tema değerlerini okuma

theme()

Eski theme() işlevi, v3 tarzı ad alanlarında nokta gösterimiyle bir değer okur. Derleme zamanında belirtecin değerine çözümlenir; bu nedenle özel kurallar ve diğer bildirimler dahil, değer beklenen her yerde kullanılabilir.

$css = tw::generate('<div class="callout">', '
    @import "tailwindcss";
    .callout { color: theme(colors.red.500); }
');

.callout {
  color: oklch(63.7% .237 25.331);
}

Nokta yolları temel değişkenlerle eşleşir (colors.red.500 → --color-red-500, fontFamily.sans → sans ailesi). Opaklık değiştiricisi desteklenir: theme(colors.red.500 / 50%). İkinci bağımsız değişken olarak yedek değer verilebilir: theme(colors.brand, #000). Bir yol çözümlenemez ve yedek değer verilmezse, onu kullanan aday kaldırılır.

--theme()

--theme(), bir tema değişkenini CSS özel özellik adıyla okur ve varsayılan olarak bir var() başvurusu döndürür; böylece değer çalışma zamanında değiştirilebilir kalır:

.btn { color: --theme(--color-brand); }
/* → color: var(--color-brand); */

var() başvurusu yerine çözümlenmiş değeri kullanmak için inline ekleyin: --theme(--color-brand inline). İkinci bağımsız değişken yedek değerdir (--theme(--color-brand, #000)); bir initial yedek değeri özel olarak ele alınır ve kendileri initial olarak çözümlenen iç içe var() başvurularına eklenir. Bir at-kuralının (@media, @container) içinde --theme() her zaman satır içinde çözümlenir; çünkü var() bu önsözlerde geçerli değildir.

--spacing()

--spacing(n), temanın temel aralık birimini (--spacing) n ile çarpar:

@utility my-gap { gap: --spacing(4); }
/* → gap: calc(var(--spacing) * 4); */

1 çarpanı, temel değişkenin kendisine çözümlenir (--spacing(1) → var(--spacing); p-1 de bunu üretir); 0 ise yalın sıfır uzunluğa çözümlenir.

Yerleşik aralık yardımcı sınıfları da aynı hesaplamayı kullanır; bu nedenle özel değerler p-4, m-4 ve benzerleriyle tutarlı kalır.

--alpha()

--alpha(color / opacity), oklab renk uzayında bir color-mix() kullanarak renge opaklık uygular:

@utility tint { color: --alpha(var(--color-red-500) / 50%); }

.tint {
  color: #fb2c3680;
}
@supports (color: color-mix(in lab, red, red)) {
  .tint {
    color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
  }
}

color-mix() biçimi çalışma zamanında değiştirilebilir kalır; öncesindeki, tema değerinden hesaplanan statik yedek, color-mix() desteklemeyen tarayıcıları kapsar. Yedeği polyfills seçeneğiyle kapatın: tw::compile().

Opaklık ve color-mix() → oklab() birleştirme

Opaklık değiştiricileri birleşir. Zaten %50 opaklık taşıyan bir değere %50 uygulandığında, oklab'da hesaplanan %25 elde edilir. Bir opaklık değiştiricisi statik bir renge uygulandığında TailwindPHP, color-mix(in oklab, …) ifadesini somut bir oklab() değerine indirger; bu, yukarı akıştaki Tailwind araç zincirinde lightningcss'in yaptığı dönüşümle aynıdır. Hâlâ var() içinde sarılı olan dinamik renkler, çalışma zamanında değiştirilebilir kalmaları için color-mix() biçimini korur.

PHP üzerinden tema değerlerini okuma

Üç erişimci, çözümlenmiş tema değerlerini PHP dizileri olarak döndürür. Her biri isteğe bağlı bir girdi CSS dizgesi alır (varsayılan @import "tailwindcss";) ve ayrıca bir compiler örneğinde de kullanılabilir.

use TailwindPHP\tw;

tw::colors();
// ['red-500' => 'oklch(63.7% .237 25.331)', 'blue-500' => 'oklch(62.3% .214 259.815)', ...]

tw::breakpoints();
// ['sm' => '40rem', 'md' => '48rem', 'lg' => '64rem', 'xl' => '80rem', '2xl' => '96rem']

tw::spacing('@import "tailwindcss"; @theme { --spacing-huge: 10rem; }');
// ['huge' => '10rem']

Özelleştirilmiş bir temayı okumak için CSS dizgesi verin:

tw::colors('@import "tailwindcss"; @theme { --color-brand: #3b82f6; }');
// [..., 'brand' => '#3b82f6']

tw::breakpoints('@import "tailwindcss"; @theme { --breakpoint-xs: 20rem; }');
// ['sm' => '40rem', ..., '2xl' => '96rem', 'xs' => '20rem']

TailwindCSS 4, --spacing-* ölçeği yerine tek bir --spacing temel değer kullanır; bu nedenle tw::spacing() yalnızca tanımladığınız özel --spacing-* belirteçlerini döndürür. Bir compiler örneğinde de aynı yöntemler vardır: $compiler->colors(), $compiler->breakpoints(), $compiler->spacing(). İmza ayrıntıları için başvuru belgesineAPI bakın.

Sonraki adımlar

• Yönergeler — @apply, @utility, @custom-variant, @layer.
• İçe aktarımlar — @import, sanal modüller ve Preflight.
• API — tüm erişimciler ve inceleme yöntemleri.