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

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

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

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

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 :

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.

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 :

Structure de votre projet

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

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.

Ajouter les commandes de compilation

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

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

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

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 :

Articles Similaires

Comment sauvegarder vos sites, serveurs… sans exploser la facture énergétique

OhMyForm – Vos sondages sans GAFAM, écoconçus et installables localement

Scrcpy – Sauvez les données d’un smartphone à l’écran brisé… et recyclez-le

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,
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é 🙂.
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... :(
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.
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.
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.
Ajouter un commentaire