Vite + Vue + TailwindCSS Setup (Using pnpm)

Create a Vite + Vue Project

You can directly specify the project name and template:

pnpm create vite my-vue-app --template vue
cd my-vue-app

Supported templates include:

vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, 
preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts

Install TailwindCSS

Install TailwindCSS and the Vite plugin:

pnpm install tailwindcss @tailwindcss/vite

Configure Vite Plugin

Edit vite.config.ts to add TailwindCSS:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
 
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

Import Tailwind CSS

In your main CSS file (src/style.css):

@import "tailwindcss";

Start the Dev Server

pnpm run dev

Use Tailwind in HTML / Vue Templates

<template>
  <h1 class="text-3xl font-bold underline">
    Hello World!
  </h1>
</template>