1 安装 tailwindcss和postcss

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2 初始化配置文件

npx tailwindcss init -p

3 在tailwind.config.js添加对vue文件的识别，其他配置可以在配置文档中查看详细参数设置

/** @type {import('tailwindcss').Config} */
export default {content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
}

如果你介意 tailwind.config.js 的文件是 js，那么直接改为 ts 之后换成以下代码。注意postcss.config.js 不能改成 ts

/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss'export default {content: ['./src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
} satisfies Config

4 在src 目录下创建目录styles，并在该目录下创建Tailwind.css，用 @tailwind 指令添加 Tailwind功能。

@tailwind base;
@tailwind components;
@tailwind utilities;

6 在main.ts 中引入Tailwind.css

import "./styles/Tailwind.css"

7 测试

<div class="flex flex-col"><div class="mt-2 bg-red-600">01</div><div class="mt-2 bg-red-600">02</div><div class="mt-2 bg-red-600">03</div>
</div>