Cet article illustre tous les aspects possibles pour ajouter des 'styles de base' dans Tailwind CSS.
Comment ajouter des styles 'de base' dans Tailwind ?
'Tailwind CSS' est livré avec les trois méthodes suivantes pour ajouter les styles 'de base' dans l'ensemble du contenu HTML ou dans un élément spécifique :
- Utilisez 'CSS' pour ajouter des styles de base dans Tailwind.
- Utilisez 'Plugin' pour ajouter des styles de base dans Tailwind.
Explorons-les un par un.
Conditions préalables
Avant de passer à l'implémentation pratique, jetez d'abord un coup d'œil au projet nouvellement créé nommé 'Linuxhint' qui est utilisé pour ajouter les 'styles de base':
Structure du fichier de projet
Maintenant, naviguez jusqu'au fichier 'index.html' et regardez son code HTML :
< html >< diriger >
< lien href = '/dist/sortie.css' rel = 'feuille de style' >
< / diriger >
< corps >
< h2 classe = 'texte souligné-centre police-texte gras-rose-600' > Bienvenue sur Linuxhint ! < / h2 >< Br >
< h3 classe = 'text-center font-bold text–orange-600' > Tutoriel : Ajout de styles de base dans Tailwind. < / h3 >< Br >
< / corps >
Dans les lignes de code ci-dessus :
Sortir
La sortie du code ci-dessus est affichée ici :
Maintenant, utilisez la méthode décrite pour personnaliser le code HTML ci-dessus en ajoutant les styles de base. Commençons par la méthode Tailwind 'CSS'.
Méthode 1 : Utiliser CSS pour ajouter des 'styles de base' dans Tailwind
La méthode la plus simple et la plus simple pour ajouter un style de base à l'élément HTML spécifique consiste à les ajouter dans le fichier CSS principal du projet. Effectuons cette tâche pratiquement en suivant les étapes indiquées.
Étape 1 : Ouvrez le fichier CSS
Tout d'abord, ouvrez le fichier CSS principal, c'est-à-dire ' style.css » qui contient les couches intégrées « base », « composants » et « utilitaires » :
Étape 2 : Ajouter le CSS
Ensuite, ajoutez le style 'base' pour les éléments HTML spécifiques '
' et '' en appliquant les classes à l'aide du ' @appliquer ' dans la couche 'base' à l'aide de la ' @couche ' mot-clé. Les mots-clés « @layer » ajoutent les classes définies sur la couche « de base » spécifiée : @base de couche {
h2 {
@apply text-3xl ;
}
h3 {
@apply texte-xl ;
}
}
h2 {
@apply text-3xl ;
}
h3 {
@apply texte-xl ;
}
}
Dans les lignes de code ci-dessus, le ' Taille de police » est appliquée aux éléments «
» et « » pour les agrandir jusqu'à la taille spécifiée, respectivement :
Enregistrez (Ctrl + S) le fichier.
Étape 3 : sortie
Maintenant, exécutez le code dans le serveur live et voyez le résultat, comme suit :
Ici, la sortie montre que la classe Tailwind 'Font Size' est appliquée avec succès à l'élément spécifié dans la couche de base.
Note : La même approche est utilisée pour toutes les autres classes CSS Tailwind.
Méthode 2 : Utiliser le plugin pour ajouter des 'styles de base' dans Tailwind
Une autre méthode utile pour ajouter des styles 'de base' consiste à écrire un ' brancher ' et utilisez le ' addBase() ' fonction. Cette fonction permet d'enregistrer de nouvelles classes dans le ' base ” directive de couche. Cette fonction est utilisée dans le fichier 'tailwind.config.js' de Tailwind. Faisons-le pratiquement.
Étape 1 : Définir la fonction 'addBase()'
Tout d'abord, accédez au ' tailwind.config.js ” fichier de configuration et ajoutez les styles de base du plugin et appelez la fonction “addBase()” :
Enregistrez le fichier.
Étape 2 : sortie
Enfin, exécutez le code HTML donné et voyez le résultat :
Comme on le voit, la classe Tailwind 'Font Size' définie dans la fonction 'addBase()' en tant qu'objet JavaScript est appliquée aux éléments HTML spécifiés.
Conclusion
Les styles de base Tailwind peuvent être ajoutés facilement en utilisant le ' CSS ' classes dans le fichier CSS principal et le ' Brancher ' avec le ' addBase() ” fonction dans le fichier de configuration. La méthode 'CSS' est considérée comme la méthode la plus simple car elle ne définit que les styles de base dans le calque 'base' et les implémente automatiquement sur l'élément spécifié. D'autre part, la section 'plugin' du ' tailwind.config.js ” nécessite la fonction “addBase()” pour définir les styles de base en tant qu'objets JavaScript. Cet article a illustré tous les aspects possibles pour ajouter des styles de base dans Tailwind CSS.