纯 Vite 项目应使用 @tailwindcss/vite 插件，它更轻、热更新稳定、构建高效，但需确保项目根目录有 vite.config.ts/js 且无其他构建工具接管 CSS；非纯 Vite 项目（如 CRA、vue-cli 或 Webpack 项目）必须退回 PostCSS 方式，否则 CSS 不生成或类名丢失。
能直接用 @tailwindcss/vite 插件的，就别走 PostCSS 老路——它更轻、热更新更稳、构建不重复扫描，但只适用于纯 Vite 项目（比如 npm create vite@latest 创建的），不是所有“带 Vite 的项目”都适用。
确认你用的是纯 Vite 项目
如果你的项目是 create-react-app、vue-cli、或自己配了 Webpack，@tailwindcss/vite 插件根本不会生效，强行加进去会导致 CSS 不生成或类名丢失。这时候必须退回传统 PostCSS 方式。
- 判断依据：项目根目录有没有
vite.config.ts或vite.config.js，且没有其他构建工具接管 CSS 处理流程 -
create-vue、create-react-app + vite-plugin-react-swc这类混合方案，也默认不兼容@tailwindcss/vite - 不确定？先运行
npm ls vite，再检查vite.config.*里是否只用了官方插件（如@vitejs/plugin-react、@vitejs/plugin-vue）
纯 Vite 项目：用 @tailwindcss/vite 插件
这是 2026 年官方主推方式，跳过 PostCSS 配置，由插件直连 Vite 构建链。但版本必须对齐，路径不能写错，否则生产环境样式全丢。
- 安装两个包：
npm install -D tailwindcss @tailwindcss/vite，且确保@tailwindcss/vite版本号和tailwindcss主版本一致（例如都是4.0.12） - 在
vite.config.ts中引入并启用：plugins: [react(), tailwindcss()]（Vue 同理用vue()） -
删掉
postcss.config.js，也不要往css.postcss.plugins里塞tailwindcss()，否则触发双重处理 -
tailwind.config.js中的content必须精确匹配源码路径，比如 Vue 项目要写./src/**/*.{vue,js,ts,jsx,tsx}，漏掉.vue后缀，开发时看着正常，构建后所有 utility 类全被 purge
非纯 Vite 项目：走 PostCSS 流程
哪怕你项目里装了 Vite，只要它只是 dev server，实际打包靠 Webpack 或其他工具，就得老老实实用 PostCSS。这时 postcss 和 autoprefixer 必须显式安装，Vite 内置的不管用。
立即学习“前端免费学习笔记（深入）”；
- 执行
npm install -D tailwindcss postcss autoprefixer，不要省略postcss - 运行
npx tailwindcss init -p，-p参数会自动生成postcss.config.js并注入tailwindcss插件 - 在主 CSS 文件顶部按顺序写：
@tailwind base;、@tailwind components;、@tailwind utilities;，顺序错一个，text-2xl这类类名可能不生效 - 确保该 CSS 文件被入口 JS/TS 导入，比如
main.ts里有import './assets/tailwind.css'
TS 项目注意配置文件后缀和类型
用 TypeScript 的项目，tailwind.config.js 不能直接改后缀为 .ts 就完事——Vite 默认不处理 JS/TS 配置文件的类型检查，需要显式导入类型并标注。
- 重命名为
tailwind.config.ts - 开头加
import type { Config } from 'tailwindcss'，导出对象标注const config: Config = { ... } - 如果用
@tailwindcss/vite，插件本身支持 TS 配置；但若走 PostCSS，则还需确保postcss.config.ts也做了类似类型声明，否则某些 IDE 会报错
最常被忽略的点：content 路径写错导致生产环境白屏，以及 @tailwindcss/vite 和传统 PostCSS 混用引发的双重扫描——这两个问题不会在本地开发时暴露，一到 build 就失效，得提前盯住。
