Direktívy

Direktívy sú pravidlá at-rule s predponou @, ktoré zapisujete do vstupného súboru CSS na skladanie, rozširovanie a určovanie poradia výstupu Tailwind. Táto stránka sa venuje direktívam @apply, @utility, @variant, @custom-variant a @layer. @theme sa opisuje v časti Téma; @plugin v časti Pluginy; a @source v časti @source.

@apply

@apply vloží deklarácie existujúcich utilít do vášho vlastného selektora. Použite ho na priradenie štýlov utilít k sémantickej triede, a to aj v rámci vnorených selektorov a mediálnych dopytov.

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

Varianty fungujú v zozname @apply — @apply bg-blue-500 hover:bg-blue-600; rozbalí stav :hover a responzívne predpony, ako je @apply px-4 md:px-6 lg:px-8;, vytvárajú zodpovedajúce pravidlá @media. Rešpektuje sa aj modifikátor dôležitosti (@apply !flex;). Podporované sú aj vnorené selektory, takže pravidlo ako .card { h2 { @apply text-xl font-bold; } } použije utility na vnorený prvok h2.

@apply je príkaz: @apply px-4 { … } s telom vyvolá chybu. @apply, ktoré obsahuje iba identifikátory s pomlčkami (@apply --my-mixin;), je mixin CSS z návrhu mixinov CSS, nie zoznam utilít, takže TailwindPHP ho nerozpozná; kombinácia mixinu a utilít v tom istom @apply vyvolá chybu (You cannot use @apply with both mixins and utilities…). Pravidlá mixinov sa momentálne z výstupu zahadzujú namiesto toho, aby sa odovzdali ďalej (#12).

@utility

@utility registruje vlastnú utilitu, ktorá sa zapája do mechanizmu Tailwind — triedi sa do vrstvy utilities a prijíma varianty ako každá vstavaná utilita. Statická utilita má pevne dané telo:

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

Keďže ide o skutočnú utilitu, varianty sa skladajú automaticky (hover:content-auto, md:content-auto). Telo môže samo používať @apply a vnorené selektory:

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

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

Funkčná utilita používa príponu -* v názve a získava zodpovedajúcu hodnotu pomocou --value():

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

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

--value() postupne vyhodnocuje hodnotu kandidáta voči každému zdroju: mennému priestoru témy (--gutter-*), ľubovoľnej hodnote s dátovým typom ([length]) alebo holému typu hodnoty (integer, number, percentage, ratio). Deklarácia, ktorej --value() sa nepodarí vyhodnotiť, sa zahodí, takže zoskupením deklarácií vytvoríte reťazec náhradných hodnôt:

--modifier() vyhodnocuje časť za / rovnakým spôsobom: ak telo obsahuje line-height: --modifier(integer);, gutter-4/7 vytvorí aj line-height: 7. Názvy utilít sa riadia pravidlami TailwindCSS v4.3.3: najviac jeden /, % iba na konci za číslicou a bodky iba medzi číslicami.

@variant

@variant použije variant na deklarácie vo vašom vlastnom CSS bez definovania utility:

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

Varianty možno skladať (@variant hover:focus), uvádzať oddelené čiarkami, vnárať jeden do druhého a pomenovať vlastné @custom-variant. Vrcholová direktíva @variant bez tela alebo s @slot sa kvôli spätnej kompatibilite považuje za @custom-variant.

@custom-variant

@custom-variant definuje nový variant, ktorý môžete pridať ako predponu k ľubovoľnej utilite. Skrátený zápis uvádza názov variantu a v zátvorkách selektor alebo pravidlo at-rule.

Variant so zoznamom selektorov používa & pre prvok:

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

hocus:bg-blue-500 potom vytvorí pravidlá pre :hover aj :focus. Rovnako funguje aj zápis s atribútom:

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

Variant at-rule obaľuje zodpovedajúce utility týmto pravidlom at-rule:

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

Vlastné varianty možno kombinovať so vstavanými — sm:hocus:bg-blue-500 vnorí selektor hocus do mediálneho dopytu sm. Pre zložitejšie prípady použite blokový zápis, v ktorom @slot označuje miesto vloženia deklarácií utility:

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

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

@layer

@layer riadi poradie kaskády pomocou natívnych vrstiev kaskády CSS. Samostatný príkaz @layer deklaruje poradie vrstiev; neskoršie vrstvy majú prednosť bez ohľadu na špecifickosť selektora. Kanonické poradie v Tailwind je:

@layer theme, base, components, utilities;

Presne takto sa to nastavuje interne v @import "tailwindcss". Môžete deklarovať vlastné poradie alebo ho rozdeliť medzi viacero príkazov (@layer reset, base; a potom @layer components, utilities;) a priradiť pravidlá pomenovanej vrstve pomocou bloku:

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

Pridaním základných štýlov cez @layer base ich zaradíte pred components a utilities, takže trieda utility vždy prepíše predvolené štýly prvku. To isté platí pre @layer components { … }, ktoré slúži pre triedy komponentov, ktoré majú byť pod utilitami. Anonymné vrstvy a modifikátory layer() v @import opisuje časť Importy.

Ďalšie kroky

• Téma — @theme tokeny a funkcie témy.
• Importy — @import, virtuálne moduly a modifikátory layer().
• Pluginy — direktíva @plugin a API pluginov.
• @source — určte, ktoré súbory a triedy sa majú skenovať.