Créer des composants Vue 3 avec Tailwind CSS

Vue est un framework JavaScript populaire qui permet de créer des interfaces web polyvalentes. Parmi ses fonctionnalités les plus intéressantes figurent son intégration facile aux bases de code existantes et sa légèreté, qui permettent aux développeurs de l’adopter facilement dans leurs projets front-end.

Au cœur de Vue se trouve une approche de création d’interfaces web fondée sur des composants composables. Les composants sont des fragments de code réutilisables qui servent de briques de base à vos applications. Le modèle de composants de Vue vous permet de créer des composants autonomes regroupant logique, contenu et styles en un même endroit.

Pour styliser ces composants, vous pouvez utiliser un framework comme Tailwind CSS afin d’intégrer directement les styles au balisage et d’encapsuler encore davantage le composant. Tailwind CSS est un framework CSS qui regroupe des classes réutilisables pour styliser les éléments d’interface utilisateur (UI). Vous pouvez utiliser ces classes pour appliquer des styles aux polices, aux couleurs, aux marges intérieures et extérieures, aux animations et aux transitions. Par exemple, l’attribut text-black affiche en noir tout le texte d’un élément. Ces classes sont composables et peuvent être combinées pour mettre en œuvre n’importe quel design.

Dans ce tutoriel, vous apprendrez à créer des composants Vue 3 avec Tailwind CSS en réalisant une carte d’article adaptative. Le code complet du projet est disponible ici.

Prérequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Une version à jour de Node.js et npm installés

• Un éditeur de texte comme Visual Studio Code (VS Code)

• Une connaissance de la ligne de commande

• Une familiarité avec Vue et CSS

Créer vos propres composants Vue 3 avec Tailwind

Pour commencer, créez un nouveau projet Vue 3. Exécutez la commande suivante dans votre terminal pour installer et lancer create-vue, l’outil officiel de création de projets Vue permettant de générer des projets basés sur vite :

1npm init vue@latest

Une invite s’affiche avec une liste de fonctionnalités facultatives. Nommez le projet vue-tailwindcss et choisissez No pour toutes les autres options.

1√ Project name: ... vue-tailwindcss
2√ Add TypeScript? ... No / Yes
3√ Add JSX Support? ... No / Yes
4√ Add Vue Router for Single Page Application development? ... No / Yes
5√ Add Pinia for state management? ... No / Yes
6√ Add Vitest for Unit Testing? ... No / Yes
7√ Add an End-to-End Testing Solution? » No
8√ Add ESLint for code quality? ... No / Yes
9√ Add Prettier for code formatting? ... No / Yes

Accédez ensuite au dossier du projet à l’aide de cd vue-tailwindcss, puis exécutez npm install pour installer depuis npm les dépendances open source du projet.

Exécutez npm run dev pour lancer l’application dans un environnement de développement.

Cette commande devrait lancer l’application sur le serveur localhost :

Accédez à l’URL locale indiquée pour afficher l’application :

Il est maintenant temps de configurer Tailwind CSS dans l’application Vue.

Configurer Tailwind avec Vue

Pour commencer, exécutez la commande suivante dans le terminal :

1npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Cette commande installe Tailwind CSS et ses dépendances associées (autoprefixer et postcss) via npm.

Générez ensuite les fichiers tailwind.config.js et postcss.config.js en exécutant la commande ci-dessous. Vous utiliserez ces fichiers pour configurer et personnaliser Tailwind :

1npx tailwindcss init -p

Cette commande devrait créer le fichier tailwind.config.js à la racine du projet avec les paramètres suivants :

1   module.exports = {
2   content: [],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7 }

Vous avez également créé le fichier postcss.config.js et configuré les plugins tailwindcss et autoprefixer :

1  module.exports = {
2   plugins: {
3     tailwindcss: {},
4     autoprefixer: {},
5   },
6 }

Dans tailwind.config.js, modifiez le tableau content pour y inclure tous les chemins vers vos pages et composants. Tailwind pourra ainsi supprimer les classes CSS inutilisées du résultat final et réduire la taille du fichier. 

Votre fichier tailwind.config.js devrait maintenant ressembler à ceci :

1  module.exports = {
2   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
3   theme: {
4     extend: {},
5   },
6   plugins: [],
7  };

Créez ensuite un fichier nommé index.css dans le dossier src du projet, puis ajoutez le contenu suivant :

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

Vous avez utilisé la directive @tailwind pour inclure dans votre projet les styles de base, de composants et d’utilitaires de Tailwind. Plus tard, lors de la compilation du projet, Tailwind remplacera automatiquement ces directives par les styles que vous lui aurez indiqués.

Importez maintenant index.css dans notre fichier ./src/main.js pour commencer à l’utiliser :

1import './index.css'

Notez que vous devez supprimer la ligne qui importe le fichier assets/main.css. Cela vous empêchera d’utiliser du CSS natif.

