Introduction

If you’ve ever wished for a frontend toolkit that lets you build sleek, responsive interfaces without drowning in CSS files or boilerplate code, Vue 3 and Tailwind CSS might just become your new best friends. Vue 3, the latest iteration of the progressive JavaScript framework, offers a reactive, component-based architecture that’s both intuitive and powerful. Pair it with Tailwind CSS—a utility-first CSS framework—and you’ve got a combo that streamlines styling while keeping your code clean and maintainable.

In this article, we’ll explore how Vue 3 and Tailwind work together, walk through practical code examples, and show you how to set them up in your project. Let’s dive in!

Why Vue 3 and Tailwind?

Vue 3 brings game-changing features like the Composition API, better TypeScript support, and improved performance. Its reactivity system and component-driven design make it ideal for building dynamic UIs.

Tailwind CSS replaces traditional CSS with utility classes. Instead of writing custom CSS for every button or card, you apply pre-defined classes directly in your HTML (or Vue templates). This approach keeps your styling consistent and eliminates the need for context-switching between files.

Together, they let you:

  • Build components faster with inline styling.
  • Maintain a consistent design system.
  • Avoid CSS bloat.

How to Configure Vue 3 with Tailwind

Step 1: Create a Vue 3 Project
Using npm:

npm create vue@latest

Step 2: Install Tailwind

Navigate to your project directory and run:

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

Step 3: Configure Tailwind
Update tailwind.config.js to scan your Vue files:

// tailwind.config.js
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 4: Add Tailwind Directives
Create a CSS file (e.g., src/assets/main.css) and include:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Import the CSS

In your main.js or main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import './assets/main.css'; // Add this line

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

Done! You can now use Tailwind classes in your Vue components.

Code Examples: Vue + Tailwind in Action

Let’s build a simple Vue component using Tailwind.

Example 1: A Styled Button 

<template>
   
    class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-all"
    @click="handleClick"
  >
    Click Me!
  
template>

<script setup>
const handleClick = () => {
  console.log("Button clicked!");
};
script>

Tailwind classes explained:

  • px-4, py-2: Horizontal and vertical padding.
  • bg-blue-500: Background color.
  • rounded-lg: Rounded corners.
  • hover:bg-blue-600: Darker blue on hover.
  • transition-all: Smooth color transition.

Example 2: A Responsive Card 

Hello, Tailwind!
    A responsive card built with Vue and Tailwind.

Tailwind’s responsive utilities (e.g., max-w-sm, mx-auto) make it easy to design for all screen sizes without media queries.

Summary

Vue 3 and Tailwind CSS are a powerhouse duo for developers who value speed, consistency, and maintainability. Vue’s component-driven architecture pairs seamlessly with Tailwind’s utility-first approach, letting you prototype quickly and ship polished UIs without the hassle.

By following the setup steps above, you’ll have a project ready to leverage both tools in under 5 minutes. Whether you’re building a small app or a large-scale project, this combo will keep your codebase clean and your workflow efficient.

Final Tip: Explore Tailwind’s official plugins (like @tailwindcss/forms or @tailwindcss/typography) to supercharge your styling even further. Happy coding! 🚀