Uporaba kaskadnih plasti CSS za upravljanje slogov po meri v projektu Tailwind

Če uporabni razred naredi samo eno stvar, verjetno ne želite, da ga preglasijo kateri koli slogi, ki prihajajo od drugod. Eden od pristopov je uporaba !important biti 100 % prepričan, da bo slog uporabljen, ne glede na konflikte specifičnosti.

Konfiguracijska datoteka Tailwind ima !important možnost, ki bo samodejno dodana !important vsakemu uporabnemu razredu. Nič ni narobe z uporabo !important na ta način, vendar dandanes obstajajo boljši načini za obravnavanje specifičnosti. Uporaba Kaskadni sloji CSS se lahko izognemo težkemu pristopu uporabe !important.

Kaskadni sloji nam omogočajo združevanje slogov v »sloje«. Prednost sloja vedno premaga specifičnost izbirnika. Specifičnost je pomembna le znotraj vsake plasti. Vzpostavitev razumnega vrstnega reda slojev pomaga preprečiti slogovne konflikte in vojne glede specifičnosti. To je tisto, zaradi česar so kaskadne plasti CSS odlično orodje upravljanje slogov po meri skupaj s slogi iz ogrodij tretjih oseb, kot je Tailwind.

Vir hrbtnega vetra .css datoteka se običajno začne nekako takole:

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

Oglejmo si uradni dokumenti Tailwind o direktivah:

Direktive so pravila at-pravila, specifična za Tailwind, ki jih lahko uporabite v svojem CSS in ponujajo posebno funkcionalnost za projekte Tailwind CSS. Uporabi @tailwind direktivo za vstavljanje Tailwindov base, components, utilities in variants slogov v vaš CSS.

V izhodni datoteki CSS, ki se zgradi, Tailwindova ponastavitev CSS — znana kot Predlet — je najprej vključen kot del osnovnih slogov. Ostalo base je sestavljen iz spremenljivk CSS, ki so potrebne za delovanje Tailwinda. components je mesto, kjer lahko dodate svoje razrede po meri. Naslednji bodo prikazani vsi uporabni razredi, ki ste jih uporabili v svojem označevanju. Različice so slogi za stvari, kot so stanja lebdenja in fokusa ter odzivni slogi, ki bodo prikazani zadnji v ustvarjeni datoteki CSS.

Hrbtni veter @layer Direktiva

Zmedeno je, da ima Tailwind svojega @layer sintaksa. Ta članek govori o standardu CSS, vendar si na hitro oglejmo različico Tailwind (ki se prevede stran in ne konča v izhodnem CSS). Hrbtni veter @layer je način za vnos lastnih dodatnih slogov v določen del izhodne datoteke CSS.

Na primer, da dodate svoje sloge v base stilov, bi naredili naslednje:

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

O components sloj je privzeto prazen — to je le prostor, kjer lahko postavite svoje razrede. Če bi delali stvari na način Tailwind, bi verjetno uporabili @apply (čeprav je pred kratkim ustvarjalec Tailwind odsvetoval), vendar lahko razrede pišete tudi na običajen način:

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

Standard CSS je veliko močnejši. Vrnimo se k temu …

Uporaba standarda CSS @layer

Evo, kako lahko to prepišemo za uporabo standarda CSS @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

Za razliko od direktive Tailwind se ti ne prevedejo. Brskalnik jih razume. Pravzaprav vam bodo orodja DevTools v Edge, Chromu, Safariju in Firefoxu celo pokazala vse plasti, ki ste jih definirali.

Lahko imate poljubno število slojev — in jih poimenujte kakor želite — toda v tem primeru so vsi moji slogi po meri v eni sami plasti (my-custom-styles). Prva vrstica določa vrstni red plasti:

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

To je treba zagotoviti vnaprej. Ne pozabite vključiti te vrstice pred katero koli drugo kodo, ki uporablja @layer. Prva plast na seznamu bo vsaj močan, zadnja plast na seznamu pa bo Najbolj močan. To pomeni tailwind-base ali je najmanj močna plast in katero koli kodo v njej bodo preglasile vse naslednje plasti. To tudi pomeni tailwind-utilities bo vedno prevladal nad vsemi drugimi slogi - ne glede na izvorni vrstni red ali specifičnost. (Pripomočki in različice bi iti v ločenih plasteh, vendar bodo vzdrževalci Tailwinda zagotovili, da različice vedno prevladajo nad pripomočki, če vključite različice pod direktivo o pripomočkih.)

Vse, kar ni v sloju, bo preglasilo vse, kar je v sloju (edina izjema so slogi, ki uporabljajo !important). Torej bi se lahko tudi odločili za odhod utilities in variants zunaj katerega koli sloja:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Kaj smo pravzaprav s tem kupili? Velikokrat pridejo napredni izbirniki CSS zelo prav. Ustvarimo različico :focus-within ki se odziva samo na fokus tipkovnice in ne na klike miške z uporabo :has selektor (ki pristane v Chromu 105). To bo stiliziralo nadrejeni element, ko kateri koli od njegovih podrejenih elementov prejme fokus. Predstavljen Tailwind 3.1 variante po meri - npr <div class="[&:has(:focus-visible)]:outline-red-600"> — a včasih je lažje samo napisati 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;
  }
}

Recimo, da samo v enem primeru želimo preglasiti outline-color iz blue na nekaj drugega. Recimo, da ima element, s katerim delamo, oba razreda Tailwind .outline-red-600 in naše lastne .radio-container:has(:focus-visible) razred:

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

Ki outline-color bo zmagal?

Običajno je višja specifičnost .radio-container:has(:focus-visible) bi pomenilo, da razred Tailwind nima učinka — tudi če je nižje v izvornem vrstnem redu. Ampak, za razliko od Tailwinda @layer direktivo, ki se opira na izvorni vrstni red, standard CSS @layer prevlada nad specifičnostjo.

Posledično lahko uporabimo zapletene izbirnike v lastnih slogih po meri, vendar jih še vedno preglasimo z razredi pripomočkov Tailwind, ko to potrebujemo – ne da bi se morali zateči k težkim !important uporaba, da dobimo, kar želimo.