Använda CSS Cascade Layers för att hantera anpassade stilar i ett medvindsprojekt

Om en verktygsklass bara gör en sak, är chansen stor att du inte vill att den ska åsidosättas av några stilar som kommer från någon annanstans. Ett tillvägagångssätt är att använda !important för att vara 100 % säker på att stilen kommer att tillämpas, oavsett specificitetskonflikter.

Tailwind-konfigurationsfilen har en !important alternativ som automatiskt läggs till !important till varje bruksklass. Det är inget fel med att använda !important på detta sätt, men nuförtiden finns det bättre sätt att hantera specificitet. Använder sig av CSS kaskadlager vi kan undvika den hårdhänta metoden att använda !important.

Kaskadlager tillåter oss att gruppera stilar i "lager". Ett lagers företräde slår alltid specificiteten för en väljare. Specificitet spelar bara roll inuti varje lager. Att etablera en vettig lagerordning hjälper till att undvika stylingkonflikter och specificitetskrig. Det är det som gör CSS Cascade Layers till ett utmärkt verktyg för hantera anpassade stilar tillsammans med stilar från tredje parts ramverk, som Tailwind.

En medvindskälla .css filen börjar vanligtvis ungefär så här:

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

Låt oss ta en titt på officiella Tailwind-dokument om direktiv:

Direktiv är anpassade Tailwind-specifika at-regler som du kan använda i din CSS som erbjuder speciell funktionalitet för Tailwind CSS-projekt. Använd @tailwind direktiv för att infoga Tailwind's base, components, utilities och variants stilar i din CSS.

I utdata-CSS-filen som byggs, Tailwinds CSS-återställning — känd som Förflygning — ingår först som en del av basstilarna. Resten av base består av CSS-variabler som behövs för att Tailwind ska fungera. components är en plats där du kan lägga till dina egna anpassade klasser. Alla verktygsklasser som du har använt i din uppmärkning visas härnäst. Varianter är stilar för saker som hovring och fokustillstånd och responsiva stilar, som visas sist i den genererade CSS-filen.

Medvinden @layer Direktiven

Förvirrande nog har Tailwind sin egen @layer syntax. Den här artikeln handlar om CSS-standarden, men låt oss ta en snabb titt på Tailwind-versionen (som kompileras bort och inte hamnar i utdata-CSS). Medvinden @layer direktiv är ett sätt att injicera dina egna extra stilar i en specificerad del av utdata-CSS-filen.

Till exempel att lägga till dina egna stilar till base stilar skulle du göra följande:

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

Smakämnen components lagret är tomt som standard - det är bara en plats där du kan lägga dina egna klasser. Om du gjorde saker på Tailwind sätt, skulle du förmodligen använda @apply (även om skaparen av Tailwind nyligen avrådde det), men du kan också skriva klasser på det vanliga sättet:

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

CSS-standarden är mycket kraftfullare. Låt oss återkomma till det...

Använder CSS-standarden @layer

Så här kan vi skriva om detta för att använda CSS-standarden @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

Till skillnad från Tailwind-direktivet, sammanställs dessa inte. De förstås av webbläsaren. Faktum är att DevTools i Edge, Chrome, Safari och Firefox till och med visar dig alla lager du har definierat.

Du kan ha hur många lager du vill – och namnge dem vad du vill – men i det här exemplet är alla mina anpassade stilar i ett enda lager (my-custom-styles). Den första raden fastställer lagerordningen:

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

Detta måste tillhandahållas i förväg. Se till att inkludera den här raden före någon annan kod som använder @layer. Det första lagret i listan kommer att vara t minst kraftfull, och det sista lagret i listan kommer att vara mest kraftfull. Det betyder tailwind-base är minst kraftfulla lager och eventuell kod i det kommer att åsidosättas av alla efterföljande lager. Det betyder också tailwind-utilities kommer alltid att övertrumfa alla andra stilar — oavsett källordning eller specificitet. (Verktyg och varianter kunde gå i separata lager, men underhållarna av Tailwind kommer att säkerställa att varianter alltid övertrumfar verktyg, så länge du inkluderar varianterna under verktygsdirektivet.)

Allt som inte finns i ett lager kommer att åsidosätta allt som finns i ett lager (med det enda undantaget är stilar som använder !important). Så du kan också välja att lämna utilities och variants utanför valfritt lager:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Vad köpte detta oss egentligen? Det finns många tillfällen då avancerade CSS-väljare är ganska praktiska. Låt oss skapa en version av :focus-within som bara reagerar på tangentbordsfokus snarare än musklick med hjälp av :has väljare (som landar i Chrome 105). Detta kommer att utforma ett föräldraelement när något av dess barn får fokus. Tailwind 3.1 introduceras anpassade varianter - t.ex <div class="[&:has(:focus-visible)]:outline-red-600"> — men ibland är det lättare att bara skriva 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;
  }
}

Låt oss säga att vi bara i ett fall vill åsidosätta outline-color från blue till något annat. Låt oss säga att elementet vi arbetar med har både Tailwind-klassen .outline-red-600 och vår egen .radio-container:has(:focus-visible) klass:

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

Som outline-color kommer att vinna?

Vanligtvis är den högre specificiteten av .radio-container:has(:focus-visible) skulle innebära att Tailwind-klassen inte har någon effekt - även om den är lägre i källordningen. Men till skillnad från medvinden @layer direktiv som förlitar sig på källordning, CSS-standarden @layer åsidosätter specificitet.

Som ett resultat kan vi använda komplexa väljare i våra egna anpassade stilar men ändå åsidosätta dem med Tailwinds verktygsklasser när vi behöver - utan att behöva ta till hårdhänta !important användning för att få vad vi vill ha.