Morioh
Login
Thadée Cisowski

Thadée Cisowski

10 months ago

Comment configurer Tailwind CSS dans Vue 3

Tailwind CSS est un framework CSS axé sur les utilitaires qui vous permet de styliser vos pages Web en ajoutant des classes à votre balisage HTML. Il s'agit d'un framework de bas niveau, ce qui signifie qu'il ne fournit aucun composant pré-stylisé comme des boutons ou des tableaux. Au lieu de cela, il vous fournit un ensemble de classes utilitaires que vous pouvez utiliser pour créer vos propres composants personnalisés.

Il s'agit d'un didacticiel rapide pour montrer comment le vent arrière peut être configuré dans une nouvelle application Vue 3.

Créer une nouvelle application Vue

En supposant que npm soit installé, assurez-vous que vue cli est également installé :

npm install -g @vue/cli

Ensuite, créez un nouveau projet Vue à l'aide de la commande vue cli :

vue create vue3-tailwind

Accédez au répertoire du projet :

vue3-tailwind

Configurer Tailwind CSS dans Vue 3

Ensuite, nous devrons installer Tailwind et ses dépendances (PostCSS et préfixe automatique).

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

Ou en utilisant du fil :

yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest

Remarque : si vous êtes confronté à cette erreur :

Erreur : le plugin PostCSS tailwindcss nécessite PostCSS 8.

Vous devrez installer une version différente de tailwind prenant en charge PostCSS 7.

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

Générez le Tailwind et publiez les fichiers de configuration CSS.

npx tailwindcss init -p

Cela créera deux fichiers dans votre répertoire racine :  tailwind.config.js et  postcss.config.js. Le fichier de configuration Tailwind est l'endroit où vous ajoutez la personnalisation et le thème de votre application. C'est également là que vous indiquez à Tailwind les chemins à suivre pour rechercher vos pages et vos composants. Cela ressemble à ceci :

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Nous n'entrerons pas dans l'explication de chacune de ces propriétés ; cependant, nous devons mettre à jour la propriété "purge" pour inclure le chemin d'accès à nos composants et pages.

// tailwind.config.js
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Ensuite, créez un dossier appelé « styles » et dans ce dossier, créez un fichier CSS d'entrée (app.css) :

mkdir src/styles && touch src/styles/app.css

Nous importerons les styles de Tailwind en utilisant le  @tailwinddirective fichier CSS d'entrée :

/* ./src/styles/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Enfin, importez votre fichier CSS d'entrée dans votre fichier Javascript d'entrée (main.js) :

import { createApp } from 'vue';
import App from './App.vue';
import './styles/app.css'; // Here

createApp(App).mount('#app');

Faites tourner votre serveur et commencez à utiliser les avantages de Tailwind dans votre application Vue 3. Essayez de mettre à jour le composant App.vue comme ceci :

<template>
  <div class="justify-center flex bg-yellow-300 items-center h-screen">
    <div class="text-4xl">
      Hello Vue 3 + Tailwind CSS
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

Dans la dernière étape, exécutez la commande suivante pour démarrer l'application :

npm run serve

Vous pouvez trouver toutes les classes et options de Tailwind dans la  documentation officielle .

1.10 GEEK