Tämä viesti havainnollistaa kaikkia mahdollisia näkökohtia 'perustyylien' lisäämiseen Tailwind CSS: ään.
Kuinka lisätä 'perus'-tyylejä Tailwindissä?
'Tailwind CSS' sisältää seuraavat kolme tapaa lisätä 'perus' tyylit koko HTML-sisältöön tai tiettyyn elementtiin:
- Käytä CSS:ää lisätäksesi perustyylejä Tailwindissä.
- Käytä 'Plugin' lisätäksesi perustyylejä Tailwindissä.
Tutkitaan niitä yksitellen.
Edellytykset
Ennen kuin siirryt käytännön toteutukseen, katso ensin äskettäin luotua projektia nimeltä “Linuxhint”, jota käytetään “perustyylien” lisäämiseen:
Projektin tiedostorakenne
Siirry nyt 'index.html'-tiedostoon ja katso sen HTML-koodia:
< html >< pää >
< linkki href = '/dist/output.css' rel = 'tyylitaulukko' >
< / pää >
< kehon >
< h2 luokkaa = 'alleviivaus teksti-keskusfontti-lihavoitu teksti-vaaleanpunainen-600' > Tervetuloa Linuxhintiin! < / h2 >< br >
< h3 luokkaa = 'text-center font-bold text-oranssi-600' > Opetusohjelma: Perustyylien lisääminen Tailwindissä. < / h3 >< br >
< / kehon >
Yllä olevilla koodiriveillä:
Lähtö
Yllä olevan koodin tulos näkyy tässä:
Käytä nyt käsiteltyä menetelmää mukauttaaksesi yllä olevaa HTML-koodia lisäämällä perustyylejä. Aloitetaan Tailwind 'CSS' -menetelmällä.
Tapa 1: Käytä CSS:ää lisätäksesi 'perustyylejä' Tailwindissä
Yksinkertaisin ja helpoin tapa lisätä perustyyli tiettyyn HTML-elementtiin on lisätä ne projektin CSS-päätiedostoon. Suoritetaan tämä tehtävä käytännössä noudattamalla annettuja vaiheita.
Vaihe 1: Avaa CSS-tiedosto
Avaa ensin CSS-päätiedosto, eli ' tyyli.css ', joka sisältää sisäänrakennetun myötätuulen 'pohjan', 'komponentit' ja 'apuohjelmat':
Vaihe 2: Lisää CSS
Lisää seuraavaksi 'perus' tyyli tietyille '
' ja '' HTML-elementeille käyttämällä luokkia ' @Käytä ' -direktiivi 'perus'-kerroksessa '' @kerros ”avainsana. '@layer'-avainsanat lisäävät määritetyt luokat määritettyyn 'perus'-tasoon: @kerrospohja {
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
Yllä olevilla koodiriveillä ' Fonttikoko ' -luokkaa käytetään '
'- ja ''-elementteihin niiden suurentamiseksi määritettyyn kokoon, vastaavasti:
Tallenna (Ctrl + S) tiedosto.
Vaihe 3: Tulostus
Suorita nyt koodi live-palvelimessa ja katso tulos seuraavasti:
Tässä tulos näyttää, että Tailwind 'Font Size' -luokka on otettu onnistuneesti käyttöön määritettyyn elementtiin peruskerroksessa.
Huomautus : Samaa lähestymistapaa käytetään kaikissa muissa Tailwind CSS -luokissa.
Tapa 2: Lisää 'perustyylejä' Tailwindissä Pluginilla
Toinen hyödyllinen tapa lisätä 'perustyylejä' on kirjoittaa ' kytkeä ' ja käytä ' addBase() ”-toiminto. Tämä toiminto auttaa rekisteröimään uusia luokkia ' pohja ”kerroksen direktiivi. Tätä toimintoa käytetään Tailwind 'tailwind.config.js' -tiedostossa. Tehdään se käytännössä.
Vaihe 1: Määritä 'addBase()' -funktio
Siirry ensin kohtaan ' tailwind.config.js ' määritystiedosto ja lisää perustyylit laajennuksesta ja kutsu 'addBase()'-funktio:
Tallenna tiedosto.
Vaihe 2: Tulostus
Suorita lopuksi annettu HTML-koodi ja katso tulos:
Kuten näkyy, 'addBase()'-funktiossa JavaScript-objektina määritettyä Tailwind 'Font Size' -luokkaa sovelletaan määritettyihin HTML-elementteihin.
Johtopäätös
Tailwind Base -tyylejä voidaan lisätä helposti käyttämällä ' CSS '-luokat CSS-päätiedostossa ja ' Kytkeä ' kanssa ' addBase() ”-toimintoa asetustiedostossa. 'CSS'-menetelmää pidetään yksinkertaisimpana menetelmänä, koska se määrittää vain perustyylit 'perus'-kerroksessa ja toteuttaa ne automaattisesti määritetyssä elementissä. Toisaalta 'plugin'-osio tailwind.config.js '-tiedosto vaatii 'addBase()'-funktion määrittääkseen perustyylit JavaScript-objekteiksi. Tämä viesti havainnollisti kaikkia mahdollisia näkökohtia perustyylien lisäämiseksi Tailwind CSS: ään.