Vous pouvez maintenant créer des composants avec Tailwind.

Créer des composants Vue

Pour apprendre à utiliser Tailwind dans les composants Vue, créez un composant carte pour un article.

Créez ensuite un fichier nommé ArticleCard.vue dans le dossier src/components. Ajoutez le code suivant :

1<template>
2  <div>
3    <div>
4      <img src="../assets/coverimage.jpg" alt="Close-up of code" />
5    </div>
6    <div>
7      <div>Vue</div>
8      <a href="#">Building Vue 3 Components With Tailwind CSS</a>
9      <p>
10        Learn how to create visually stunning Vue components using the popular
11        utility-first CSS framework Tailwind.
12      </p>
13    </div>
14  </div>
15</template>

Le code ci-dessus crée un modèle nommé ArticleCard, qui définit un composant carte composé d’une image et d’un résumé de l’article.

Pour l’afficher dans le navigateur, nettoyez la page d’accueil en supprimant tout le contenu du fichier App.vue. Importez ensuite le composant ArticleCard dans la section script de App.vue :

1<script setup>
2import ArticleCard from "./components/ArticleCard.vue";
3</script>

Utilisez-le ensuite dans le modèle :

1<template>
2  <ArticleCard />
3</template>

L’étape suivante consiste à styliser la carte à l’aide des classes utilitaires de Tailwind CSS.

Explication des classes utilitaires

Avec du CSS natif — et quelques autres frameworks CSS —, vous pouvez utiliser des classes CSS personnalisées pour styliser les éléments d’une page.

Voici un exemple d’élément de lien stylisé à l’aide des classes link-wrapper et link :

1<template>
2  <div class="link-wrapper">
3    <a href="#" class="link">Building Vue 3 Components With Tailwind CSS</a>
4  </div>
5</template>
6<style>
7.link-wrapper {
8  padding: 8px;
9}
10.link {
11  font-weight: 500;
12  font-size: 1.125rem;
13  line-height: 1.75rem;
14  color: #000;
15}
16</style>

Pourquoi utiliser Tailwind CSS ?

Le problème avec cette approche, c’est que vous devez trouver des noms de classes pertinents chaque fois que vous souhaitez styliser un élément. Vous devez aussi mémoriser des noms extrêmement longs et descriptifs dès que vous voulez réutiliser une classe. En outre, vous devez écrire beaucoup de CSS, car chaque nom de classe ajouté à une page s’accompagne de styles. Ainsi, à mesure que votre application se développe, vos fichiers CSS s’alourdissent, ce qui augmente la taille du bundle et ralentit le chargement.

Avec Tailwind CSS, en revanche, vous pouvez utiliser des classes CSS prédéfinies appelées classes utilitaires. Elles proposent des options de style courantes, comme flex, l’alignement du texte, les bordures, les marges, les espacements intérieurs et les couleurs. Vous pouvez ainsi styliser des pages sans écrire de CSS.

Voyons à quoi ressemblerait l’exemple de lien précédent s’il était stylisé avec Tailwind CSS :

1<div class="p-8">
2    <a href="#" class="font-medium text-lg text-black">Vue + TailwindCSS</a>
3</div>

Vous avez remplacé l’objet de styles et les classes personnalisées par les classes utilitaires suivantes :

• p-8 définit l’espacement intérieur sur 8 px.

• font-medium définit l’épaisseur de la police sur 500.

• text-xl définit la taille de police sur 1.125rem et la hauteur de ligne sur 1.75rem.

• text-black définit la couleur du texte sur noir.

L’utilisation de classes utilitaires réduit la quantité de CSS et permet à toute personne qui consulte le code de comprendre facilement l’intention derrière le style des éléments, sans avoir à consulter une feuille de style.

Tailwind propose de nombreuses classes utilitaires, que vous trouverez dans sa documentation sur les utilitaires.

Styliser un composant carte avec Tailwind CSS

Maintenant que vous connaissez les classes utilitaires, il est temps de styliser le composant carte.

Commencez par modifier le fichier src/components/ArticleCard.vue pour utiliser les classes utilitaires de Tailwind :

1<template>
2  <div class="flex max-w-2xl mx-auto bg-white rounded-sm shadow-md">
3    <div>
4      <img
5        class="h-full w-full object-cover"
6        src="../assets/coverimage.jpg"
7        alt="Closeup code"
8      />
9    </div>
10    <div class="p-8">
11      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
12        Vue
13      </div>
14      <a
15        href="#"
16        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
17        >Building Vue 3 Components With Tailwind CSS
18      </a>
19      <p class="mt-2 text-sm text-slate-500">
20        Learn how to create visually stunning Vue components using the popular
21        utility-first CSS framework Tailwind.
22      </p>
23    </div>
24  </div>
25</template>

Avec ces nouveaux styles, le composant carte devrait ressembler à ceci :

