Vue3 Tailwind CSS

Utiliser Tailwind CSS dans un projet Vue est un choix très populaire car il offre une approche utility-first pour écrire du CSS, vous permettant d'appliquer des styles directement dans les noms de classes. Cette approche rend l'écriture des styles plus concise et intuitive.

Tutoriel Tailwind CSS :https://www.example.com/tailwindcss/tailwindcss-tutorial.html

Site officiel de Tailwind CSS :https://tailwindcss.com/

Adresse GitHub :https://github.com/tailwindlabs/tailwindcss

Tailwind CSS est un framework CSS puissant qui rend l'écriture des styles plus concise et modulaire grâce à une approche utility-first. Contrairement aux frameworks CSS traditionnels basés sur des classes, Tailwind fournit un ensemble de classes utilitaires de bas niveau qui peuvent être utilisées directement sur les éléments HTML pour créer rapidement et avec flexibilité des designs personnalisés.

Voici un exemple d'introduction complet utilisant Vue 3 et Tailwind CSS, montrant comment intégrer Tailwind CSS avec Vue 3 et utiliser ses fonctionnalités pour construire des interfaces responsives.

Installer Vue 3 et Tailwind CSS

Tout d'abord, assurez-vous d'avoir installé Vue 3 et Tailwind CSS.

Installez Vue 3 : Dans le terminal, exécutez la commandenpm create vue@latestpour créer un nouveau projet Vue 3 :

npm create vue@latest

Dans la fenêtre de sortie, saisissez le nom du projet, puis appuyez sur Entrée jusqu'au bout :

L'exécution de la commande ci-dessus nécessite de définir certaines options d'initialisation ; utilisez les touches fléchées pour sélectionner.

Entrez dans le répertoire initialisé vue-tailwind-app et installez les dépendances :

cd vue-tailwind-app
npm install

Installer Tailwind CSS : Installez Tailwind CSS et les dépendances associées :

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p

Une fois la création terminée, la structure du répertoire est la suivante :

Configurer Tailwind CSS : Ouvrez le fichier tailwind.config.js et modifiez-le comme suit :

Exemple

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Ajoutez les directives Tailwind : Créez un fichier styles.css dans le répertoire src/assets et ajoutez le contenu suivant :

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

Ensuite, importez ce fichier dans src/assets/main.js :

import './assets/styles.css

Créez des composants Vue et des styles

Maintenant, vous pouvez commencer à écrire vos composants Vue 3 et utiliser Tailwind CSS pour embellir la page.

App.vue

App.vue est le composant principal de l'application ; il contient l'utilisation de base de Vue 3 et Tailwind CSS.

Exemple

<template>
  <div class="min-h-screen bg-gray-50 flex items-center justify-center p-6">
    <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-lg">
      <h1 class="text-2xl font-semibold text-center text-gray-800 mb-6">
Exemple de Vue 3 + Tailwind CSS
      </h1>

      <!-- Zone de saisie et bouton -->
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium text-gray-700">Nom d'utilisateur</label>
        <input
         type="text"
         id="name"
         v-model="username"
         placeholder="Veuillez saisir le nom d'utilisateur"
         class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
       />
      </div>

      <button
       @click="submitForm"
       class="w-full bg-blue-500 text-white py-2 rounded-md shadow-md hover:bg-blue-600 transition duration-200"
     >
Envoyer
      </button>

      <!-- Afficher le nom d'utilisateur -->
      <p v-if="submitted" class="mt-4 text-center text-gray-600">Bienvenue, {{ username }} !</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      submitted: false
    };
  },
  methods: {
    submitForm() {
      if (this.username) {
        this.submitted = true;
      } else {
alert('Veuillez saisir le nom d’utilisateur');
      }
    }
  }
};
</script>

<style scoped>
/* Les styles ici sont personnalisés, si nécessaire */
</style>

De plus, nous pouvons définir notre propre port dans le fichier vite.config.js. Par exemple, après avoir défini le port comme suit :3000：

Exemple

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server: {
    port: 3000, // Notre propre numéro de port spécifié
  },
})

Une fois les paramètres configurés, exécutez ce qui suitnpm run devLa sortie de la commande est la suivante :

# npm run dev                                                         

> [email protected] dev
> vite


  VITE v6.0.3  ready in 333 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:3000/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools

  ➜  press h + enter to show help

Visitezhttp://localhost:3000/, et il s'affiche comme suit :

Ensuite, essayons de créer une liste. Modifiez le fichier App.vue, le code est le suivant :

Exemple

<template>
  <div class="min-h-screen flex flex-col">
    <!-- En-tête -->
    <header class="bg-blue-600 text-white py-4">
      <div class="container mx-auto text-center">
        <h1 class="text-3xl font-semibold">Page de liste</h1>
      </div>
    </header>

    <!-- Liste -->
    <main class="flex-grow py-8">
      <div class="container mx-auto px-4">
        <ul class="space-y-4">
          <li v-for="(item, index) in items" :key="index" class="p-4 bg-white border rounded-lg shadow-md">
            <h2 class="text-xl font-semibold">{{ item.title }}</h2>
            <p class="text-gray-600">{{ item.description }}</p>
          </li>
        </ul>
      </div>
    </main>

    <!-- Pied de page -->
    <footer class="bg-gray-800 text-white py-4">
      <div class="container mx-auto text-center">
        <p>&copy;2024 Mon application Vue3</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "ListPage",
  data() {
    return {
      items: [
{ title: "Élément de liste 1", description: "Ceci est la description du premier élément de la liste." },
{ title: "Élément de liste 2", description: "Ceci est la description du deuxième élément de la liste." },
{ title: "Élément de liste 3", description: "Ceci est la description du troisième élément de la liste." },
// Plus d'éléments de liste
      ],
    };
  },
};
</script>

<style scoped>
/* Ajouter des styles supplémentaires (si nécessaire) */
</style>

Analyse du code :

  • En-tête (header): Usebg-blue-600définir la couleur d'arrière-plan,text-whitedéfinir la couleur du texte,py-4définir une marge intérieure verticale,container mx-autoutilisé pour définir une largeur fixe et centrer l'élément.
  • Liste (main): Useflex-growpour que la section de liste remplisse l'espace restant,py-8ajouter une marge intérieure verticale. Chaque élément de liste utilisep-4, bg-white, border, rounded-lg, shadow-mdet d'autres classes Tailwind pour définir l'apparence.
  • Pied de page (footer): Usebg-gray-800définir un arrière-plan sombre,text-whitedéfinir un texte blanc,py-4définir la marge intérieure.

Visitezhttp://localhost:3000/, et il s'affiche comme suit :

Autres extensions