Comment configurer les chemins de modèle dans Tailwind CSS

' CSS vent arrière ” est un framework CSS polyvalent réputé qui stylise le contenu HTML à l'aide de classes CSS intégrées et personnalisées. Il est également utile de personnaliser le modèle spécifié selon les besoins de l'utilisateur. L'ensemble du processus nécessite la configuration des modèles où l'utilisateur va utiliser le CSS Tailwind. Le CSS Tailwind ne peut pas être appliqué si l'utilisateur ne configure pas le chemin du modèle. Ainsi, la configuration des chemins de modèle est un prérequis et obligatoire.

Cet article montre la procédure de configuration des chemins de modèle dans Tailwind CSS.

Comment configurer les chemins de modèle dans Tailwind CSS ?

Le ' tailwind.config.js ” fichier de configuration est utilisé pour configurer les chemins de modèle dans lesquels l'utilisateur souhaite intégrer le CSS Tailwind. Il n'est pas présent par défaut mais il peut être créé dans le projet à l'aide du gestionnaire de packages 'npm'.

Cette section effectue quelques étapes essentielles pour configurer les chemins des modèles dans le fichier 'tailwind.config.js'.

Note : Pour implémenter 'Tailwind CSS', installez d'abord le ' Node.js ' application dans votre système via le lien fourni ' https://nodejs.org/en ” pour exécuter les commandes.

Étape 1 : Installez 'TailwindCSS'
Tout d'abord, créez un nouveau projet nommé 'Project1' et ouvrez-le dans l'éditeur de code. Maintenant, ouvrez le nouveau terminal et installez le 'Tailwind CSS' à l'aide de la commande suivante :

npm install -D tailwindcss

Dans la commande ci-dessus, ' npm ” est le gestionnaire de packages de nœud qui installe “TailwindCSS”, comme suit :

Ici, la sortie montre que le 'Tailwind CSS' et ses packages ont été téléchargés avec succès.

Étape 2 : Créer le fichier de configuration Tailwind
Ensuite, créez le fichier de configuration CSS Tailwind ' tailwind.config.js ' pour étendre ses fonctionnalités telles que la spécification des chemins de modèle HTML, des classes définies par l'utilisateur et bien d'autres à l'aide de cette commande :

npx tailwindcss init

La sortie indique que le fichier de configuration spécifié a été créé. Maintenant, regardez le ' tailwind.config.js ' déposer:

Étape 3 : Ajouter les directives Tailwind au fichier CSS principal
Maintenant, pour ajouter des fonctionnalités spéciales au projet Tailwind créé, ajoutez les trois directives tailwind préexistantes suivantes dans le principal ' style.css ' déposer:

@base de vent arrière ;
@composants tailwind ;
utilitaires @tailwind ;

Dans le bloc de code ci-dessus :

base : Il s'agit de la première couche de 'Tailwind CSS' qui modifie le style de la page Web par défaut, comme la couleur d'arrière-plan, la couleur du texte ou la famille de polices.
Composants : Cette deuxième couche est disponible à l'intérieur de la classe 'container' qui ajoute la largeur en fonction de la taille du navigateur. Dans sa section, l'utilisateur peut ajouter ses propres composants externes créés.
utilitaires : C'est la troisième couche qui additionne presque toutes les classes de style telles que les ombres, les couleurs, l'ajout, le flex et bien d'autres classes.

Ces directives sont visibles dans la fenêtre suivante :

Étape 4 : Construire le CSS
Maintenant, créez le CSS à l'aide de l'outil Tailwind CLI en exécutant la commande suivante. Il analysera tous les fichiers de modèle et créera le CSS dans le ' dist/sortie.css ' déposer:

npx tailwindcss -i . / style .css -o . / distance / sortie.css --watch

On peut observer que la commande ci-dessus est exécutée avec succès. Maintenant, la structure de fichier du 'project1' ressemble à ceci :

Étape 5 : créer un modèle HTML et configurer son chemin
Créez le modèle HTML dans lequel l'utilisateur souhaite intégrer le 'Tailwind CSS' puis configurez son chemin dans le ' tailwind.config.js ”. Examinons d'abord le modèle HTML suivant ' index.html ” :

< diriger >
< lien href = '/dist/sortie.css' rel = 'feuille de style' >
< / diriger >
< corps >
< h2 classe = 'text-center font-bold text-white bg-orange-500' >Bienvenue sur Linuxhint !< / h2 >< Br >
< h3 classe = 'text-center font-bold text-blue-600 bg-pink-400' >Premier tutoriel : Tailwind CSS Framework.< / h3 >< Br >
< p classe = 'text-center texte-vert-500' >Tailwind CSS est un framework CSS bien connu qui aide à définir les classes CSS prédéfinies pour style vos éléments HTML.< / p >
< / corps >

Dans les lignes de code ci-dessus :

La section 'head' utilise le ' ” tag pour lier le fichier CSS créé/compilé “ /dist/sortie.css ' avec le fichier HTML existant ' index.html ”.
La section 'body' spécifie d'abord le '
” tag qui définit le premier sous-titre en utilisant la classe Tailwind “ Alignement du texte ' pour ajuster son alignement au 'centre', ' Poids de la police » pour « mettre en gras » le texte, « Couleur du texte ' pour ajouter la couleur spécifiée, et le ' Couleur de l'arrière plan ” pour appliquer la couleur d'arrière-plan donnée, respectivement.
Ensuite, le '
' et le '
Les balises utilisent également les classes Tailwind décrites ci-dessus pour styliser leur contenu.

Configurer le chemin du modèle HTML
Ensuite, ouvrez le ' tailwind.config.js ' et ajoutez les liens ou le chemin dans la section 'contenu' du fichier de modèle HTML, c'est-à-dire 'index.html':

contenu : [ './index.html' ]

Presse ' Ctrl+S ” pour enregistrer les nouvelles modifications.

Étape 6 : Exécutez le code HTML
Enfin, exécutez le code HTML « index.html » dans le serveur en direct et voyez sa sortie :

Sortir

Comme on le voit, la sortie affiche le contenu HTML stylisé à l'aide de Tailwind CSS.

Conclusion

Tailwind CSS utilise le ' tailwind.config.js ” fichier de configuration pour configurer les chemins des modèles HTML créés. Il précise le « contenu ” qui inclut le chemin exact de tous les modèles HTML, les fichiers source contenant les noms de classe Tailwind et les composants JavaScript. Il analyse le fichier HTML spécifié, puis implémente Tailwind CSS dans son contenu. Cet article illustre la procédure complète de configuration des chemins de modèle dans Tailwind CSS.

Comment configurer les chemins de modèle dans Tailwind CSS