Accueil Technologies Tailwind CSS – Partie 2 – Mise en place de NodeJS et optimisation
Tailwind CSS – Partie 2 – Mise en place NodeJS & optimisation

Tailwind CSS – Partie 2 – Mise en place de NodeJS et optimisation

par Jérémy PASTOURET
Publié : Mis à jour le

Dans ce nouvel article, je vais vous montrer comment mettre en place proprement Tailwind CSS. Vous trouverez votre bonheur quel que soit votre niveau : novice ou expert avec NodeJS et les frameworks frontend (VueJS, ReactJS…)

Si vous n’avez jamais entendu parler de ce framework CSS moderne, je vous invite à commencer par notre article de présentation. Dans un second temps, notre article pratique vous permettra de le tester rapidement.

Vous devez maintenant en avoir l’habitude : tout le code de cet article est sous forme d’image. Cela facilite la lecture sur vos différents supports. Vous retrouverez le code final et les instructions en fin d’article.

Initialiser un projet avec NodeJS

Initialiser NodeJS

Peu importe le langage ou le framework Web que vous utilisez, le navigateur Web lit uniquement du code HTML/CSS/Javascript. Ainsi, quel que soit votre projet, vous pouvez utiliser NodeJS pour générer du code CSS propre et léger avec Tailwind CSS. C’est le message important à retenir dans cet article.

Pour générer du code CSS propre, il faut donc initialiser NodeJS dans votre projet. Pour cela, installez au préalable NodeJS et lancez la commande ci-dessus dans votre projet ou dans votre nouveau dossier.

NodeJS va créer et pré-remplir un fichier nommé package.json. Ce fichier indique le nom, la version ainsi que les dépendances (librairies) et surtout les commandes exécutables.

Installer Tailwind CSS et les librairies complémentaires

Installation Tailwind CSS postcss-cli autoprefixer cssnano

A présent, nous allons installer : TailwindCSS, un pré-processeur, un préfixer et un minifier. Si vous ne connaissez pas ces termes, prenez connaissance de ce lexique :

  • pré-processeur 👉 analyse votre code et supprime toutes les classes CSS inutilisées. Votre site est donc plus léger, plus rapide et plus écologique.
  • prefixer 👉 analyse votre code CSS et rajoute les propriétés de compatibilité avec les navigateurs modernes (Firefox, Edge, Mozilla). Cela vous évite de gérer tous les cas vous-même.
  • minifier 👉 analyse votre code CSS et supprime les retours à la ligne ainsi que les espaces inutiles. Votre code CSS est écrit en une seule ligne et son poids est allégé.

Lancez la commande ci-dessus pour les installer.

Initialiser et paramétrer Tailwind CSS dans votre projet

Initialiser Tailwind CSS

Maintenant que Tailwind CSS est installé, il faut initialiser votre projet avec ce framework. Exécutez donc la commande ci-dessus. Normalement, Tailwind CSS crée deux fichiers. Le premier se nomme tailwind.config.js : il permet de configurer le framework, d’ajouter de nouvelles couleurs, d’activer le Dark mode

Vous trouverez ce contenu de base :

Configuration Tailwind CSS

Bien entendu, le fichier de configuration de base fonctionne. Mais pour optimiser la taille du fichier CSS généré, vous devez préciser la propriété purge. Celle-ci permet au pré-processeur de savoir quelle extension de fichier doit être analysée. Or cet examen lui permet d’identifier les classes utilisées et celles qui devront être supprimées.

Pour ce faire, il faut transformer l’attribut purge en objet, puis l’activer avant d’indiquer les répertoires/fichiers qui contiennent le code HTML. Voici un exemple avec des fichiers *.html, *.vue et *.jsx.

Modification de tailwind.config.js

Le second fichier se nomme postcss.config.js : il permet de paramétrer le pré-processeur. Nous allons lui indiquer qu’il faut prendre en charge Tailwind CSS et l’auto-prefixer. Voici donc le contenu du fichier :

Modification de postcss.config.css

Structure de votre projet

Structure de projet Tailwind CSS

Le but : retrouver à la racine de notre projet nos fichiers HTML, Vue ou autres. Le tout suivi d’un fichier index.css contenant les directives de Tailwind CSS ainsi que nos classes personnalisées.

Lorsque nous utiliserons les commandes de compilation du fichier CSS, le résultera se trouvera dans le dossier dist.

Celui-ci contient une version optimisée et une version minifiée. Je vous conseille bien entendu d’utiliser la version minifiée en production, puisqu’il s’agit du fichier le plus léger.

Contrairement à l’environnement de développement, je vous invite à utiliser la version simple. Et pour compiler encore plus vite, je vous suggère de désactiver la purge. En effet, purger à chaque modification vous fait perdre du temps et de la puissance machine.

Afin d’obtenir un projet fonctionnel, créez le dossier dist ainsi que les fichiers index.html et index.css.

Initialiser le fichier index.html et index.css

Initialiser index.css

Afin de récupérer les classes de base de Tailwind, vous devez importer les directives de Tailwind CSS. Editez donc votre fichier index.css et ajoutez-y les lignes ci-dessus.

Concernant le fichier index.html, vous pouvez prendre une structure de base et y importer le futur fichier dist/index.css. Voici un exemple ci-dessous avec quelques classes de Tailwind CSS.

Structure HTML de base avec Tailwind CSS

Ajouter les commandes de compilation

Modification de package.json

Pour éviter d’apprendre des commandes par cœur, NodeJS vous permet de créer des scripts et de les appeler par leurs noms. Pour cela, je vous invite à modifier votre fichier package.json et à y ajouter le code ci-dessus.

Explications des commandes :

  • tailwind 👉 compile votre code CSS et y ajoute les propriétés de Tailwind CSS.
  • autoprefixer 👉 analyse le fichier généré précédemment et y ajoute des propriétés de compatibilité avec les navigateurs modernes.
  • minify 👉 compresse le fichier généré précédemment en supprimant les retours à la ligne et les espaces.
  • build 👉 construit/reconstruit rapidement le fichier CSS dans un contexte de développement.
  • production 👉 permet de générer le fichier final, compressé et optimisé pour les navigateurs. Le fichier généré (dist/index.css) est à mettre en production.

Lancement et validation finale

Compilation Tailwind CSS

Il ne vous reste plus qu’à taper la commande ci-dessus pour créer le fichier dist/index.css nécessaire au développement de votre page.

Enfin, ouvrez votre page index.html et le tour est joué.

Mise en production

Mise en production Tailwind CSS

Après avoir achevé la partie développement, vous devez mettre en production. Pour cela, lancez la commande ci-dessus.

NodeJS compile et minifie votre code afin d’obtenir un fichier dist/index.min.css final. Il vous suffit ensuite d’utiliser ce fichier dans index.html.

Conclusion

Bannière conclusion

Grâce à cet article, vous savez maintenant comment initialiser et compiler Tailwind CSS dans votre projet.

❔ Pensez-vous intégrer Tailwind CSS dans vos projets (actuels ou futurs) ?

Pour éviter toute réécriture, retrouvez le projet complet ci-dessous en remplissant le formulaire.

Dans mon prochain article, je vous montrerai comment utiliser le Dark mode avec Tailwind CSS. En attendant, si ce mode d’affichage ne vous est pas familier, je vous invite à lire l’article sur ce sujet.

Je souhaite aussi remercier les deux sources qui m’ont permis d’écrire cet article :

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.