Configuration de Tailwind CSS avec des fichiers de thème et des images dans Vue.js / Blogs / Perficient

Tailwind CSS est un framework CSS axé sur les utilitaires qui facilite le style en proposant des classes utilitaires prédéfinies. Ces cours permettent aux développeurs de créer rapidement des conceptions réactives et modernes. Lorsqu’il est utilisé avec Vue.js, un framework JavaScript progressif, il fournit une configuration efficace pour créer des applications Web complexes. Ce guide vous montrera comment configurer Tailwind CSS dans un projet Vue.js, créer des fichiers de thème pour la personnalisation et gérer correctement les images.

Étape 1 : Configuration d’un projet Vue.js

Avant de commencer, assurez-vous que Node.js et npm sont installés sur votre système.

Utiliser Vue CLI

1. Installez Vue CLI globalement :

   npm install -g @vue/cli

   

2. Créez un nouveau projet :

   vue create my-vue-tailwind-css-project

   

3. Accédez au répertoire du projet :

   cd my-vue-tailwind-css-project

   

Étape 2 : Installation de Tailwind CSS

Tailwind CSS doit être ajouté à votre projet, ainsi que ses dépendances.

1. Installez Tailwind CSS, PostCSS et Autoprefixer :

   npm install -D tailwindcss postcss autoprefixer

   
   Note: PostCSS est un outil qui utilise des plugins pour optimiser et améliorer les styles CSS, alors que Préfixe automatique insère des préfixes spécifiques au navigateur pour garantir la compatibilité avec les anciens navigateurs. Tailwind CSS tire parti des deux pour garantir un développement transparent et une prise en charge multi-navigateurs.

2. Initialisez le CSS Tailwind :
   

   npx tailwindcss init

   
   Note: Cette commande génère un fichier tailwind.config.js pour la configuration.

Étape 3 : Configuration du CSS Tailwind

Pour rendre Tailwind CSS fonctionnel dans votre projet :

1. Ouvrir tailwind.config.js et spécifiez les fichiers que Tailwind doit analyser pour les noms de classe :

   //Path: tailwind.config.js
   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
     theme: {
       extend: {
       },
     },
     plugins: [],
   }

2. Créez un fichier CSS Tailwind (par exemple, src/assets/vent arrière.css) et incluent les styles de base, de composants et d’utilitaires de Tailwind :

   //Path: tailwind.css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

3. Importez ce fichier CSS dans votre fichier JavaScript principal (main.js ou main.ts) :

   //Path: main.js
   { createApp } from 'vue'
   import App from './App.vue'
   import './assets/tailwind.css';
   createApp(App).mount('#app')

Étape 4 : Ajout de fichiers de thème pour la personnalisation

Une caractéristique clé de Tailwind CSS est sa capacité à étendre le système de conception par défaut avec des thèmes personnalisés.

Personnaliser les couleurs et les polices

Modifier tailwind.config.js pour définir les couleurs et polices spécifiques à votre marque :

//Path: tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#1D4ED8',  // Primary color
        secondary: '#9333EA', // Secondary color
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'], // Custom font
      },
      backgroundImage: {
        'hero-pattern': "url('@/assets/Background_image.png')",
      },
    },
  },
  plugins: [],
}

Utilisation dans les composants Vue

Utilisez les classes définies directement dans vos composants :

//Path: HelloWorld.vue
<template>
  <div class="bg-black text-white font-sans p-4">
    Welcome to Tailwind CSS in Vue Js Project!
  </div>
</template>

<script>
export default{
  name: 'HelloWorld'
}
</script>

Sortir:

Étape 5 : Gestion des images dans Vue.js

La plupart des applications Web incluent des images. Une manipulation appropriée garantit des performances et une maintenabilité améliorées.

Ajout d’images

Placez toutes vos images dans le répertoire src/assets.

Utiliser des images dans les modèles Vue

Images de référence à l’aide de chemins relatifs :

//Path: HelloWorld.vue
<template>
  <div>
    <!-- Welcome section -->
    <div class="bg-black text-white font-sans p-4">
      Welcome to Tailwind CSS in Vue.js Project!
    </div>

    <!-- Image section with a centered image -->
    <div class="p-4">
      <img :src="https://blogs.perficient.com/2024/12/20/setting-up-tailwind-css-with-theme-files-and-images-in-vue-js/require("@/assets/Background_image.png')" alt="Background Image" class="rounded-lg shadow-lg w-full max-w-[600px] mx-auto" />
    </div>
  </div>
</template>

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

<style scoped>
/* Optional: Styling for the image */
img {
  width: 100%;
  max-width: 600px;
}
</style>

Sortir:

Utiliser des images comme arrière-plans

Pour utiliser des images comme propriétés d’arrière-plan, mettez à jour tailwind.config.js:

// Path: tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        secondary: '#9333EA', // Custom secondary color
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'], // Custom sans-serif font
      },
      backgroundImage: {
        'hero-pattern': "url('@/assets/logo.jpg')", // Set custom background image
      },
    },
  },
  plugins: [],
}

Appliquez l’arrière-plan personnalisé dans votre composant :

// Path: HelloWorld.vue
<template>
  <div>
    <!-- First div with background color and styling -->
    <div class="bg-indigo-500 text-white font-sans p-4">
      Welcome to Tailwind CSS in Vue.js Project!
    </div>

    <!-- Second div with the custom background image applied -->
    <div class="bg-hero-pattern bg-contain bg-center bg-no-repeat h-64 w-full">
      <!-- Content for this section (if any) can go here -->
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<style scoped>
/* The background image is already applied via Tailwind's bg-hero-pattern class.
   No need to redefine it here. If you want additional styles, add them below. */

/* Optional styles for the section could go here. */
</style>

Sortir:

Conclusion

Tailwind CSS et Vue.js sont un mélange efficace pour créer des applications modernes, réactives et maintenables. Vous pouvez développer des interfaces utilisateur visuellement attrayantes et adaptées aux besoins de votre projet en configurant un thème personnalisé et en gérant efficacement les images.