Integrating Tailwind CSS with Vue 3 and Vite

What is Tailwind CSS?

Before we start installing packages, let's briefly touch on what Tailwind CSS is.

Tailwind is a utility-first CSS framework. Unlike other frameworks like Bootstrap which give you pre-built components (e.g., .card, .btn-primary), Tailwind provides thousands of low-level utility classes (e.g., flex, pt-4, text-center, bg-blue-500). You build custom designs by composing these classes directly in your HTML.

This approach is a perfect match for component-based frameworks like Vue. It allows you to create highly customized, responsive designs without ever leaving your component files or writing a single line of custom CSS. You'll see just how fast and intuitive this can be in the upcoming lessons.

The Integration Process: A Step-by-Step Guide

We are going to add Tailwind CSS to the "VueMart" mini-project you completed in the last lesson. Open that project in VS Code and have a terminal ready.

The integration process involves four main steps:

1. Install Dependencies: We'll use npm to install tailwindcss and two of its peer dependencies, postcss and autoprefixer.
2. Generate Config Files: We'll run a command to create tailwind.config.js and postcss.config.js.
3. Configure Template Paths: We'll tell Tailwind which files to scan for utility classes so it can generate the necessary CSS.
4. Import Tailwind Styles: We'll create a main CSS file and import it into our Vue application's entry point.

The video below provides a clear, concise walkthrough of this entire process. It will be our main guide for this lesson.

Now, let's perform these steps on your project.

Step 1: Install Tailwind and its Dependencies

In your project's terminal, run the following command. The -D flag installs these as "dev dependencies," meaning they are only needed for development and not for the final production build.

npm install -D tailwindcss postcss autoprefixer

• tailwindcss: The core Tailwind framework.
• postcss: A tool that transforms CSS with JavaScript plugins. Tailwind is, under the hood, a PostCSS plugin.
• autoprefixer: A PostCSS plugin that automatically adds vendor prefixes (like -webkit- or -moz-) to CSS rules to ensure cross-browser compatibility.

Step 2: Generate Configuration Files

Next, run this command to generate the necessary configuration files:

npx tailwindcss init -p

This command does two things:

1. It creates a tailwind.config.js file in your project root. This is where you'll configure and customize Tailwind.
2. It creates a postcss.config.js file. The -p flag automatically adds the necessary PostCSS configuration to use Tailwind and Autoprefixer.

Step 3: Configure Your Template Paths

This is a crucial step. Tailwind's modern engine works by scanning your files for class names and then generating only the CSS that you are actually using. You need to tell it where to look.

Open the newly created tailwind.config.js file. Replace the empty content array with the following paths:

// tailwind.config.js

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

This configuration tells Tailwind to scan the root index.html file and any file with a .vue, .js, .ts, .jsx, or .tsx extension inside the src folder and its subdirectories.

Step 4: Add and Import Tailwind's CSS Directives

1. Navigate to your src/assets directory. You probably have a main.css file there from the default Vue starter. Open it, delete all of its contents, and replace them with the following three lines:

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

   These are Tailwind's "directives." They are placeholders that Tailwind's build process will replace with its generated styles:

   • @tailwind base: Injects Tailwind's base styles and any base styles registered by plugins. This includes a CSS reset called Preflight.
   • @tailwind components: Injects Tailwind's component classes.
   • @tailwind utilities: Injects Tailwind's utility classes.

2. Finally, ensure this CSS file is imported into your application. Open src/main.js. The default Vue starter should already have a line like import './assets/main.css'. Just make sure it's there.

   // src/main.js
   
   import './assets/main.css' // This line is key!
   
   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   
   const app = createApp(App)
   
   app.use(router)
   
   app.mount('#app')
   

For a text-based version of these instructions, the following article is a great reference.

Verification: Let's See It Work!

Your integration should now be complete. To verify it, let's add a few utility classes to your "VueMart" home page.

1. Restart your development server. Stop the current process (Ctrl+C) and run npm run dev again. This ensures Vite picks up the new PostCSS configuration.

2. Open src/views/HomeView.vue.

3. Find the <h1> tag or add one. Let's apply some styles to it using Tailwind classes.

   <template>
     <div class="p-8"> <!-- Add some padding to the whole view -->
       <h1 class="text-3xl font-bold underline text-blue-600 mb-6">Our Products</h1> <!-- Add Tailwind classes here -->
   
       <div v-if="loading">Loading products...</div>
       <div v-else-if="error">{{ error }}</div>
       <ul v-else-if="products" class="space-y-4"> <!-- Add vertical space between list items -->
         <li v-for="product in products" :key="product.id">
           <RouterLink 
             :to="'/product/' + product.id"
             class="text-lg text-gray-800 hover:text-blue-500"
           >
             {{ product.title }}
           </RouterLink>
         </li>
       </ul>
     </div>
   </template>
   

Now, check your browser. Your "Our Products" title should be large, bold, underlined, and blue. The list items should have some space between them. If you see these styles, congratulations! You have successfully integrated Tailwind CSS into your Vue project.

Conclusion

In this lesson, you've successfully set up your project to use Tailwind CSS. You've taken a critical first step from building a functional application to building a stylized one.

Key Takeaways:

• Integration is a multi-step process: It involves installing npm packages (tailwindcss, postcss, autoprefixer), generating configuration files, and telling Tailwind where to find your classes.
• Configuration is key: The content array in tailwind.config.js is essential for Tailwind's Just-In-Time (JIT) compiler to work correctly and keep your final CSS bundle small.
• Directives are placeholders: The @tailwind directives in your main CSS file are where Tailwind injects its powerful set of base styles, components, and utilities.

Now that the setup is complete, you're ready to learn the philosophy behind Tailwind and start using its utility classes to build beautiful interfaces.

In the next lesson, we will dive into the utility-first approach. You'll learn the "why" behind this methodology and see how it helps you build consistent, custom designs with incredible speed.