Direktívák

A direktívák olyan @ előtagú at-szabályok, amelyeket a bemeneti CSS fájlban írhat a Tailwind kimenetének összeállításához, bővítéséhez és sorrendezéséhez. Ez az oldal a következőket ismerteti: @apply, @utility, @variant, @custom-variant és @layer. A @theme leírását a Téma, a @plugin-ét a Bővítmények, a @source-ét pedig az @source oldal tartalmazza.

@apply

A @apply meglévő segédosztályok deklarációit illeszti be a saját szelektorába. Segítségével segédosztály-stílusokat rendelhet szemantikus osztályhoz, akár egymásba ágyazott szelektorokon és médialekérdezéseken belül is.

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;
    }
');

A változatok rendezett @apply listában működnek: a @apply bg-blue-500 hover:bg-blue-600; kibontja a :hover állapotot, a reszponzív előtagok, például a @apply px-4 md:px-6 lg:px-8; pedig kiadják a megfelelő @media szabályokat. Az important módosító is érvényesül (@apply !flex;). A beágyazott szelektorok is támogatottak, ezért az olyan szabály, mint a .card { h2 { @apply text-xl font-bold; } }, segédosztályokat alkalmaz a beágyazott h2 elemre.

A @apply egy utasítás: a törzzsel rendelkező @apply px-4 { … } hibát okoz. A kizárólag kötőjeles azonosítókat felsoroló @apply (@apply --my-mixin;) a CSS keverékek tervezetéből származó CSS keverék, nem segédosztálylista, ezért a TailwindPHP nem oldja fel; a keverék és a segédosztályok egyazon @apply-be helyezése hibát okoz (You cannot use @apply with both mixins and utilities…). A keverékszabályok jelenleg kimenet nélkül eldobódnak, nem kerülnek át változatlanul (#12).

@utility

A @utility egyéni segédosztályt regisztrál, amely részt vesz a Tailwind motorjában — a utilities rétegbe kerül, és a beépített segédosztályokhoz hasonlóan változatokat fogad el. A statikus segédosztály törzse rögzített:

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

Mivel valódi segédosztályról van szó, a változatok automatikusan kombinálhatók (hover:content-auto, md:content-auto). A törzsben @apply és beágyazott szelektorok is használhatók:

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

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

A funkcionális segédosztály nevében -* utótag szerepel, és a --value() segítségével olvassa be a hozzá illeszkedő értéket:

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

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

A --value() sorban egyezteti a jelölt értékét minden forrással: egy tématérnévvel (--gutter-*), adattípust megadó tetszőleges értékkel ([length]), vagy egy csupasz értéktípussal (integer, number, percentage, ratio). Ha a deklaráció --value() értéke nem oldható fel, a rendszer eldobja, így a deklarációk egymásra halmozásával tartaléklánc hozható létre:

A --modifier() a / utáni részt is ugyanúgy oldja fel: ha a törzsben line-height: --modifier(integer); szerepel, akkor a gutter-4/7 is kibocsátja a line-height: 7-t. A segédosztályok nevei a TailwindCSS v4.3.3 szabályait követik: legfeljebb egy / lehet bennük, a % csak a végén, egy számjegy után állhat, pont pedig csak számjegyek között szerepelhet.

@variant

A @variant változatot alkalmaz a saját CSS-on belüli deklarációkra anélkül, hogy segédosztályt definiálna:

.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;
  }
}

A változatok egymásra építhetők (@variant hover:focus), vesszővel felsorolhatók, egymásba ágyazhatók, és saját @custom-variant-okat is megnevezhetnek. A felső szintű @variant törzs nélkül vagy @slot-szal @custom-variant-ként működik a visszafelé kompatibilitás érdekében.

@custom-variant

A @custom-variant új változatot definiál, amely bármely segédosztály elé írható. A tömör forma megadja a változat nevét, majd zárójelben egy szelektort vagy at-szabályt.

A szelektorlistás változat az & elemet használja az elem helyett:

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

A hocus:bg-blue-500 ezután a :hover és a :focus szabályt is kibocsátja. Az attribútumos forma ugyanígy működik:

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

Az at-szabályos változat a hozzá illeszkedő segédosztályokat az adott at-szabályba csomagolja:

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

Az egyéni változatok beépített változatokkal is kombinálhatók: a sm:hocus:bg-blue-500 a hocus szelektort a sm médiakérdésbe ágyazza. Bonyolultabb esetekben használja a blokkos formát, ahol a @slot jelöli a segédosztály deklarációinak beillesztési helyét:

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

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

@layer

A @layer a natív CSS kaszkádrétegek segítségével szabályozza a kaszkád sorrendjét. Egy önálló @layer utasítás megadja a rétegek sorrendjét; a későbbi rétegek nyernek a szelektorspecifitástól függetlenül. A Tailwind kanonikus sorrendje:

@layer theme, base, components, utilities;

A @import "tailwindcss" pontosan ezt állítja be belsőleg. Megadhatja saját sorrendjét, vagy több utasításra bonthatja (előbb @layer reset, base;, majd @layer components, utilities;), a szabályokat pedig blokk segítségével rendelheti egy elnevezett réteghez:

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; }
    }
');

Az alapstílusok @layer base-on keresztüli hozzáadása a components és a utilities alá helyezi őket, így egy segédosztály mindig felülírja az elem alapértelmezéseit. Ugyanez érvényes a @layer components { … }-ra is, ha azt szeretné, hogy a komponensosztályok a segédosztályok alatt legyenek. A névtelen rétegekről és a @import-on használt layer() módosítókról az Imports részben olvashat.

Következő lépések

• Theme — @theme tokenek és a témához tartozó függvények.
• Imports — @import, virtuális modulok és layer() módosítók.
• Plugins — a @plugin direktíva és a bővítmény API.
• @source — szabályozza, mely fájlokat és osztályokat vizsgálja a rendszer.