Utilizarea straturilor în cascadă CSS pentru a gestiona stilurile personalizate într-un proiect Tailwind

Dacă o clasă de utilitate face un singur lucru, sunt șanse să nu doriți ca ea să fie înlocuită de niciun stil care vine din altă parte. O abordare este utilizarea !important pentru a fi 100% sigur că stilul va fi aplicat, indiferent de conflictele de specificitate.

Fișierul de configurare Tailwind are un !important opțiune care se va adăuga automat !important la fiecare clasă de utilitate. Nu este nimic în neregulă cu utilizarea !important în acest fel, dar în zilele noastre există modalități mai bune de a gestiona specificitatea. Folosind Straturi în cascadă CSS putem evita abordarea grea a folosirii !important.

Straturile în cascadă ne permit să grupăm stilurile în „straturi”. Precedenta unui strat bate intotdeauna specificul unui selector. Specificitatea contează doar în interiorul fiecărui strat. Stabilirea unei ordini sensibile a straturilor ajută la evitarea conflictelor de stil și a războaielor specifice. De aceea, CSS Cascade Layers este un instrument excelent pentru gestionarea stilurilor personalizate alături de stiluri din cadre terțe, ca Tailwind.

O sursă Tailwind .css fișierul începe de obicei cam așa:

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

Să aruncăm o privire la documentele oficiale Tailwind despre directive:

Directivele sunt reguli personalizate specifice Tailwind pe care le puteți utiliza în CSS-ul dvs., care oferă funcționalități speciale pentru proiectele Tailwind CSS. Folosește @tailwind directivă pentru a introduce Tailwind's base, components, utilities și variants stiluri în CSS.

În fișierul CSS de ieșire care este construit, resetarea CSS a lui Tailwind - cunoscută ca Pre-zbor — este inclus mai întâi ca parte a stilurilor de bază. Restul base constă din variabile CSS necesare pentru ca Tailwind să funcționeze. components este un loc unde puteți adăuga propriile clase personalizate. Orice clase de utilitate pe care le-ați folosit în marcajul dvs. vor apărea în continuare. Variantele sunt stiluri pentru lucruri precum stările de trecere cu mouse-ul și de focalizare și stilurile de răspuns, care vor apărea ultimele în fișierul CSS generat.

Vântul din coadă @layer directivă

În mod confuz, Tailwind are propriile sale @layer sintaxă. Acest articol este despre standardul CSS, dar haideți să aruncăm o privire rapidă la versiunea Tailwind (care este compilată și nu ajunge în CSS de ieșire). Vântul din coadă @layer directiva este o modalitate de a injecta propriile stiluri suplimentare într-o parte specificată a fișierului CSS de ieșire.

De exemplu, pentru a adăuga propriile stiluri la base stiluri, ați face următoarele:

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

components stratul este gol în mod implicit - este doar un loc pentru a vă pune propriile clase. Dacă ai face lucrurile în modul Tailwind, probabil ai folosi @apply (deși recent creatorul lui Tailwind sfatuit impotriva), dar puteți scrie și cursuri în mod obișnuit:

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

Standardul CSS este mult mai puternic. Să revenim la asta…

Folosind standardul CSS @layer

Iată cum putem rescrie acest lucru pentru a folosi standardul CSS @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

Spre deosebire de directiva Tailwind, acestea nu sunt compilate. Ele sunt înțelese de browser. De fapt, DevTools din Edge, Chrome, Safari și Firefox vă vor arăta chiar și toate straturile pe care le-ați definit.

Puteți avea câte straturi doriți - și numiți-le cum doriți - dar în acest exemplu, toate stilurile mele personalizate sunt într-un singur strat (my-custom-styles). Prima linie stabilește ordinea straturilor:

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

Acest lucru trebuie furnizat în avans. Asigurați-vă că includeți această linie înainte de orice alt cod care îl folosește @layer. Primul strat din listă va fi cel mai puțin puternic, iar ultimul strat din listă va fi cele mai multe puternic. Asta inseamna tailwind-base este cel mai putin puternic stratul și orice cod din acesta vor fi suprascrise de toate straturile ulterioare. Asta înseamnă și tailwind-utilities va învinge întotdeauna orice alte stiluri - indiferent de ordinea sursei sau specificul. (Utilități și variante ar putea mergeți în straturi separate, dar menținătorii lui Tailwind se vor asigura că variantele au învingător întotdeauna utilitățile, atâta timp cât includeți variantele sub directiva utilităților.)

Orice lucru care nu este într-un strat va suprascrie orice se află într-un strat (cu singura excepție fiind stilurile care utilizează !important). Deci, ai putea alege să pleci utilities și variants în afara oricărui strat:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Ce ne-a cumpărat asta de fapt? Există o mulțime de momente în care selectoarele CSS avansate sunt destul de utile. Să creăm o versiune a :focus-within care răspunde doar la focalizarea de la tastatură, mai degrabă decât la clicurile mouse-ului folosind :has selector (care aterizează în Chrome 105). Acest lucru va stila un element părinte atunci când oricare dintre copiii săi primește focalizare. Tailwind 3.1 a fost introdus variante personalizate - de exemplu <div class="[&:has(:focus-visible)]:outline-red-600"> — dar uneori este mai ușor să scrieți 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;
  }
}

Să presupunem că într-o singură situație vrem să înlocuim outline-color din blue la altceva. Să presupunem că elementul cu care lucrăm are atât clasa Tailwind .outline-red-600 și ale noastre .radio-container:has(:focus-visible) clasă:

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

Care outline-color vom castiga?

De obicei, specificitatea mai mare a .radio-container:has(:focus-visible) ar însemna că clasa Tailwind nu are niciun efect - chiar dacă este mai mică în ordinea sursei. Dar, spre deosebire de Tailwind @layer directivă care se bazează pe ordinea sursei, standardul CSS @layer anulează specificitatea.

Ca rezultat, putem folosi selectoare complexe în propriile noastre stiluri personalizate, dar totuși le putem suprascrie cu clasele de utilitate ale Tailwind atunci când avem nevoie - fără a fi nevoie să recurgem la mâini grele. !important folosire pentru a obține ceea ce ne dorim.