Hvad @apply gør, og hvornår det skal bruges

Tailwinds tilgang med værktøjer først placerer alle typografiske og visuelle egenskaber direkte på HTML-elementer. På simple sider fungerer det fint. Men når den samme kombination af 15 værktøjsklasser optræder på 50 knapelementer, kræver en ændring af én designdetalje ændringer 50 steder. Direktivet @apply løser dette ved at lade dig udtrække hyppigt gentagne kombinationer af værktøjer til én enkelt brugerdefineret CSS-klasse — uden at opgive Tailwinds værktøjssystem.

@apply er et PostCSS-direktiv, som Tailwind behandler under kompileringen. Når Tailwind møder @apply bg-blue-600 text-white font-semibold i en CSS-regel, indsætter det de CSS-erklæringer, som disse værktøjer ville generere. Den resulterende CSS-regel indeholder de faktiske egenskabsværdier, ikke Tailwind-klassenavne. Den endelige browseroutput har ingen viden om Tailwind eller @apply.

Brug @apply i CSS-filer, der behandles af Tailwind. Pak altid udtrukne komponentklasser ind i en @layer components-blok, så Tailwind indsætter dem på den korrekte placering i det genererede stylesheet — efter basis typografiske og visuelle egenskaber, men før værktøjsklasserne. Det sikrer, at værktøjsklasser, der anvendes direkte i HTML, stadig kan tilsidesætte typografien og de visuelle egenskaber i din komponentklasse.

De rigtige situationer for @apply er få og specifikke. Brug det, når: den samme værktøjskombination optræder ordret 5 eller flere steder; komponenten gengives i en kontekst, hvor du ikke kan styre HTML'en (f.eks. indhold gengivet fra markdown eller en tredjepartskomponent); eller når begrænsninger i rammeværket gør betinget logik baseret på klasser upraktisk. Hvis du kan bruge JSX-komponenter, Vue-komponenter eller delvise HTML-skabeloner, er de næsten altid et bedre valg.

Praktiske anvendelser af @apply omfatter: grundlæggende knaptypografi og -udseende, der deles af mange knapforekomster, ensartede nulstillingsregler for formularfelter, typografi til blogindhold gengivet fra markdown og værktøjsklasser, der er indlejret i HTML fra tredjepartskomponenter, som du ikke kan ændre. Fælles for alle disse tilfælde er, at du ikke kan placere værktøjsklasserne direkte på det HTML-element, der har brug for dem.

Tailwind har tre lag: base, components og utilities. Brug @layer base til nulstilling af elementer og globale standarder. Brug @layer components til udtrukne komponentklasser, der er opbygget med @apply. Brug @layer utilities til brugerdefinerede værktøjsklasser med ét formål. Lagenes rækkefølge sikrer, at værktøjsklasser altid tilsidesætter komponentklasser, som igen tilsidesætter basisreglerne — og dermed bevares det forventede hierarki for specificitet.

Du kan bruge tilstands- og responsive modifikatorer i @apply på samme måde som i HTML. Skriv hover:bg-blue-700, focus:ring-2 eller md:flex direkte i din @apply-erklæring, så genererer Tailwind den korrekte CSS baseret på vælgere. Det er en af grundene til, at @apply er mere effektivt end at skrive CSS manuelt — du får hele variantsystemet uden ekstra arbejde.

Du kan referere til andre komponentklasser, der er oprettet med @apply, i en anden @apply. Definer f.eks. en grundklasse .btn, og referer derefter til den i .btn-primary for at nedarve alle grundtypografierne og -egenskaberne for knapper. Det opretter en enkel nedarvningskæde. Vær forsigtig med dyb indlejring — det opretter implicitte afhængigheder, som kan være svære at spore under fejlfinding.

I Vue Single File Components (SFC'er) og nogle React-opsætninger med CSS Modules kan du bruge @apply i komponentens <style>-blok. Det holder komponentstilarterne samlet med skabelonen, samtidig med at Tailwind-værktøjer stadig bruges som byggesten. Konfigurer din bundler til at behandle disse style-blokke gennem PostCSS med Tailwind-pluginet, så @apply aktiveres.

Før du griber til @apply, skal du altid spørge: Kan jeg i stedet udtrække dette til en komponent? I React betyder det en Button-komponent, der accepterer en variant-egenskab. I HTML betyder det en delvis skabelon eller en skabeloninkludering. Komponentudtrækning er normalt bedre end @apply, fordi den er eksplicit, søgbar og fungerer med alle rammeværk. Brug kun @apply, når komponentudtrækning ikke er mulig eller praktisk.

Efter du har skrevet en @apply-regel, skal du kontrollere, at den kompileres korrekt, ved at bygge din CSS og inspicere outputtet. Søg efter det klassenavn, du oprettede, i den kompilerede CSS-fil. Du bør se de fulde CSS-erklæringer indsat — ikke @apply-syntaks, som fjernes under kompileringen. Hvis klassen mangler eller viser uventede egenskaber, skal du kontrollere placeringen af @layer og sikre, at alle refererede værktøjer er gyldige Tailwind-klasser.

I denne lektion lærte du: @apply indsætter CSS'en fra værktøjsklasser i et brugerdefineret klassenavn og er ideelt til indhold, hvor du ikke kan tilføje klasser direkte. Placér altid klasser baseret på @apply i @layer components for at bevare den korrekte specificitet, og komponentudtrækning (JSX, Vue SFC, delvise HTML-skabeloner) er normalt at foretrække frem for @apply, når det er muligt. Næste emne er opbygning af genanvendelige komponentklasser med @apply.