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 :

6 commentaires

nos 3 août 2021 - 17 h 41 min

Bonjour,

Merci pour cet article très bien documenté;
je n’ai pas trouvé les éléments à copier collé en fin d’article 🙁
j’ai tout suivi mais j’ai une erreur : npm ERR! missing script: build
avez vous une piste ?
merci pour ce site que je viens de découvrire
Amicalement,

Répondre
Jérémy PASTOURET 3 août 2021 - 22 h 06 min

Bonjour,
Merci pour votre commentaire.
Pour récupérer les éléments à copier-coller, il suffit de remplir le formulaire en fin d’article.
Concernant votre erreur, je pense qu’il y a un soucis dans le fichier package.json.
Je vous invite donc à récupérer mon code en remplissant le formulaire puis de comparer mon fichier package.json avec le votre.
Tenez-moi au courant si vous êtes toujours bloqué 🙂.

Répondre
Nox 4 août 2021 - 14 h 53 min

Bonjour,

effectivement il y avait une erreur bizarre j’ai tout suivi pourtant..
j’ai juste un : [deprecation] Running tailwindcss without -i, please provide an input file. mais ça fonctionne parfaitement 🙂 .
J’avais deja utilisé il y longtemps tailwindcss avec hugo et nanocss ça fonctionnait super bien.
hugo et/ou cécil mériteraient un articles ici ^^
j’aime bien votre site et les explications super claires. en revanche le nombre d’article sous l’article principal est un scroll’torture… 🙁

Répondre
Jérémy PASTOURET 4 août 2021 - 15 h 08 min

Bonjour,
Je suis content que le problème soit résolu.
Je connais bien Hugo, j’ai fait des slides avec reveal.js pour un cours. Par contre, je n’ai jamais entendu parlé de Cécil.
Merci pour le compliment concernant le site. Pouvez-vous m’en dire plus concernant le scroll’torture 🤯 ?
Nous sommes entrain de redévelopper le site en NextJS & Tailwind CSS. Et l’avis de nos lecteurs est très important pour nous.

Répondre
Nox 4 août 2021 - 16 h 03 min

Cecil c’est un peu comme hugo mais en php. j’lai utilisé une fois seulement je n’ai pas eu le temps de creuser d’avantage mais j’aime l’idée : https://cecil.app/ et https://arnaudligny.fr/blog/cecil-mon-generateur-de-site-statique/
Je précise que je n’ai aucun lien avec hugo, cecil ou arnaudligny. je l’ai juste déjà rencontré sur le serveur slack hugofr.
hugo et tailwindcss ça match bien je trouve :). as tu déjà essayé BULMA https://bulma.io/ ?

pour le scrolltorture c’est que j’ai au moins 15 articles en dessus de celui ci. si je scroll je vois mon url qui change comme si je change de page. c’est super perturbant si mon imac en 27″ ça passerai mais sur mon vieux papymcbook de 2009 c’est chaud.

Répondre
Jérémy PASTOURET 11 août 2021 - 22 h 15 min

Merci beaucoup pour les informations. Je vais me pencher sur ces technologies en vue d’un ou plusieurs articles. Si vous avez d’autres suggestions, idées ou si vous avez envie de contribuer en écrivant des articles / tutos nous sommes preneurs.

Concernant le scrolltorture, il inclut dans un template pour lequel il difficile de mettre à jour le système. Avec notre nouveau site, nous aurons le contrôle sur tous les composants.

Répondre

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.