CSS-kaskaditasojen käyttäminen mukautettujen tyylien hallintaan Tailwind-projektissa

Jos hyödyllisyysluokka tekee vain yhden asian, et todennäköisesti halua, että muut tyylit ohittavat sen. Yksi lähestymistapa on käyttää !important olla 100 % varma, että tyyliä käytetään, riippumatta spesifisyysristiriidoista.

Tailwind-määritystiedostossa on !important vaihtoehto, joka lisätään automaattisesti !important jokaiseen käyttöluokkaan. Käytössä ei ole mitään vikaa !important tällä tavalla, mutta nykyään on olemassa parempia tapoja käsitellä spesifisyyttä. Käyttämällä CSS Cascade Layers voimme välttää raskaan käden käytön !important.

Cascade-tasojen avulla voimme ryhmitellä tyylejä "kerroksiksi". Kerroksen etusija päihittää aina valitsimen spesifisyyden. Spesifisyydellä on merkitystä vain kunkin kerroksen sisällä. Järkevän tasojärjestyksen luominen auttaa välttämään tyyliristiriidat ja spesifisyyssodat. Tämä tekee CSS Cascade Layersista erinomaisen työkalun mukautettujen tyylien hallinta kolmannen osapuolen kehysten tyylien rinnalla, kuten Tailwind.

Myötätuulen lähde .css tiedosto alkaa yleensä näin:

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

Katsotaanpa tätä viralliset Tailwind-dokumentit ohjeista:

Ohjeet ovat mukautettuja Tailwind-kohtaisia ​​at-sääntöjä, joita voit käyttää CSS:ssäsi ja jotka tarjoavat erityisiä toimintoja Tailwind CSS -projekteihin. Käytä @tailwind käsky lisätä Tailwind's base, components, utilities ja variants tyylit CSS:ään.

Luotavassa CSS-tulostetiedostossa Tailwindin CSS-nollaus - tunnetaan nimellä Esilento — sisältyy ensin osana perustyylejä. Loput base koostuu Tailwindin toimimiseen tarvittavista CSS-muuttujista. components on paikka, jossa voit lisätä omia mukautettuja kursseja. Seuraavaksi tulevat näkyviin kaikki merkinnöissäsi käyttämäsi hyödyllisyysluokat. Muunnelmat ovat tyylejä asioille, kuten hiiri- ja tarkennustiloihin sekä reagoiviin tyyleihin, jotka näkyvät viimeisenä luodussa CSS-tiedostossa.

Myötätuuli @layer Direktiivi

Hämmentävää, Tailwindillä on omansa @layer syntaksi. Tämä artikkeli käsittelee CSS-standardia, mutta katsotaanpa nopeasti Tailwind-versiota (joka käännetään pois eikä päädy tulostettavaan CSS:ään). Myötätuuli @layer -direktiivi on tapa lisätä omia ylimääräisiä tyylejä tulostettavan CSS-tiedoston tiettyyn osaan.

Voit esimerkiksi lisätä omia tyylejäsi base tyylit, toimit seuraavasti:

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

- components kerros on oletuksena tyhjä – se on vain paikka, jossa voit laittaa omat luokkasi. Jos tekisit asioita Tailwind-tavalla, käyttäisit sitä todennäköisesti @apply (vaikka Tailwindin luoja äskettäin neuvonut olemaan sitä vastaan), mutta voit myös kirjoittaa luokkia tavallisella tavalla:

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

CSS-standardi on paljon tehokkaampi. Palataan asiaan…

CSS-standardin käyttö @layer

Näin voimme kirjoittaa tämän uudelleen käyttämään CSS-standardia @layer:

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

@layer tailwind-base {
  @tailwind base;
}

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

Toisin kuin Tailwind-direktiivi, näitä ei käännetä pois. Selain ymmärtää ne. Itse asiassa Edgen, Chromen, Safarin ja Firefoxin DevTools näyttää sinulle jopa määrittämäsi tasot.

Sinulla voi olla niin monta tasoa kuin haluat – ja nimeä ne miten haluat – mutta tässä esimerkissä kaikki mukautetut tyylini ovat yhdessä tasossa (my-custom-styles). Ensimmäinen rivi määrittää kerrosten järjestyksen:

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

Tämä on annettava etukäteen. Muista sisällyttää tämä rivi ennen muita käyttäviä koodeja @layer. Luettelon ensimmäinen kerros on vähiten tehokas, ja luettelon viimeinen kerros on eniten voimakas. Se tarkoittaa tailwind-base on vähiten voimakas kerros ja kaikki siinä olevat koodit ohitetaan kaikilla myöhemmillä kerroksilla. Se tarkoittaa myös tailwind-utilities voittaa aina muut tyylit - riippumatta lähteen järjestyksestä tai spesifisyydestä. (Apuohjelmat ja vaihtoehdot voisi mene eri kerroksiin, mutta Tailwindin ylläpitäjät varmistavat, että vaihtoehdot ovat aina apuohjelmien etusijalla, kunhan sisällytät versiot apuohjelmadirektiivin alapuolelle.)

Kaikki, mikä ei ole tasossa, ohittaa kaiken, mikä on tasossa (poikkeuksena ovat tyylit, jotka käyttävät !important). Joten voit myös valita lähtemisen utilities ja variants minkä tahansa kerroksen ulkopuolella:

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

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@tailwind utilities;
@tailwind variants;

Mitä tämä oikeastaan ​​osti meille? On monia aikoja, jolloin kehittyneet CSS-valitsimet ovat melko käteviä. Luodaan versio :focus-within joka vastaa vain näppäimistön tarkennukseen eikä hiiren napsautuksiin :has valitsin (joka laskeutuu Chrome 105:een). Tämä muotoilee vanhemman elementin, kun joku sen lapsista keskittyy. Tailwind 3.1 esitelty mukautettuja variantteja - esimerkiksi <div class="[&:has(:focus-visible)]:outline-red-600"> - mutta joskus on helpompaa kirjoittaa vain 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;
  }
}

Oletetaan, että vain yhdessä tapauksessa haluamme ohittaa outline-color alkaen blue johonkin muuhun. Oletetaan, että elementillä, jonka kanssa työskentelemme, on molemmat Tailwind-luokka .outline-red-600 ja omamme .radio-container:has(:focus-visible) luokka:

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

Joka outline-color voittaa?

Tavallisesti korkeampi spesifisyys .radio-container:has(:focus-visible) tarkoittaisi, että Tailwind-luokalla ei ole vaikutusta – vaikka se olisikin alempi lähdejärjestyksessä. Mutta toisin kuin Tailwind @layer direktiivi, joka perustuu lähdejärjestykseen, CSS-standardiin @layer ohittaa spesifisyyden.

Tämän seurauksena voimme käyttää monimutkaisia ​​valitsimia omissa mukautetuissa tyyleissämme, mutta silti ohittaa ne Tailwindin hyödyllisyysluokilla tarpeen tullen – ilman, että meidän on turvauduttava raskaaseen. !important käyttö saada mitä haluamme.