Install Tailwind CSS v4 in a Vue 3 + Vite Project

#learning #vue #tailwindcss #webdev

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! 🚀

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now