Bazinių stilių pridėjimas „Tailwind“.

Šis įrašas iliustruoja visus galimus aspektus, kaip pridėti „pagrindinius stilius“ „Tailwind CSS“.

Kaip pridėti „bazinius“ stilius „Tailwind“?

„Tailwind CSS“ pateikiama su šiais trimis būdais, kaip pridėti „bazinius“ stilius visame HTML turinyje arba konkrečiame elemente:

• Naudokite „CSS“, kad pridėtumėte pagrindinius stilius „Tailwind“.
• Naudokite „Papildinį“, kad pridėtumėte pagrindinius stilius „Tailwind“.

Išnagrinėkime juos po vieną.

Būtinos sąlygos
Prieš pereidami prie praktinio įgyvendinimo, pirmiausia pažiūrėkite į naujai sukurtą projektą pavadinimu „Linuxhint“, kuris naudojamas „baziniams stiliams“ pridėti:

Projekto failo struktūra

Dabar eikite į failą „index.html“ ir pažiūrėkite į jo HTML kodą:

Aukščiau pateiktose kodo eilutėse:

Išvestis
Aukščiau pateikto kodo išvestis rodoma čia:

Dabar naudokite aptartą metodą, kad pritaikytumėte aukščiau pateiktą HTML kodą, pridėdami bazinius stilius. Pradėkime nuo Tailwind „CSS“ metodo.

1 būdas: naudokite CSS, kad pridėtumėte „bazinius stilius“ „Tailwind“.

Paprasčiausias ir lengviausias būdas pridėti pagrindinį stilių prie konkretaus HTML elemento yra įtraukti juos į pagrindinį projekto CSS failą. Atlikime šią užduotį praktiškai, atlikdami nurodytus veiksmus.

1 veiksmas: atidarykite CSS failą
Pirmiausia atidarykite pagrindinį CSS failą, t. y. stilius.css “, kuriame yra integruotas galinio vėjo „bazė“, „komponentai“ ir „paslaugų“ sluoksniai:

2 veiksmas: pridėkite CSS
Tada pridėkite „bazinį“ stilių konkretiems „

“ ir „

“ HTML elementams taikydami klases naudodami „ @taikyti “ direktyvą „baziniame“ sluoksnyje, naudodami „ @sluoksnis “ raktažodis. „@layer“ raktiniai žodžiai prideda apibrėžtas klases nurodytame „baziniame“ sluoksnyje:

@sluoksnio pagrindas {
h2 {
@taikyti tekstą-3xl;
}
h3 {
@taikyti tekstą-xl;
}
}

Aukščiau pateiktose kodo eilutėse „ Šrifto dydis “ klasė taikoma „

“ ir „

“ elementams, kad jie būtų atitinkamai padidinti iki nurodyto dydžio:

Išsaugokite (Ctrl + S) failą.

3 veiksmas: išvestis
Dabar paleiskite kodą tiesioginiame serveryje ir pamatykite išvestį taip:

Čia išvestis rodo, kad „Tailwind“ „Font Size“ klasė sėkmingai pritaikyta nurodytam elementui pagrindiniame sluoksnyje.

Pastaba : Tas pats metodas taikomas visoms kitoms „Tailwind“ CSS klasėms.

2 būdas: naudokite papildinį, kad pridėtumėte „pagrindinius stilius“ „Tailwind“.

Kitas naudingas būdas pridėti „bazinius“ stilius yra parašyti „ Prijunkite “ ir naudokite „ addBase() ' funkcija. Ši funkcija padeda registruoti naujas klases „ bazė “ sluoksnio direktyva. Ši funkcija naudojama „Tailwind“ faile „tailwind.config.js“. Padarykime tai praktiškai.

1 veiksmas: apibrėžkite funkciją „addBase()“.
Pirmiausia eikite į „ tailwind.config.js “ konfigūracijos failą ir pridėkite bazinius stilius iš papildinio ir iškvieskite funkciją „addBase()“:

Išsaugokite failą.

2 veiksmas: išvestis
Galiausiai paleiskite nurodytą HTML kodą ir pamatykite išvestį:

Kaip matyti, „Tailwind“ „Font Size“ klasė, apibrėžta funkcijoje „addBase()“ kaip „JavaScript“ objektas, taikoma nurodytiems HTML elementams.

Išvada

Tailwind Base Styles galima lengvai pridėti naudojant ' CSS “ klases pagrindiniame CSS faile ir „ Prijungti ' su ' addBase() “ funkciją konfigūracijos faile. „CSS“ metodas laikomas paprasčiausiu metodu, nes jis apibrėžia tik pagrindinius stilius „baziniame“ sluoksnyje ir automatiškai juos įgyvendina nurodytame elemente. Kita vertus, skiltis „įskiepiai“ tailwind.config.js “ faile reikalinga funkcija „addBase()“, kad pagrindiniai stiliai būtų apibrėžti kaip „JavaScript“ objektai. Šis įrašas iliustravo visus galimus aspektus, kaip pridėti bazinius stilius „Tailwind CSS“.