FrenchEnglishChinese (Simplified)Spanish

notre livre
Développement

Intégrer TailwindCSS à une application Vue

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
Intégrer TailwindCSS à une application Vue 7

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.

Intégrer TailwindCSS à une application Vue 8
Intégrer TailwindCSS à une application Vue 9

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

Intégrer TailwindCSS à une application Vue 10

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

import ‘./index.css’
Intégrer TailwindCSS à une application Vue 11

Si vous rafraichissez ou relancez la commande :

yarn serve
Intégrer TailwindCSS à une application Vue 12

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 :

Intégrer TailwindCSS à une application Vue 13

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

Intégrer TailwindCSS à une application Vue 14

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

Intégrer TailwindCSS à une application Vue 15

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

FrenchEnglishChinese (Simplified)Spanish

ACHETER LE LIVRE
Cart Overview