TailwindCSS est un framework CSS particulièrement apprécié en ce moment et il faut dire qu’il se démarque nettement de ses concurrents. Il est très facilement customisable et utilisable, les thèmes proposés par défaut sont modernes et particulièrement esthétiques et enfin, il propose un poids à la compilation extrêmement léger en supprimant toutes les règles CSS que votre application n’utilise pas.

Chez 10h11, nous apprécions le framework Vue et nous avons donc naturellement cherché à intégrer TailwindCSS à notre bibliothèque.

Quelques pré-requis avant de commencer

Avant toute chose, il vous faudra :

1 • Installer Vue :

npm install -g @vue/cli

2 • Installer Tailwind et ses dépendances :

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

⚠️ WARNING ⚠️
Attention de ne pas installer tailwind et ses dépendances avec

npm install postcss@latest

Postcss 8 étant particulièrement récent, vous aurez une erreur “PostCSS plugin tailwindcss requires PostCSS 8” si vous l’installez avec @latest.

Création d’une application Vue

Maintenant que les bases sont posées, nous pouvons créer une nouvelle application vue à partir du terminal avec la commande :

vue create demo-tailwind

Vous pouvez vérifier que tout fonctionne avec la commande :

yarn serve

L’étape suivante est de générer les fichiers de configuration associés à TailwindCSS :

npx tailwind init -p

Cela va créer un fichier tailwind.config.js et un fichier postcss.config.js à la racine de votre application.

Vous pouvez modifier la valeur de purge dans le fichier tailwind.config.js afin d’éviter des rafraîchissements inutiles lors de la modification de certains fichiers.

Nous avons maintenant besoin d’un fichier ./src/index.css afin d’importer Tailwind dans le css de notre application Vue…

… et de l’importer dans notre application Vue directement dans le fichier ./src/main.js en rajoutant la ligne :

import ‘./index.css’

Si vous rafraichissez ou relancez la commande :

yarn serve

Cela paraît « cassé » mais cela montre que Tailwind a bien été intégré et que cela a écrasé les règles CSS par défaut de notre application Vue.

Maintenant, il nous reste à vérifier que cela réagit bien et que l’on peut exploiter tout le potentiel de TailwindCSS !
Vous pouvez par exemple modifier le fichier ./tailwind.config.js :

Cela va générer notamment une classe “text-my-color” que vous pouvez utiliser dans votre code HTML. Par exemple :

Il ne vous reste plus qu’à visualiser si cela fonctionne !

Magnifique !

À vous de jouer pour déployer de superbes applications Vue avec TailwindCSS !

---

Bibliographie :
https://cli.vuejs.org/guide/installation.html
https://tailwindcss.com/
https://tailwindcss.com/docs/guides/vue-3-vite