Direktiv

Direktiv är at-regler med prefixet @ som du skriver i din indatakod CSS för att sätta samman, utöka och ordna utdata från Tailwind. Den här sidan går igenom @apply, @utility, @variant, @custom-variant och @layer. @theme beskrivs under Tema, @plugin under Pluginer och @source under @source.

@apply

@apply bäddar in deklarationerna från befintliga verktyg i din egen selektor. Använd den för att koppla verktygsstilar till en semantisk klass, även inuti nästlade selektorer och mediefrågor.

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

Varianter fungerar i en lista med @apply – @apply bg-blue-500 hover:bg-blue-600; utökar tillståndet :hover, och responsiva prefix som @apply px-4 md:px-6 lg:px-8; skapar motsvarande regler för @media. Även modifieraren för viktig prioritet används (@apply !flex;). Nästlade selektorer stöds, så en regel som .card { h2 { @apply text-xl font-bold; } } tillämpar verktyg på den nästlade h2.

@apply är en sats: @apply px-4 { … } med en kropp ger ett fel. En @apply som bara innehåller bindestrecksskrivna identifierare (@apply --my-mixin;) är en CSS-mixin från utkastet om mixiner CSS, inte en verktygslista, så TailwindPHP kan inte hitta den. Om en mixin och verktyg placeras i samma @apply uppstår ett fel (You cannot use @apply with both mixins and utilities…). Mixinregler utelämnas för närvarande från utdata i stället för att skickas vidare (#12).

@utility

@utility registrerar ett anpassat verktyg som ingår i motorn i Tailwind. Det sorteras in i lagret utilities och godtar varianter precis som inbyggda verktyg. Ett statiskt verktyg har en fast kropp:

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

Eftersom det är ett riktigt verktyg kombineras varianter automatiskt (hover:content-auto, md:content-auto). Kroppen kan själv använda @apply och nästlade selektorer:

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

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

Ett funktionellt verktyg använder suffixet -* i namnet och hämtar det matchade värdet med --value():

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

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

--value() prövar kandidatens värde mot varje källa i tur och ordning: ett temautrymme (--gutter-*), ett godtyckligt värde med datatyp ([length]) eller en fristående värdetyp (integer, number, percentage, ratio). Deklarationer vars --value() inte kan matchas utelämnas, så flera deklarationer i följd ger en reservkedja:

--modifier() matchar delen efter ett / på samma sätt: med line-height: --modifier(integer); i kroppen skapar även gutter-4/7 line-height: 7. Verktygsnamn följer reglerna i TailwindCSS v4.3.3: högst ett /, % bara sist och efter en siffra, och punkter endast mellan siffror.

@variant

@variant tillämpar en variant på deklarationerna i din egen CSS utan att definiera ett verktyg:

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

Varianter kan staplas (@variant hover:focus), skrivas kommaseparerade och nästlas i varandra. De kan också ange dina egna @custom-variants. En toppnivå-@variant utan kropp, eller med @slot, behandlas som @custom-variant för bakåtkompatibilitet.

@custom-variant

@custom-variant definierar en ny variant som du kan använda som prefix på valfritt verktyg. I det kompakta formatet anges variantens namn samt en selektor eller at-regel inom parenteser.

En variant med en selektorlista använder & för elementet:

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

hocus:bg-blue-500 skapar sedan både reglerna för :hover och :focus. Attributsformatet fungerar på samma sätt:

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

En at-regelvariant omsluter matchade verktyg med at-regeln:

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

Anpassade varianter kan staplas med inbyggda – sm:hocus:bg-blue-500 nästlar selektorn hocus inuti mediefrågan sm. I mer avancerade fall använder du blockformatet med @slot för att markera var verktygets deklarationer ska infogas:

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

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

@layer

@layer styr ordningen i kaskaden med hjälp av inbyggda kaskadlager i CSS. En ensam @layer-sats deklarerar lagrens ordning. Senare lager har företräde oavsett selektorspecificitet. Den kanoniska ordningen för Tailwind är:

@layer theme, base, components, utilities;

Det här är precis vad @import "tailwindcss" ställer in internt. Du kan deklarera en egen ordning eller dela upp den på flera satser (@layer reset, base; följt av @layer components, utilities;) och tilldela regler till ett namngivet lager med ett block:

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

Basstilar som läggs till via @layer base hamnar under components och utilities, så en verktygsklass åsidosätter alltid standardstilarna för dina element. Detsamma gäller @layer components { … } för komponentklasser som ska ligga under verktygen. Anonyma lager och modifierare för layer() på @import beskrivs under Importer.

Nästa steg

• Tema – @theme-token och temafunktioner.
• Importer – @import, virtuella moduler och modifierare för layer().
• Pluginer – direktivet @plugin och pluginens API.
• @source – styr vilka filer och klasser som genomsöks.