Brug af CSS Cascade Layers til at administrere brugerdefinerede stilarter i et medvindsprojekt

Hvis en utility-klasse kun gør én ting, er der stor sandsynlighed for, at du ikke ønsker, at den skal tilsidesættes af stilarter, der kommer andre steder fra. En tilgang er at bruge !important for at være 100 % sikker på, at stilen vil blive anvendt, uanset specificitetskonflikter.

Tailwind-konfigurationsfilen har en !important mulighed, der automatisk tilføjes !important til hver brugsklasse. Der er ikke noget galt med at bruge !important på denne måde, men i dag er der bedre måder at håndtere specificitet på. Ved brug af CSS kaskade lag vi kan undgå den hårdhændede tilgang til at bruge !important.

Kaskadelag giver os mulighed for at gruppere stilarter i "lag". Et lags forrang slår altid specificiteten af ​​en vælger. Specificitet betyder kun noget inde i hvert lag. Etablering af en fornuftig lagrækkefølge hjælper med at undgå stylingkonflikter og specificitetskrige. Det er det, der gør CSS Cascade Layers til et godt værktøj til håndtering af brugerdefinerede stilarter sammen med stile fra tredjepartsrammer, ligesom medvind.

En medvindskilde .css fil starter normalt sådan her:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

Lad os tage et kig på officielle Tailwind-dokumenter om direktiver:

Direktiver er tilpassede Tailwind-specifikke at-regler, du kan bruge i din CSS, der tilbyder speciel funktionalitet til Tailwind CSS-projekter. Brug @tailwind direktiv om at indsætte Tailwind's base, components, utilities , variants stilarter i din CSS.

I output CSS-filen, der bliver bygget, Tailwinds CSS-nulstilling - kendt som Forhåndskontrol — er inkluderet først som en del af basisstilene. Resten af base består af CSS-variabler, der er nødvendige for, at Tailwind kan fungere. components er et sted, hvor du kan tilføje dine egne tilpassede klasser. Eventuelle hjælpeklasser, du har brugt i din opmærkning, vises derefter. Varianter er stilarter for ting som svæve- og fokustilstande og responsive stilarter, som vises sidst i den genererede CSS-fil.

Medvinden @layer Direktiv

Til forveksling har Tailwind sin egen @layer syntaks. Denne artikel handler om CSS-standarden, men lad os tage et hurtigt kig på Tailwind-versionen (som bliver kompileret væk og ikke ender i output CSS). Medvinden @layer direktiv er en måde at injicere dine egne ekstra stilarter i en specificeret del af output CSS-filen.

For eksempel at tilføje dine egne stilarter til base stilarter, ville du gøre følgende:

@layer base {
  h1 {
    font-size: 30px;
  }
}

components laget er tomt som standard - det er bare et sted at placere dine egne klasser. Hvis du gjorde tingene på medvindsmåden, ville du sikkert bruge @apply (selvom skaberen af ​​Tailwind for nylig frarådet det), men du kan også skrive klasser på den almindelige måde:

@layer components {
  .btn-blue {
    background-color: blue;
    color: white;
  }
}

CSS-standarden er meget mere kraftfuld. Lad os vende tilbage til det...

Brug af CSS-standarden @layer

Her er hvordan vi kan omskrive dette til at bruge CSS-standarden @layer:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind utilities;
  @tailwind variants;
} 

I modsætning til Tailwind-direktivet bliver disse ikke kompileret væk. De forstås af browseren. Faktisk vil DevTools i Edge, Chrome, Safari og Firefox endda vise dig de lag, du har defineret.

Du kan have så mange lag, som du vil - og navngive dem, hvad du vil - men i dette eksempel er alle mine brugerdefinerede stilarter i et enkelt lag (my-custom-styles). Den første linje etablerer lagrækkefølgen:

@layer tailwind-base, my-custom-styles, tailwind-utilities;

Dette skal gives på forhånd. Sørg for at inkludere denne linje før enhver anden kode, der bruger @layer. Det første lag på listen vil være mindst kraftfuld, og det sidste lag på listen vil være mest magtfulde. Det betyder tailwind-base er mindst kraftfuld lag og enhver kode i det vil blive tilsidesat af alle de efterfølgende lag. Det betyder også tailwind-utilities vil altid overtrumfe alle andre stilarter - uanset kilderækkefølge eller specificitet. (Utilities og varianter kunne gå i separate lag, men vedligeholderne af Tailwind vil sikre, at varianter altid overtrumfer hjælpeprogrammer, så længe du inkluderer varianterne under forsyningsdirektivet.)

Alt, der ikke er i et lag, vil tilsidesætte alt, der er i et lag (med den ene undtagelse er stilarter, der bruger !important). Så du kan også vælge at forlade utilities , variants uden for ethvert lag:

@layer tailwind-base, tailwind-components, my-custom-styles;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Hvad har det egentlig købt os? Der er masser af tidspunkter, hvor avancerede CSS-vælgere er ret praktiske. Lad os skabe en version af :focus-within der kun reagerer på tastaturfokus i stedet for museklik ved hjælp af :has vælger (som lander i Chrome 105). Dette vil style et overordnet element, når nogen af ​​dets børn får fokus. Tailwind 3.1 introduceret tilpassede varianter - for eksempel <div class="[&:has(:focus-visible)]:outline-red-600"> - men nogle gange er det nemmere bare at skrive CSS:

@layer tailwind-base, my-custom-styles;
@layer tailwind-base {
  @tailwind base;
}

@tailwind utilities;

@layer my-custom-styles {
  .radio-container {
    padding: 4px 24px;
    border: solid 2px rgb(230, 230, 230);
  }
  .radio-container:has(:focus-visible) {
    outline: solid 2px blue;
  }
}

Lad os sige, at vi i et enkelt tilfælde ønsker at tilsidesætte outline-color fra blue til noget andet. Lad os sige, at det element, vi arbejder med, har både Tailwind-klassen .outline-red-600 og vores egen .radio-container:has(:focus-visible) klasse:

<div class="outline-red-600 radio-container"> ... </div>

Hvilken outline-color vil vinde?

Normalt er den højere specificitet af .radio-container:has(:focus-visible) ville betyde, at Tailwind-klassen ikke har nogen effekt - selvom den er lavere i kilderækkefølgen. Men i modsætning til medvinden @layer direktiv, der er afhængig af kildeorden, CSS-standarden @layer tilsidesætter specificitet.

Som et resultat kan vi bruge komplekse vælgere i vores egne brugerdefinerede stilarter, men stadig tilsidesætte dem med Tailwinds brugsklasser, når vi har brug for det - uden at skulle ty til hårdhændet !important brug for at få det, vi ønsker.