CSS Cascade Layerek használata egyéni stílusok kezelésére egy Tailwind projektben

Ha egy használati osztály csak egy dolgot csinál, akkor valószínűleg nem akarja, hogy a máshonnan érkező stílusok felülírják. Az egyik megközelítés a használata !important 100%-ban biztos lehet benne, hogy a stílust alkalmazni fogják, függetlenül a konkrétumok ütközésétől.

A Tailwind konfigurációs fájl egy !important opció, amely automatikusan hozzáadódik !important minden közüzemi osztályba. A használattal nincs semmi baj !important így, de manapság vannak jobb módszerek a specifikusság kezelésére. Használata CSS kaszkád rétegek elkerülhetjük a használat nehézkezű megközelítését !important.

A kaszkád rétegek lehetővé teszik, hogy a stílusokat „rétegekbe” csoportosítsuk. Egy réteg elsőbbsége mindig felülmúlja a szelektor sajátosságait. A specifikusság csak az egyes rétegeken belül számít. Az ésszerű rétegrend kialakítása segít elkerülni a stíluskonfliktusokat és a specifikussági háborúkat. Ez az, ami miatt a CSS Cascade Layers nagyszerű eszköz egyéni stílusok kezelése harmadik féltől származó keretrendszerekből származó stílusok mellett, mint a Tailwind.

Hátszél forrás .css A fájl általában így kezdődik:

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

Vessen egy pillantást a hivatalos Tailwind dokumentumok az irányelvekről:

Az irányelvek egyéni Tailwind-specifikus at-szabályok, amelyeket a CSS-ben használhat, és amelyek speciális funkciókat kínálnak a Tailwind CSS-projektekhez. Használja a @tailwind utasítást a Tailwind's beillesztésére base, components, utilities és a variants stílusokat a CSS-be.

A létrejövő kimeneti CSS-fájlban a Tailwind CSS-visszaállítása – az úgynevezett Repülés előtti — először szerepel az alapstílusok részeként. A többi base A Tailwind működéséhez szükséges CSS-változókból áll. components egy olyan hely, ahol felveheti saját egyéni osztályait. A jelölésben használt segédosztályok ezután jelennek meg. A változatok olyan stílusok, mint például a lebegtetési és fókuszállapotok, valamint a reszponzív stílusok, amelyek utoljára jelennek meg a generált CSS-fájlban.

A hátszél @layer Irányelv

Zavarba ejtő, hogy a Tailwindnek megvan a maga @layer szintaxis. Ez a cikk a CSS-szabványról szól, de vessünk egy pillantást a Tailwind verzióra (amely le van fordítva, és nem kerül a kimeneti CSS-be). A hátszél @layer Az direktíva egy módja annak, hogy saját extra stílusokat illesszen be a kimeneti CSS-fájl meghatározott részébe.

Például saját stílusok hozzáfűzéséhez a base stílusok esetén a következőket kell tennie:

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

A components réteg alapértelmezés szerint üres – ez csak egy hely, ahol elhelyezheti saját osztályait. Ha hátszél módjára csinálná a dolgokat, valószínűleg használná @apply (bár nemrég a Tailwind alkotója ellene javasolta), de az osztályokat a szokásos módon is írhatja:

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

A CSS szabvány sokkal erősebb. Térjünk vissza erre…

A CSS szabvány használata @layer

Így írhatjuk át ezt a CSS szabvány használatára @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

A Tailwind direktívával ellentétben ezeket nem fordítják le. A böngésző megérti őket. Valójában az Edge, a Chrome, a Safari és a Firefox DevTools még az Ön által meghatározott rétegeket is megmutatja.

Tetszőleges számú rétege lehet – és tetszés szerint nevezheti el őket –, de ebben a példában az összes egyéni stílusom egyetlen rétegben (my-custom-styles). Az első sor meghatározza a rétegrendet:

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

Ezt előre kell biztosítani. Ügyeljen arra, hogy ezt a sort minden más kód elé írja be @layer. A lista első rétege a legkevésbé erős, és a lista utolsó rétege a a legtöbb erős. Azt jelenti tailwind-base a legkevésbé erős réteget és a benne lévő kódokat az összes következő réteg felülírja. Ez azt is jelenti tailwind-utilities mindig legyőz minden más stílust – függetlenül a forrás sorrendjétől vagy sajátosságától. (Segédprogramok és változatok tudott külön rétegekben menjen, de a Tailwind fenntartói gondoskodnak arról, hogy a változatok mindig felülmúlják a segédprogramokat, mindaddig, amíg a változatokat a segédprogramok irányelve alá helyezi.)

Bármi, ami nincs egy rétegben, felülír mindent, ami egy rétegben van (az egyetlen kivétel a stílusok, amelyek !important). Tehát a távozás mellett is dönthet utilities és a variants bármely rétegen kívül:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Mit vett ez valójában nekünk? Rengeteg alkalom van, amikor a fejlett CSS-választók nagyon hasznosak. Hozzuk létre a verziót :focus-within amely csak a billentyűzet fókuszára reagál, nem pedig az egérkattintásra :has választó (amely a Chrome 105-ben landol). Ez stílust ad egy szülő elemnek, amikor valamelyik gyermeke fókuszba kerül. Bemutatták a Tailwind 3.1-et egyedi változatok - például <div class="[&:has(:focus-visible)]:outline-red-600"> – de néha egyszerűbb CSS-t írni:

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

Tegyük fel, hogy csak egy esetben szeretnénk felülbírálni a outline-color ból ből blue valami másra. Tegyük fel, hogy az elem, amellyel dolgozunk, mindkét Tailwind osztályt tartalmazza .outline-red-600 és a sajátunk .radio-container:has(:focus-visible) osztály:

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

Melyik outline-color nyerni fog?

Általában a magasabb specifitású .radio-container:has(:focus-visible) azt jelentené, hogy a Tailwind osztálynak nincs hatása – még akkor sem, ha alacsonyabb a forrássorrendben. De a Tailwinddel ellentétben @layer direktíva, amely a forrássorrendre, a CSS szabványra támaszkodik @layer felülbírálja a specifikusságot.

Ennek eredményeként használhatunk összetett kiválasztókat saját stílusunkban, de szükség esetén felülírhatjuk őket a Tailwind segédprogramjaival – anélkül, hogy nehézkezű eszközökhöz kellene folyamodnunk. !important használat, hogy megkapjuk, amit akarunk.