DEV Community

Wadi zaatour
Wadi zaatour

Posted on • Edited on

Vue 3 and Tailwind CSS Integration Guide

#vue #tailwindcss #frontend

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 using the latest Tailwind CSS v4. 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 v4 introduces the Oxide engine, Lightning CSS, and advanced tree-shaking for faster builds and smaller bundle sizes. It replaces traditional CSS with utility classes, allowing you to style directly in your HTML or Vue templates.

Together, they let you:

  • Build components faster with inline styling.
  • Maintain a consistent design system.
  • Avoid CSS bloat.
  • Enjoy blazing-fast builds with Tailwind’s JIT engine.

How to Configure Vue 3 with Tailwind CSS v4

Step 1: Create a Vue 3 Project 

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Tailwind CSS v4 and Plugins 

npm install -D tailwindcss @tailwindcss/vite
npm install @tailwindcss/forms @tailwindcss/typography
Enter fullscreen mode Exit fullscreen mode

Step 3: Initialize Tailwind Configuration 

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Update tailwind.config.js:

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Configure Vite

Edit vite.config.js:

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

export default defineConfig({
  plugins: [vue(), tailwindcss()],
})
Enter fullscreen mode Exit fullscreen mode

Step 5: Add Tailwind Directives to CSS

Create src/style.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Step 6: Import CSS in Your Entry File

Edit src/main.js or main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import './style.css'

createApp(App).mount('#app')
Enter fullscreen mode Exit fullscreen mode

Code Examples: Vue + Tailwind in Action

Example 1: A Styled Button 

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

<script setup>
const handleClick = () => {
  console.log("Button clicked!");
};
</script>
Enter fullscreen mode Exit fullscreen mode

Tailwind classes explained:

  • px-4, py-2: Padding
  • bg-blue-500: Background color
  • text-white: Text color
  • rounded-lg: Rounded corners
  • hover:bg-blue-600: Hover effect
  • transition-all: Smooth transitions

Example 2: A Responsive Card 

<template>
  <div class="max-w-sm mx-auto mt-8 p-6 bg-white rounded-xl shadow-md">
    <h2 class="text-xl font-bold text-gray-800 mb-2">Hello, Tailwind!</h2>
    <p class="text-gray-600">A responsive card built with Vue and Tailwind.</p>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

Responsive utilities used:

  • max-w-sm, mx-auto: Layout
  • shadow-md: Shadow
  • rounded-xl: Rounded corners

Summary

Vue 3 and Tailwind CSS v4 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 and @tailwindcss/typography to supercharge your styling even further. Happy coding! 🚀

Top comments (1)

Collapse
 
vocxod profile image
VraGos • • Edited

old approach to integration for vue3 and tailwindcss. More fresh for it: dev.to/osalumense/install-tailwind... (as sample)