See postitus illustreerib kõiki võimalikke aspekte Tailwind CSS-i baasstiilide lisamiseks.
Kuidas lisada Tailwindis 'baas' stiile?
'Tailwind CSS' sisaldab kolme järgmist meetodit 'baas' stiilide lisamiseks kogu HTML-i sisusse või konkreetsesse elementi:
- Kasutage Tailwindis põhistiilide lisamiseks CSS-i.
- Kasutage Tailwindis põhistiilide lisamiseks pistikprogrammi.
Uurime neid ükshaaval.
Eeldused
Enne praktilise teostuse juurde asumist vaadake esmalt vastloodud projekti nimega 'Linuxhint', mida kasutatakse 'baasstiilide' lisamiseks:
Projekti faili struktuur
Nüüd liikuge faili 'index.html' juurde ja vaadake selle HTML-koodi:
< html >< pea >
< link href = '/dist/output.css' rel = 'laadileht' >
< / pea >
< keha >
< h2 klass = 'alakriipsutamine tekstikeskuse font-paks tekst-roosa-600' > Tere tulemast Linuxhinti! < / h2 >< br >
< h3 klass = 'tekstikeskuse font-paks tekst-oranž-600' > Õpetus: Põhistiilide lisamine Tailwindis. < / h3 >< br >
< / keha >
Ülaltoodud koodiridades:
Väljund
Ülaltoodud koodi väljund kuvatakse siin:
Nüüd kasutage ülaltoodud HTML-koodi kohandamiseks ülaltoodud meetodit, lisades põhistiile. Alustame Tailwind 'CSS' meetodiga.
1. meetod: kasutage Tailwindis “baasstiilide” lisamiseks CSS-i
Lihtsaim ja lihtsaim viis konkreetsele HTML-elemendile põhistiili lisamiseks on lisada need projekti CSS-i põhifaili. Teeme selle ülesande praktiliselt, järgides antud samme.
1. samm: avage CSS-fail
Esmalt avage peamine CSS-fail, st ' stiil.css ”, mis sisaldab sisseehitatud taganttuule „baasi”, „komponente” ja „utiliite” kihte:
2. samm: lisage CSS
Järgmisena lisage konkreetsete HTML-elementide '
' ja '' jaoks 'baas' stiil, rakendades klasse kasutades ' @rakendus ' aluskihis käsu ' abil @kiht ” märksõna. Märksõnad '@layer' lisavad määratletud klassid määratud 'alus'kihile: @kihi alus {
h2 {
@rakendus tekst-3xl;
}
h3 {
@apply text-xl;
}
}
h2 {
@rakendus tekst-3xl;
}
h3 {
@apply text-xl;
}
}
Ülaltoodud koodiridadel on ' Fondi suurus ” klassi rakendatakse elementidele “
” ja “”, et suurendada neid vastavalt määratud suuruseni:
Salvestage fail (Ctrl + S).
3. samm: väljund
Nüüd käivitage kood reaalajas serveris ja vaadake väljundit järgmiselt:
Siin näitab väljund, et Tailwind “Font Size” klass on edukalt rakendatud põhikihi määratud elemendile.
Märge : sama lähenemisviisi kasutatakse kõigi teiste Tailwindi CSS-i klasside puhul.
2. meetod: kasutage Tailwindis “baasstiilide” lisamiseks pistikprogrammi
Veel üks kasulik meetod 'baas' stiilide lisamiseks on kirjutada ' sisse panema ” ja kasuta „ addBase() ” funktsioon. See funktsioon aitab registreerida uusi klasse ' alus ” kihi direktiiv. Seda funktsiooni kasutatakse Tailwindi failis 'tailwind.config.js'. Teeme seda praktiliselt.
1. samm: määratlege funktsioon 'addBase()'.
Kõigepealt navigeerige jaotisse ' tailwind.config.js ” konfiguratsioonifail ja lisage pistikprogrammist baaslaadid ning kutsuge funktsioon 'addBase()':
Salvestage fail.
2. samm: väljund
Lõpuks käivitage antud HTML-kood ja vaadake väljundit:
Nagu näha, rakendatakse määratud HTML-i elementidele funktsioonis „addBase()” määratletud klassi „Font Size” JavaScripti objektina.
Järeldus
Tailwind Base Style'i saab hõlpsasti lisada, kasutades ' CSS ' klassid põhi-CSS-failis ja ' Sisse panema ' koos ' addBase() ” funktsioon konfiguratsioonifailis. 'CSS' meetodit peetakse lihtsaimaks meetodiks, kuna see määratleb ainult 'alus' kihis olevad põhistiilid ja rakendab need automaatselt määratud elemendil. Teisest küljest, jaotise „Plugin” jaotis tailwind.config.js ” fail nõuab funktsiooni „addBase()”, et määratleda baasstiilid JavaScripti objektidena. See postitus illustreeris kõiki võimalikke aspekte Tailwind CSS-i põhistiilide lisamiseks.