Install Tailwind CSS v4 in a Vue 3 + Vite Project

Tailwind CSS v4 is here, bringing a more streamlined installation process and performance improvements. However, if you check the official Tailwind CSS documentation, you might not find explicit installation instructions for Vue 3 with Vite. This guide will walk you through the process step-by-step.

What’s New in Tailwind CSS v4?
Tailwind CSS v4 introduces several improvements, including:

No PostCSS configuration required – You no longer need postcss.config.js.
Faster build times – Thanks to better optimizations.
New @tailwindcss/vite plugin – Tailwind now integrates more seamlessly with Vite.
Why Vue 3 Instead of Nuxt?
I'm sure you're wondering why I would need Vue 3 instead of just using Nuxt. Vue 3 is a great choice if you’re building a SPA or an SSR-ready app without the full complexity of Nuxt. Here’s why you might choose Vue over Nuxt:

Better Performance: Vue 3 is lightweight and doesn’t add the overhead that Nuxt brings.
More Control: With Vue 3, you decide how your app is structured rather than following Nuxt’s conventions.
No Need for SSR: If you don’t need server-side rendering (SSR) or static site generation (SSG), Vue 3 is simpler.
Faster Builds: Since Nuxt includes additional features, Vue 3 + Vite can be faster for development and deployment.
Installing Tailwind CSS v4 in Vue 3 + Vite
Step 1: Create a Vue 3 Project with Vite
If you don’t already have a Vue 3 project set up, create one using Vite:

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
Step 2: Install Tailwind CSS v4
Run the following command to install Tailwind CSS v4 along with its Vite plugin:

npm install -D tailwindcss @tailwindcss/vite
Step 3: Configure Vite to Use Tailwind CSS
Edit vite.config.ts (or vite.config.js if using JavaScript) and add Tailwind CSS as a plugin:

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

export default defineConfig({
plugins: [
vue(),
tailwindcss(),
],
})
Step 4: Add Tailwind to Your Styles
Edit the CSS file src/style.css and add:

@import 'tailwindcss';
Step 5: Import Tailwind CSS in main.ts
Check your src/main.ts and ensure your style.css is imported:

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

createApp(App).mount('#app')
Step 6: Start Your Development Server
Run the Vite development server:

npm run dev
That’s it! You’ve successfully set up Tailwind CSS v4 in a Vue 3 project using Vite. With this new streamlined setup, you can enjoy faster builds and an even smoother development experience.

Have you tried Tailwind CSS v4 yet? Share your thoughts in the comments! 🚀