Using Tailwind CSS with Vue 3

Tailwind is a utility-first CSS framework.

Here is how to use Tailwind CSS 4 with Vue 3 and Vite. I originally wrote this post for Vue CLI 3 and Tailwind v1, with a PostCSS config, a tailwind.js file and the @tailwind directives. None of that is needed anymore, so this is the current setup.

Create a Vue 3 app

npm create vue@latest

Follow the prompts, then enter the project and install dependencies:

cd my-project
npm install

The scaffold uses Vite, and TypeScript if you say yes to it in the prompts. You can also run npm create vite@latest and pick the Vue template if you prefer.

Install Tailwind

npm install tailwindcss @tailwindcss/vite

Both packages are on the Tailwind CSS 4 line (4.3 as of September 2026).

Add the Vite plugin

In vite.config.ts (or vite.config.js if you skipped TypeScript):

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

export default defineConfig({
  plugins: [vue(), tailwindcss()],
})

Import Tailwind in your CSS

Create or edit your main CSS file (for example src/assets/main.css) and add:

@import "tailwindcss";

The scaffold already imports that file in src/main.ts (or main.js). If you created it yourself, import it:

import './assets/main.css'

There is no PostCSS config and no tailwind.config.js in this setup. The @tailwind base;, @tailwind components; and @tailwind utilities; lines from Tailwind v1 to v3 are replaced by that single @import.

Test it

Add a utility class in a template:

<div class="bg-purple-500 text-white p-4 md:bg-blue-500">
  Test
</div>

Restart the Vite dev server if it was already running. You should see a colored box.

Want me to talk about your product? You can sponsor this site.