Cet article illustrera la méthode de style des titres en ajoutant le style de base dans Tailwind.
Comment styliser les titres à l'aide du style de base Tailwind ?
Pour styliser les titres dans Tailwind, consultez les étapes fournies :
- Ouvrez le fichier CSS du projet.
- Dans le fichier CSS, ajoutez le style de base aux titres en utilisant le ' @couche » directive en vertu de la « @base de vent arrière ; ” directive.
- Créez un programme HTML et utilisez-y des éléments d'en-tête.
- Exécutez le programme HTML et vérifiez la sortie.
Étape 1 : Ajouter un style de base aux en-têtes dans le fichier CSS
Tout d'abord, ouvrez le ' style.css ' et ajoutez le style de base aux titres qu'il contient en utilisant le ' @couche ” directive. Par exemple, nous avons ajouté le style de base aux titres suivants :
@tailwind base ;
@couche base {
h1 {
@appliquer texte-6xl ;
}
h2 {
@appliquer texte-5xl ;
}
h3 {
@appliquer texte-4xl ;
}
h4 {
@appliquer texte-3xl ;
}
h5 {
@appliquer texte-2xl ;
}
}
@tailwind Composants ;
@tailwind utilitaires ;
Ici:
- ' @couche de base { … } ” définit un nouveau calque de base et contient les styles des composants d'en-tête.
- ' h1 { @apply text-6xl; } ' applique le ' texte-6xl ' classe utilitaire à la ' h1 ' éléments.
- De la même manière, ' h2 ”, “ h3 ”, “ h4 ', et ' h5 ' les éléments ont leurs tailles de police définies à l'aide de ' @appliquer ” et les classes d'utilitaires respectives (text-5xl, text-4xl, text-3xl et text-2xl).
Étape 2 : créer une page Web HTML à l'aide d'en-têtes
Ensuite, créez le programme HTML et utilisez les éléments d'en-tête qu'il contient. Ici, nous avons utilisé les éléments de titre suivants :
< corps >
< div classe = 'h-écran justifier-centrer texte-centrer bg-violet-400' >
< h1 > Rubrique 1 < / h1 >
< h2 > Rubrique 2 < / h2 >
< h3 > Rubrique 3 < / h3 >
< h4 > Rubrique 4 < / h4 >
< h5 > Rubrique 5 < / h5 >
< / div >
< / corps >
Étape 3 : Exécuter le programme HTML
Enfin, exécutez le programme HTML et affichez la page Web pour vérification :
La sortie ci-dessus a affiché les titres tels qu'ils étaient des styles dans le fichier CSS.
Conclusion
Pour styliser les en-têtes dans Tailwind, ouvrez le fichier CSS et ajoutez le style de base aux en-têtes à l'aide de la touche ' @couche » directive en vertu de la « @base de vent arrière ; ” directive. Ensuite, créez un programme HTML et utilisez-y des éléments d'en-tête. Enfin, affichez la page Web HTML pour vérifier la sortie. Cet article a expliqué la méthode pour styliser les titres en ajoutant le style de base dans Tailwind.