En plus des classes utilitaires, vous avez utilisé des modificateurs pour styliser la carte. Notez la classe hover:underline de la balise <a/> : hover est le modificateur.

Dans Tailwind, placez les modificateurs au début du nom d’une classe utilitaire pour indiquer l’état à cibler. Dans l’exemple ci-dessus, vous avez ciblé le survol, mais vous pourriez aussi cibler l’état de focus avec la classe focus:text-violet-200, ou l’état actif avec active:text-violet-600. 

Vous pouvez utiliser différents modificateurs Tailwind CSS selon la condition à cibler. Pour consulter la liste complète, rendez-vous dans la documentation Tailwind CSS.

Jusqu’ici, le composant carte s’affiche très bien sur les grands écrans. Mais à mesure que la taille de l’écran diminue, la mise en page devient de plus en plus encombrée :

Heureusement, vous pouvez modifier la mise en page de la carte en fonction de la largeur de l’écran.

Gérer les points de rupture dans Tailwind CSS

Tailwind CSS vous permet d’appliquer conditionnellement une classe utilitaire à différents points de rupture. Par défaut, il en existe cinq, chacun prenant effet à partir d’une largeur minimale donnée :

• sm — 640 px

• md — 768 px

• lg — 1 024 px

• xl — 1 280 px

• 2xl — 1 536 px

Pour gérer un point de rupture, ajoutez-le en préfixe à la classe utilitaire, suivi de deux-points (:).

1breakpoint:utility-class

Prenons le bouton suivant :

1<button class="w-16 md:w-32 lg:w-48">
2  Submit
3</button>

Tailwind applique la classe w-16 aux petits écrans, w-32 aux écrans moyens et w-48 aux grands écrans.

Vous pouvez utiliser les points de rupture pour modifier la mise en page, la taille, la couleur ou toute autre propriété sans recourir aux media queries. Vous pouvez également personnaliser les tailles d’écran dans tailwind.config.js si les valeurs par défaut ne répondent pas à vos besoins en matière de design.

Par exemple, le code suivant remplacera la taille d’écran lg :

1module.exports = {
2  theme: {
3    extend: {
4      screens: {
5        'lg': '960px',
6      },
7    },
8  },
9}

Dans votre composant carte d’article, utilisez les points de rupture pour modifier sa mise en page et ajuster la taille de l’image :

Voici le code modifié. Notez les premières balises <div/> et <img/> :

1<template>
2  <div
3    class="md:flex md:max-w-2xl max-w-md mx-auto bg-white rounded-sm shadow-md overflow-hidden"
4  >
5    <div>
6      <img
7        class="h-48 w-full object-cover md:h-full"
8        src="../assets/coverimage.jpg"
9        alt="Closeup code"
10      />
11    </div>
12    <div class="p-8">
13      <div class="uppercase tracking-wide text-sm text-violet-500 font-medium">
14        Vue
15      </div>
16      <a
17        href="#"
18        class="mt-1 text-lg tracking-tight font-medium text-black hover:underline"
19        >Building Vue 3 Components With Tailwind CSS</a
20      >
21      <p class="mt-2 text-sm text-slate-500">
22        Learn how to create visually stunning Vue components using the popular
23        utility-first CSS framework Tailwind.
24      </p>
25    </div>
26  </div>
27</template>

Voici les modifications apportées :

• Les modificateurs md:flex et md:max-w-2xl transforment le composant carte en conteneur flex d’une largeur maximale de 48 rem sur les écrans moyens et grands. Sur les petits écrans, la classe max-w-md définit une largeur de 28 rem.

• Dans l’élément <img/>, md:h-full affiche l’image en pleine hauteur sur les écrans moyens et grands, tandis que la classe h-48 définit une hauteur de 12 rem sur les petits écrans.

Voici le résultat du composant sur un petit écran :

Et voilà ! Vous pouvez maintenant créer des composants Vue avec Tailwind CSS.

Une fois votre application Vue terminée, découvrez comment la déployer sur Netlify avec les mises à jour de sécurité automatiques de Snyk. Créez un compte gratuit et importez votre projet dans Snyk dès aujourd’hui pour détecter et corriger les vulnérabilités susceptibles de se cacher dans ses dépendances, et protéger votre application contre les attaques XSS et autres menaces de sécurité.

Conclusion

Ce tutoriel vous a montré comment créer un composant Vue 3 avec Tailwind CSS. Tailwind CSS est un framework utilitaire qui rend le processus de création de composants UI plus efficace et plus fluide. Vous pouvez utiliser des classes utilitaires pour créer des designs adaptatifs sans consulter de feuilles de style externes ni mémoriser des dizaines de noms de classes. Tailwind vous permet de créer votre propre système de design en personnalisant les classes par défaut. De plus, il supprime automatiquement toutes les classes inutilisées lors de la compilation de production, ce qui réduit la quantité de code dans le produit final.