Yönergeler

Yönergeler, girdi CSS dosyanızda @ önekiyle yazdığınız ve Tailwind çıktısını oluşturmak, genişletmek ve sıralamak için kullandığınız at-rule'lardır. Bu sayfada @apply, @utility, @variant, @custom-variant ve @layer ele alınır. @theme, Tema bölümünde; @plugin, Eklentiler bölümünde; @source ise @source bölümünde açıklanır.

@apply

@apply, mevcut yardımcı sınıfların bildirimlerini kendi seçicinize ekler. Yardımcı sınıf stillerini anlamsal bir sınıfa, iç içe seçiciler ve medya sorguları da dahil olmak üzere, eklemek için kullanın.

use TailwindPHP\tw;

$css = tw::generate('<div class="btn">', '
    @import "tailwindcss";

    @theme { --color-brand: #3b82f6; }

    .btn {
        @apply px-4 py-2 rounded-lg bg-brand text-white;
    }
');

Varyantlar @apply listesinde çalışır: @apply bg-blue-500 hover:bg-blue-600;, :hover durumunu genişletir; @apply px-4 md:px-6 lg:px-8; gibi duyarlı önekler de ilgili @media kurallarını üretir. Önemli değiştiricisi de dikkate alınır (@apply !flex;). İç içe seçiciler desteklenir; böylece .card { h2 { @apply text-xl font-bold; } } gibi bir kural yardımcı sınıfları iç içe h2 öğesine uygular.

@apply bir ifadedir: gövdeli @apply px-4 { … } hata verir. Yalnızca tireli tanımlayıcılar (@apply --my-mixin;) listeleyen bir @apply, CSS mixins taslağındaki bir CSS mixin'idir; yardımcı sınıf listesi değildir, bu yüzden TailwindPHP bunu çözümleyemez. Aynı @apply içinde bir mixin ile yardımcı sınıfları kullanmak hata verir (You cannot use @apply with both mixins and utilities…). Mixin kuralları şu anda çıktıya aktarılmak yerine çıkarılır (#12).

@utility

@utility, Tailwind motoruna katılan özel bir yardımcı sınıf kaydeder; utilities katmanında sıralanır ve yerleşik sınıflar gibi varyantları kabul eder. Statik yardımcı sınıfın gövdesi sabittir:

@utility content-auto {
    content-visibility: auto;
}

Gerçek bir yardımcı sınıf olduğu için varyantlar otomatik olarak birleştirilir (hover:content-auto, md:content-auto). Gövde, @apply ve iç içe seçicileri de kullanabilir:

@utility btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded;
}

@utility card {
    color: red;
    &:hover { color: blue; }
}

İşlevsel bir yardımcı sınıfın adında -* soneki bulunur ve eşleşen değeri --value() ile okur:

@theme {
    --gutter-wide: 3rem;
}

@utility gutter-* {
    padding-inline: --value(--gutter-*, [length]);
    padding-inline: --spacing(--value(integer));
}

--value(), adayın değerini sırayla her kaynağa göre çözümler: bir tema ad alanı (--gutter-*), veri türü belirtilmiş keyfi bir değer ([length]) veya yalın bir değer türü (integer, number, percentage, ratio). --value() çözümlenemeyen bir bildirim çıkarılır; bu nedenle bildirimleri üst üste eklemek bir geri dönüş zinciri oluşturur:

--modifier(), / sonrasındaki kısmı da aynı şekilde çözümler: gövdede line-height: --modifier(integer); varsa, gutter-4/7 ayrıca line-height: 7 üretir. Yardımcı sınıf adları TailwindCSS v4.3.3 kurallarına uyar: en fazla bir /, % yalnızca sonda ve bir rakamdan sonra, noktalar ise yalnızca rakamların arasında olabilir.

@variant

@variant, bir yardımcı sınıf tanımlamadan kendi CSS öğenizin içindeki bildirimlere bir varyant uygular:

.card {
    color: red;

    @variant hover {
        color: blue;
    }

    @variant dark {
        color: white;
    }
}

.card {
  color: red;
}
@media (hover: hover) {
  .card:hover {
    color: #00f;
  }
}
@media (prefers-color-scheme: dark) {
  .card {
    color: #fff;
  }
}

Varyantlar üst üste eklenebilir (@variant hover:focus), virgülle listelenebilir, iç içe kullanılabilir ve kendi @custom-variants öğenizin adını içerebilir. Üst düzey bir @variant gövdesizse veya @slot içeriyorsa geriye dönük uyumluluk için @custom-variant olarak değerlendirilir.

@custom-variant

@custom-variant, herhangi bir yardımcı sınıfın önüne ekleyebileceğiniz yeni bir varyant tanımlar. Kısa biçim varyantı adlandırır ve parantez içinde bir seçici veya at-rule verir.

Seçici listesi varyantında öğe için & kullanılır:

@custom-variant hocus (&:hover, &:focus);

hocus:bg-blue-500 daha sonra hem :hover hem de :focus kurallarını üretir. Öznitelik biçimi de aynı şekilde çalışır:

@custom-variant loading (&[data-loading="true"]);

Bir at-rule varyantı, eşleşen yardımcı sınıfları bu at-rule içine alır:

@custom-variant tablet (@media (min-width: 600px));

Özel varyantlar yerleşik varyantlarla birleştirilebilir: sm:hocus:bg-blue-500, hocus seçicisini sm medya sorgusunun içine yerleştirir. Daha karmaşık durumlarda, yardımcı sınıfın bildirimlerinin ekleneceği yeri @slot ile belirten blok biçimini kullanın:

@custom-variant child {
    & > * {
        @slot;
    }
}

@custom-variant sidebar-open {
    .sidebar-open & {
        @slot;
    }
}

@layer

@layer, yerel CSS basamak katmanlarını kullanarak basamak sırasını denetler. Yalın bir @layer ifadesi katmanların sırasını bildirir; özgüllükten bağımsız olarak sonraki katmanlar önceliklidir. Tailwind için kanonik sıra şöyledir:

@layer theme, base, components, utilities;

@import "tailwindcss", sistem içinde tam olarak bunu ayarlar. Kendi sıralamanızı bildirebilir veya bunu birden fazla ifadeye bölebilirsiniz (önce @layer reset, base;, ardından @layer components, utilities;) ve bir blokla kuralları adlandırılmış bir katmana atayabilirsiniz:

use TailwindPHP\tw;

$css = tw::generate('<article><h1>Title</h1></article>', '
    @import "tailwindcss";

    @layer base {
        h1 { font-size: var(--text-2xl); }
        a  { color: var(--color-blue-600); text-decoration-line: underline; }
    }
');

Temel stilleri @layer base ile eklemek onları components ve utilities katmanlarının altında tutar; böylece bir yardımcı sınıf, öğenizin varsayılan stillerini her zaman geçersiz kılar. Aynı durum, yardımcı sınıfların altında kalması gereken bileşen sınıflarına yönelik @layer components { … } için de geçerlidir. Anonim katmanlar ve @import üzerindeki layer() değiştiricileri İçe Aktarımlar bölümünde ele alınır.

Sonraki adımlar

• Tema — @theme belirteçleri ve tema işlevleri.
• İçe Aktarımlar — @import, sanal modüller ve layer() değiştiricileri.
• Eklentiler — @plugin yönergesi ve eklenti API.
• @source — hangi dosyaların ve sınıfların taranacağını denetleyin.