Ez az írás bemutatja a stíluscímsorok módszerét az alapstílus hozzáadásával a Tailwindben.
Hogyan lehet a címsorokat stílusozni a Base Style Tailwind használatával?
A Tailwind címsorainak stílusozásához kövesse a megadott lépéseket:
- Nyissa meg a projekt CSS-fájlját.
- A CSS-fájlban adja hozzá az alapstílust a címsorokhoz a „ @réteg ' irányelv a ' @tailwind base; ” direktíva.
- Készíts egy HTML programot, és használj benne címsorelemeket.
- Futtassa a HTML programot, és ellenőrizze a kimenetet.
1. lépés: Adja hozzá az alapstílust a CSS-fájl címsoraihoz
Először nyissa meg a „ stílus.css ' fájlt, és adja hozzá az alapstílust a címsorokhoz a ' @réteg ” direktíva. Például a következő címsorokhoz hozzáadtuk az alapstílust:
@hátszél bázis ;
@réteg bázis {
h1 {
@alkalmaz szöveg-6xl ;
}
h2 {
@alkalmaz szöveg-5xl ;
}
h3 {
@alkalmaz szöveg-4xl ;
}
h4 {
@alkalmaz szöveg-3xl ;
}
h5 {
@alkalmaz szöveg-2xl ;
}
}
@hátszél alkatrészek ;
@hátszél segédprogramok ;
Itt:
- ' @réteg alap { … } ” egy új alapréteget határoz meg, és tartalmazza a címsor-összetevők stílusait.
- ' h1 { @szöveg alkalmazása-6xl; } ' alkalmazza a ' szöveg-6xl ' használati osztály a ' h1 ” elemeket.
- Hasonlóképpen: „ h2 ”, „ h3 ”, „ h4 ”, és „ h5 ' elemek betűmérete a ' @alkalmaz ” és a megfelelő használati osztályok (text-5xl, text-4xl, text-3xl és text-2xl).
2. lépés: Hozzon létre HTML weboldalt címsorok használatával
Ezután készítse el a HTML programot, és használja a benne található címsorelemeket. Itt a következő címsorelemeket használtuk:
< test >
< div osztály = 'h-screen justify-center text-center bg-violet-400' >
< h1 > 1. címsor < / h1 >
< h2 > 2. címsor < / h2 >
< h3 > 3. címsor < / h3 >
< h4 > 4. címsor < / h4 >
< h5 > 5. címsor < / h5 >
< / div >
< / test >
3. lépés: Futtassa a HTML programot
Végül futtassa a HTML programot, és ellenőrizze a weboldalt:
A fenti kimenet úgy jeleníti meg a fejléceket, ahogyan azok a CSS-fájl stílusai voltak.
Következtetés
A Tailwind címsorainak stílusozásához nyissa meg a CSS-fájlt, és adja hozzá az alapstílust a címsorokhoz a „ @réteg ' irányelv a ' @tailwind base; ” direktíva. Ezután készítsen egy HTML programot, és használjon benne címsorelemeket. Végül tekintse meg a HTML weboldalt a kimenet ellenőrzéséhez. Ez az írás elmagyarázta a stíluscímsorok módszerét az alapstílus hozzáadásával a Tailwindben.