版本

node: >= 18.0.0

vue: 3.5.13

vite: 6.3.1

tailwindcss: 4.1.6

@tailwindcss/vite: 4.1.6

tailwindcss

• ✅ 细粒度类库
  提供数千个原子级CSS类（如 text-center、bg-blue-500、p-4）
• 🧩 组合式开发
  通过类名组合构建完全自定义的UI，无需编写自定义CSS
• 🚫 无预设组件
  不强制使用特定样式的组件

项目创建

创建项目：my-app

$ pnpm create vue
$ cd my-app
$ pnpm i

@tailwind/vite 插件目前只支持 ESM 规范，所以你的项目的 package.json 需要设置 "type": "module"

tailwindcss 配置

$ pnpm i tailwindcss @tailwindcss/vite -D

vite.config.js

vite 中配置 @tailwindcss/vite 插件；

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from "@tailwindcss/vite";// https://vite.dev/config/
export default defineConfig({plugins: [vue(),tailwindcss(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

css

在 main.js 中的入口 css 文件中添加：

main.css

tailwind-Theme variables

@import "tailwindcss";
@config "../../tailwind.config.js";
// @plugin "@tailwindcss/typography"; // 如果需要插件时，添加// 自定义颜色等
@theme {--color-abcd: red;
}

tailwind.config.js

没有需求时，不创建该配置文件也可以

在根目录位置创建 tailwind.config.js；

可以配置一些自定义的颜色变量等；

export default {content: ["./src/**/*.{js,ts,jsx,tsx,vue}"],theme: {extend: {colors: {"my-primary": "#42b883",},},},plugins: [],
};

VSCode 插件

安装插件 Tailwind CSS IntelliSense，可以在鼠标移动到 class 时提示对应的样式；

使用

App.vue

<template><header><div class="text-amber-700 text-2xl font-bold">Hello Vue</div><div class="text-my-primary text-2xl font-bold">Hello Vue</div><div class="text-abcd text-2xl font-bold">Hello Vue</div><div class="my-title">Hello Vue</div></header>
</template><style scoped>
@reference  "./assets/main.css";.my-title {@apply text-purple-700 text-2xl font-bold;
}
</style>

tailwind css v4 文档