CSS-cascadelagen gebruiken om aangepaste stijlen in een Tailwind-project te beheren

Als een utility-klasse maar één ding doet, is de kans groot dat je niet wilt dat deze wordt overschreven door stijlen die van elders komen. Een benadering is om te gebruiken !important om er 100% zeker van te zijn dat de stijl wordt toegepast, ongeacht specificiteitsconflicten.

Het Tailwind-configuratiebestand heeft een: !important optie die automatisch wordt toegevoegd !important voor elke nutsklasse. Er is niets mis met het gebruik van !important op deze manier, maar tegenwoordig zijn er betere manieren om met specificiteit om te gaan. Gebruik makend van CSS-cascadelagen we kunnen de hardhandige benadering van het gebruik vermijden; !important.

Met cascadelagen kunnen we stijlen in "lagen" groeperen. De prioriteit van een laag verslaat altijd de specificiteit van een selector. Specificiteit is alleen van belang binnen elke laag. Het vaststellen van een verstandige laagvolgorde helpt stijlconflicten en specificiteitsoorlogen te voorkomen. Dat is wat CSS Cascade Layers een geweldig hulpmiddel maakt beheer van aangepaste stijlen naast stijlen van frameworks van derden, zoals Tailwind.

Een Tailwind-bron .css bestand begint meestal zoiets als dit:

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

Laten we de officiële Tailwind-documenten over richtlijnen:

Richtlijnen zijn aangepaste Tailwind-specifieke at-regels die u in uw CSS kunt gebruiken en die speciale functionaliteit bieden voor Tailwind CSS-projecten. Gebruik de @tailwind instructie om Tailwind's in te voegen base, components, utilities en variants stijlen in uw CSS.

In het CSS-uitvoerbestand dat wordt gebouwd, wordt de CSS-reset van Tailwind — bekend als Preflight — wordt eerst opgenomen als onderdeel van de basisstijlen. De rest van base bestaat uit CSS-variabelen die nodig zijn om Tailwind te laten werken. components is een plaats waar u uw eigen aangepaste klassen kunt toevoegen. Alle hulpprogrammaklassen die u in uw opmaak hebt gebruikt, verschijnen vervolgens. Varianten zijn stijlen voor zaken als hover- en focusstatussen en responsieve stijlen, die als laatste in het gegenereerde CSS-bestand verschijnen.

De wind in de rug @layer Richtlijnen

Verwarrend genoeg heeft Tailwind zijn eigen @layer syntaxis. Dit artikel gaat over de CSS-standaard, maar laten we eens kijken naar de Tailwind-versie (die wordt weggecompileerd en niet in de output-CSS terechtkomt). De wind in de rug @layer richtlijn is een manier om uw eigen extra stijlen te injecteren in een gespecificeerd deel van het uitvoer-CSS-bestand.

Om bijvoorbeeld uw eigen stijlen toe te voegen aan de base stijlen, zou je het volgende doen:

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

De components laag is standaard leeg - het is gewoon een plek om je eigen klassen te plaatsen. Als je de dingen op de Tailwind-manier zou doen, zou je waarschijnlijk @apply (hoewel de maker van Tailwind onlangs ontraden het), maar je kunt ook op de normale manier lessen schrijven:

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

De CSS-standaard is veel krachtiger. Laten we daar op terugkomen…

De CSS-standaard gebruiken @layer

Hier is hoe we dit kunnen herschrijven om de CSS-standaard te gebruiken @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

In tegenstelling tot de Tailwind-richtlijn, worden deze niet weggecompileerd. Ze worden begrepen door de browser. DevTools in Edge, Chrome, Safari en Firefox laten u zelfs alle lagen zien die u hebt gedefinieerd.

Je kunt zoveel lagen hebben als je wilt - en ze een naam geven zoals je wilt - maar in dit voorbeeld bevinden al mijn aangepaste stijlen zich in een enkele laag (my-custom-styles). De eerste regel bepaalt de volgorde van de lagen:

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

Dit dient vooraf te worden verstrekt. Zorg ervoor dat u deze regel opneemt vóór elke andere code die gebruikmaakt van @layer. De eerste laag in de lijst is de minst krachtig, en de laatste laag in de lijst is de meest krachtig. Dat betekent tailwind-base is de minst krachtig laag en elke code erin wordt overschreven door alle volgende lagen. Dat betekent ook: tailwind-utilities zal altijd andere stijlen overtreffen - ongeacht de volgorde of specificiteit van de bron. (Hulpprogramma's en varianten kon ga in afzonderlijke lagen, maar de beheerders van Tailwind zullen ervoor zorgen dat varianten altijd de hulpprogramma's overtreffen, zolang u de varianten onder de hulpprogramma's-richtlijn opneemt.)

Alles wat zich niet in een laag bevindt, overschrijft alles wat zich in een laag bevindt (met als enige uitzondering stijlen die gebruik maken van !important). Je kunt er dus ook voor kiezen om te vertrekken utilities en variants buiten elke laag:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Wat heeft dit ons eigenlijk opgeleverd? Er zijn genoeg momenten waarop geavanceerde CSS-selectors erg handig zijn. Laten we een versie maken van :focus-within die alleen reageert op toetsenbordfocus in plaats van muisklikken met behulp van de :has kiezer (die landt in Chrome 105). Hiermee wordt een bovenliggend element gestyled wanneer een van zijn kinderen de focus krijgt. Tailwind 3.1 geïntroduceerd aangepaste varianten - bijv <div class="[&:has(:focus-visible)]:outline-red-600"> — maar soms is het makkelijker om gewoon CSS te schrijven:

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

Laten we zeggen dat we in slechts één geval de willen overschrijven outline-color oppompen van blue naar iets anders. Laten we zeggen dat het element waarmee we werken zowel de Tailwind-klasse heeft .outline-red-600 en die van onszelf .radio-container:has(:focus-visible) klasse:

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

Welke outline-color zal winnen?

Gewoonlijk is de hogere specificiteit van .radio-container:has(:focus-visible) zou betekenen dat de Tailwind-klasse geen effect heeft - zelfs als deze lager in de bronvolgorde staat. Maar, in tegenstelling tot de Tailwind @layer richtlijn die afhankelijk is van de bronvolgorde, de CSS-standaard @layer overstijgt specificiteit.

Als gevolg hiervan kunnen we complexe selectors gebruiken in onze eigen aangepaste stijlen, maar ze nog steeds overschrijven met Tailwind's utility-klassen wanneer dat nodig is - zonder onze toevlucht te hoeven nemen tot hardhandige !important gebruiken om te krijgen wat we willen.