Adăugarea stilurilor de bază în Tailwind

Adaugarea Stilurilor De Baza In Tailwind



Baza ” stilurile sunt cunoscute și sub denumirea de stiluri „globale”. Aceste stiluri sunt aplicate la începutul foii de stil care aplică stilul implicit pe elementele HTML de bază precum „titlu”, „linkuri”, „paragrafe” etc. „ Tailwind CSS ” este un cadru CSS versatil bine reputat, care vine cu o gamă largă de stiluri de bază. Oferă un set util de stiluri de bază cunoscute sub numele de „Preflight” care acționează ca un CSS plus un strat subțire cu stiluri mai obișnuite. Mai mult, ele pot fi adăugate dinamic prin definirea lor în stratul „de bază”.

Această postare ilustrează toate aspectele posibile pentru a adăuga „stiluri de bază” în Tailwind CSS.

Cum să adăugați stiluri „de bază” în Tailwind?

„Tailwind CSS” vine cu următoarele trei metode pentru a adăuga stilurile „de bază” în întregul conținut HTML sau într-un anumit element:







Să le explorăm unul câte unul.



Cerințe preliminare
Înainte de a trece la implementarea practică, mai întâi, aruncați o privire la proiectul nou creat numit „Linuxhint” care este folosit pentru adăugarea „stilurilor de bază”:



Structura fișierului de proiect





Acum, navigați la fișierul „index.html” și aruncați o privire la codul HTML al acestuia:

< html >
< cap >
< legătură href = „/dist/output.css” rel = 'foaia de stil' >
< / cap >
< corp >
< h2 clasă = „subliniați fontul centrului textului-text aldine-roz-600” > Bun venit la Linuxhint! < / h2 >< br >
< h3 clasă = „font-centr-text-text aldine–orange-600” > Tutorial: Adăugarea stilurilor de bază în Tailwind. < / h3 >< br >
< / corp >

În liniile de cod de mai sus:



  • Secțiunea „cap” folosește „ „etichetă pentru a lega fișierul CSS creat/compilat” /dist/output.css ” cu fișierul HTML existent ” index.html ”.
  • Secțiunea „corp” definește „

    ' și '

    ” elemente care folosesc următoarele clase Tailwind, adică „ Decorare text ” pentru a sublinia textul, ” Aliniere text ” pentru a seta conținutul în „centru”, „ Grosimea fontului „în aldine și „ Culoarea textului ” pentru a aplica culoarea specificată, respectiv.

  • Ieșire
    Ieșirea codului de mai sus este afișată aici:

    Acum, utilizați metoda discutată pentru a personaliza codul HTML de mai sus adăugând stilurile de bază. Să începem cu metoda „CSS” Tailwind.

    Metoda 1: Folosiți CSS pentru a adăuga „stiluri de bază” în Tailwind

    Cea mai simplă și mai ușoară metodă de a adăuga stil de bază la elementul HTML specific este să le adăugați în fișierul CSS principal al proiectului. Să îndeplinim această sarcină practic, urmând pașii dați.

    Pasul 1: Deschideți fișierul CSS
    Mai întâi, deschideți fișierul CSS principal, adică „ stil.css ” care conține „baza”, „componentele” și straturile „utilități” încorporate:

    Pasul 2: Adăugați CSS
    Apoi, adăugați stilul „de bază” pentru elementele HTML specifice „

    ” și ​​„

    ” prin aplicarea claselor folosind „ @aplica „directiva” în stratul „de bază” cu ajutorul „ @strat ” cuvânt cheie. Cuvintele cheie „@layer” adaugă clasele definite pe stratul „de bază” specificat:

    @baza stratului {
    h2 {
    @aplica text-3xl;
    }
    h3 {
    @aplica text-xl;
    }
    }

    În liniile de cod de mai sus, „ Marimea fontului ” se aplică elementelor „

    ” și ​​„

    ” pentru a le mări până la dimensiunea specificată, respectiv:

    Salvați (Ctrl + S) fișierul.

    Pasul 3: Ieșire
    Acum, rulați codul în serverul live și vedeți rezultatul, după cum urmează:

    Aici, rezultatul arată că clasa „Font Size” Tailwind este aplicată cu succes elementului specificat în stratul de bază.

    Notă : Aceeași abordare este folosită pentru toate celelalte clase CSS Tailwind.

    Metoda 2: Utilizați pluginul pentru a adăuga „stiluri de bază” în Tailwind

    O altă metodă utilă de a adăuga stiluri „de bază” este să scrieți un „ conecteaza ” și folosiți „ addBase() ”funcție. Această funcție vă ajută să înregistrați noi clase în „ baza ” directiva de nivel. Această funcție este utilizată în fișierul Tailwind „tailwind.config.js”. Să o facem practic.

    Pasul 1: Definiți funcția „addBase()”.
    Mai întâi, navigați la „ tailwind.config.js ” și adăugați stilurile de bază din plugin și apelați funcția „addBase()”:

    Salvați fișierul.

    Pasul 2: Ieșire
    În cele din urmă, rulați codul HTML dat și vedeți rezultatul:

    După cum s-a văzut, clasa „Font Size” Tailwind definită în funcția „addBase()” ca obiect JavaScript este aplicată elementelor HTML specificate.

    Concluzie

    Stilurile de bază Tailwind pot fi adăugate cu ușurință folosind „ CSS ” clasele din fișierul CSS principal și ” Conecteaza ' cu ' addBase() ” din fișierul de configurare. Metoda „CSS” este considerată cea mai simplă metodă, deoarece definește doar stilurile de bază în stratul „de bază” și le implementează automat pe elementul specificat. Pe de altă parte, secțiunea „plugin” a secțiunii „ tailwind.config.js ” necesită funcția „addBase()” pentru a defini stilurile de bază ca obiecte JavaScript. Această postare a ilustrat toate aspectele posibile pentru a adăuga stiluri de bază în Tailwind CSS.