CSS-i kaskaadikihtide kasutamine Tailwindi projekti kohandatud stiilide haldamiseks

Kui utiliit teeb ainult ühte asja, siis tõenäoliselt ei taha te, et mujalt pärit stiilid seda tühistaksid. Üks lähenemisviis on kasutada !important et olla 100% kindel, et stiili rakendatakse, olenemata spetsiifilisuse konfliktidest.

Tailwindi konfiguratsioonifailil on !important valik, mis lisatakse automaatselt !important igasse kommunaalklassi. Kasutamisel pole viga !important sel viisil, kuid tänapäeval on spetsiifilisusega toimetulemiseks paremaid viise. Kasutades CSS-i kaskaadikihid saame vältida raskekäelist kasutamist !important.

Kaskaadikihid võimaldavad meil rühmitada stiile "kihtideks". Kihi prioriteetsus ületab alati valija spetsiifilisuse. Spetsiifilisus on oluline ainult iga kihi sees. Mõistliku kihtide järjestuse loomine aitab vältida stiilikonflikte ja spetsiifilisuse sõdu. See teebki CSS Cascade Layersist suurepärase tööriista kohandatud stiilide haldamine koos kolmandate osapoolte raamistike stiilidega, nagu Tailwind.

Tagattuule allikas .css fail algab tavaliselt umbes nii:

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

Vaatame lähemalt ametlikud Tailwindi dokumendid direktiivide kohta:

Direktiivid on kohandatud Tailwind-spetsiifilised at-reeglid, mida saate oma CSS-is kasutada ja mis pakuvad Tailwindi CSS-projektide jaoks erifunktsioone. Kasuta @tailwind käskkiri Tailwindi lisamiseks base, components, utilities ja variants stiilid oma CSS-i.

Ehitatavas väljund-CSS-failis lähtestatakse Tailwindi CSS-i – tuntud kui Eellend — sisaldub esmalt põhistiilide osana. Ülejäänud base koosneb Tailwindi toimimiseks vajalikest CSS-i muutujatest. components on koht, kus saate lisada oma kohandatud klasse. Järgmisena kuvatakse kõik utiliidiklassid, mida olete märgistuses kasutanud. Variandid on stiilid selliste asjade jaoks nagu hõljutus- ja fookusolekud ning reageerivad stiilid, mis kuvatakse loodud CSS-failis viimasena.

Taganttuul @layer Direktiivi

Segadusttekitavalt on Tailwindil oma @layer süntaks. See artikkel käsitleb CSS-i standardit, kuid vaatame lühidalt Tailwindi versiooni (mis kompileeritakse ära ja ei satu väljund-CSS-i). Taganttuul @layer direktiiv on viis, kuidas sisestada väljund-CSS-faili teatud ossa oma lisastiile.

Näiteks oma stiilide lisamiseks base stiilide puhul teete järgmist:

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

. components kiht on vaikimisi tühi — see on lihtsalt koht, kuhu oma klassid panna. Kui teeksite asju Tailwindi moodi, siis ilmselt kasutaksite @apply (kuigi Tailwindi looja hiljuti ei soovitanud seda), kuid saate klasse kirjutada ka tavalisel viisil:

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

CSS-standard on palju võimsam. Tuleme selle juurde tagasi…

CSS-i standardi kasutamine @layer

Siin on, kuidas saame selle CSS-standardi kasutamiseks ümber kirjutada @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

Erinevalt Tailwindi direktiivist neid ei kompileerita. Brauser saab neist aru. Tegelikult näitavad Edge'i, Chrome'i, Safari ja Firefoxi DevTools teile isegi kõiki teie määratletud kihte.

Teil võib olla nii palju kihte kui soovite – ja nimetage neid kuidas soovite –, kuid selles näites on kõik minu kohandatud stiilid ühes kihis (my-custom-styles). Esimene rida määrab kihtide järjekorra:

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

See tuleb ette näha. Lisage see rida kindlasti enne mis tahes muud kasutatavat koodi @layer. Loendi esimene kiht on kõige vähem võimas ja loendi viimane kiht on kõige võimas. See tähendab tailwind-base on kõige vähem võimsad kiht ja mis tahes selles sisalduv kood alistavad kõik järgnevad kihid. See tähendab ka tailwind-utilities ületab alati kõik muud stiilid - sõltumata allika järjestusest või spetsiifikast. (Kommunaalteenused ja variandid võiks minge eraldi kihtidena, kuid Tailwindi hooldajad tagavad, et variandid ületavad alati kommunaalteenuseid, kui lisate kommunaalteenuste direktiivi alla olevad variandid.)

Kõik, mis ei ole kihis, alistab kõik, mis on kihis (erandiks on stiilid, mis kasutavad !important). Seega võite ka lahkuda utilities ja variants väljaspool mis tahes kihti:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Mida see meile tegelikult ostis? On palju kordi, mil täiustatud CSS-i valijad on üsna kasulikud. Loome versiooni :focus-within mis reageerib ainult klaviatuuri fookusele, mitte hiireklõpsudele :has valija (mis jõuab Chrome 105-sse). See kujundab vanemelemendi stiili, kui mõni selle laps keskendub. Kasutusele võetud Tailwind 3.1 kohandatud variandid — nt <div class="[&:has(:focus-visible)]:outline-red-600"> — kuid mõnikord on lihtsam lihtsalt CSS-i kirjutada:

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

Oletame, et ainult ühel juhul tahame alistada outline-color Alates blue millelegi muule. Oletame, et elemendil, millega me töötame, on nii Tailwindi klass .outline-red-600 ja meie oma .radio-container:has(:focus-visible) klass:

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

Mis outline-color võidab?

Tavaliselt kõrgem spetsiifilisus .radio-container:has(:focus-visible) tähendaks, et Tailwindi klassil pole mingit mõju – isegi kui see on lähtejärjekorras madalam. Kuid erinevalt Tailwindist @layer direktiiv, mis tugineb lähtejärjekorrale, CSS-standardile @layer alistab spetsiifilisuse.

Selle tulemusel saame kasutada keerulisi valijaid oma kohandatud stiilides, kuid siiski alistame need vajaduse korral Tailwindi utiliidiklassidega – ilma, et peaksime kasutama rasket kätt. !important kasutamine, et saada, mida me tahame.