Dette indlæg illustrerer alle de mulige aspekter for at tilføje 'basisstile' i Tailwind CSS.
Hvordan tilføjer man 'base' stilarter i medvind?
'Tailwind CSS' kommer med følgende tre metoder til at tilføje 'base'-stilene i hele HTML-indholdet eller i et specifikt element:
- Brug 'CSS' til at tilføje basisstile i Tailwind.
- Brug 'Plugin' til at tilføje basisstile i Tailwind.
Lad os udforske dem én efter én.
Forudsætninger
Før du går videre til den praktiske implementering, skal du først tage et kig på det nyoprettede projekt med navnet 'Linuxhint', der bruges til at tilføje 'basisstilene':
Projektfilstruktur
Naviger nu til filen 'index.html' og kig på dens HTML-kode:
< html >< hoved >
< link href = '/dist/output.css' rel = 'stylesheet' >
< / hoved >
< legeme >
< h2 klasse = 'understreget tekst-center font-fed tekst-pink-600' > Velkommen til Linuxhint! < / h2 >< br >
< h3 klasse = 'text-center font-fed text–orange-600' > Selvstudium: Tilføjelse af basisstile i Tailwind. < / h3 >< br >
< / legeme >
I ovenstående kodelinjer:
Produktion
Outputtet af ovenstående kode vises her:
Brug nu den diskuterede metode til at tilpasse ovenstående HTML-kode ved at tilføje basisstilene. Lad os starte med Tailwind 'CSS' metoden.
Metode 1: Brug CSS til at tilføje 'base styles' i Tailwind
Den enkleste og nemmeste metode til at tilføje basisstil til det specifikke HTML-element er at tilføje dem i projektets hoved-CSS-fil. Lad os udføre denne opgave praktisk ved at følge de givne trin.
Trin 1: Åbn CSS-filen
Først skal du åbne hoved-CSS-filen, dvs. style.css ', der indeholder de indbyggede 'base', 'components' og 'utilities'-lag:
Trin 2: Tilføj CSS
Tilføj derefter 'base'-stilen for de specifikke '
' og '' HTML-elementer ved at anvende klasserne ved at bruge ' @ansøge '-direktivet i 'base'-laget ved hjælp af ' @lag ” nøgleord. Nøgleordene '@layer' tilføjer de definerede klasser på det angivne 'base'-lag: @lags base {
h2 {
@anvend tekst-3xl;
}
h3 {
@anvend tekst-xl;
}
}
h2 {
@anvend tekst-3xl;
}
h3 {
@anvend tekst-xl;
}
}
I ovenstående kodelinjer er ' Skriftstørrelse '-klassen anvendes til henholdsvis '
'- og ''-elementerne for at forstørre dem op til den angivne størrelse:
Gem (Ctrl + S) filen.
Trin 3: Output
Kør nu koden i live-serveren og se outputtet som følger:
Her viser outputtet, at Tailwind 'Font Size'-klassen er blevet anvendt på det angivne element i basislaget.
Bemærk : Den samme tilgang bruges til alle de andre Tailwind CSS klasser.
Metode 2: Brug plugin'et til at tilføje 'base styles' i Tailwind
En anden nyttig metode til at tilføje 'base'-stile er at skrive en ' plugin ' og brug ' addBase() ' funktion. Denne funktion hjælper med at registrere nye klasser i ' grundlag ” lag direktiv. Denne funktion bruges i Tailwind 'tailwind.config.js' filen. Lad os gøre det praktisk talt.
Trin 1: Definer funktionen 'addBase()'.
Først skal du navigere til ' tailwind.config.js ” konfigurationsfil og tilføj basisstilene fra plugin’et og kald funktionen “addBase()”:
Gem filen.
Trin 2: Output
Til sidst skal du køre den givne HTML-kode og se outputtet:
Som det ses, anvendes Tailwind 'Font Size'-klassen defineret i 'addBase()'-funktionen som et JavaScript-objekt på de angivne HTML-elementer.
Konklusion
Tailwind Base Styles kan nemt tilføjes ved at bruge ' CSS '-klasser i CSS-hovedfilen og ' Plugin ' med ' addBase() ”-funktion i konfigurationsfilen. 'CSS'-metoden betragtes som den enkleste metode, da den kun definerer basisstilene i 'base'-laget og implementerer dem automatisk på det angivne element. På den anden side er 'plugin'-sektionen i ' tailwind.config.js ”-fil kræver funktionen “addBase()” for at definere basisstilene som JavaScript-objekter. Dette indlæg illustrerede alle de mulige aspekter for at tilføje basisstile i Tailwind CSS.