Nous allons parler dans ce tuto d’un framework CSS à la mode en ce moment : Tailwind CSS, et vous présenter comment l’installer.
Sommaire :
Si le Tailwind CSS a été adopté par un grand nombre de développeurs, ce n’est pas pour rien. En effet, ce framework possède beaucoup moins de contraintes que ses concurrents Bootstrap, Materialize ou Foundation. Le plus gros exemple sont les couleurs : Tailwind possède des classes pour chacune de ces couleurs, ce que n’a pas Bootstrap. Il possède également des outils de mise en page pour gérer les différents types d’espacements que ne possède pas Materialize.
De plus, il y a moins d’objets prédéfinis sur Tailwind. Ce point peut-être vu négativement par des intégrateurs juniors. En effet, la création d’un élément demande plus d’effort. À l’inverse, il est bien vu par des intégrateurs séniors, car les fichiers CSS sont plus légers et la mise en page plus libre.
C’est pour ces raisons que Tailwind navigue aussi bien sur les flots du développement en ce moment. Mais comment l’installer ?
Il existe deux méthodes pour installer Tailwind CSS.
La première consiste à télécharger les fichiers ou utiliser un cdn. Cette méthode est certes rapide, mais n’est que peu recommandé, car vous chargez l’intégralité du framework (ce qui le rend plus lourd), sans pouvoir le personnaliser. Dans ce cas, vous vous limitez vous-même.
Voyons plutôt la bonne pratique.
Nous allons utiliser NPM. Veillez à bien l’installer sur votre machine.
Depuis le terminal, vous devez vous rendre à la racine de votre projet et exécuter une commande npm :
npm install tailwindcss
Maintenant, créez un fichier CSS. Il n’est pas à inclure dans le HTML. À l’intérieur de celui-ci nous insérer du code de base pour appeler Tailwind :
@tailwind base;
@tailwind components;
@tailwind utilities;
Enfin, nous allons créer un fichier tailwind.config.js. Ce fichier permettra de configurer Tailwind pour votre projet.
À présent, nous allons compiler le code pour rendre Tailwind utilisable. Pour ce faire, deux méthodes.
Toujours depuis la racine de votre projet, exécutez la commande suivante depuis le terminal :
npx tailwindcss build <source.css> -o <output.css>
Le fichier source.css est celui que nous avons créé plus haut. Le fichier ouput.css est le nom que vous souhaitez donner au fichier CSS généré par la compilation, qui, lui, sera à insérer dans le HTML. Notez que ces deux fichiers peuvent porter le nom que vous souhaitez.
Enfin, insérez le fichier CSS dans le HTML.
<link rel="stylesheet" href="<output.css>">Des bundler sont des créateurs de bundle qui compilent le CSS et le JS. Pour les connus, nous avons Webpack et Gulp.
Chaque bundler sa solution. Pour savoir comment les utiliser, vous pouvez vous référer à la documentation officielle.
Maintenant que tout est installé, vous pouvez personnaliser Tailwind CSS depuis le fichier tailwind.config.js.
Les options de personnalisation sont importantes. Vous pouvez modifier les couleurs, les espacements, la typographie et même rajouter des extensions ! Pour en savoir plus, veuillez vous référer à la documentation officielle.
Félicitation, vous avez installé Tailwind CSS ! Vous pouvez à présent l’utiliser en toute liberté.
Cependant, si l’installation ou l’utilisation de ce framework vous donne du fil à retordre, vous pouvez dès à présent déposer une annonce gratuitement sur Codeur.com pour vous faire accompagner par un développeur web freelance qui connaît l’outil.