tailwind css样式不生效的主因是content路径未覆盖源文件、postcss插件未正确加载或@tailwind指令顺序错误；需安装tailwindcss、postcss、autoprefixer三包，配置content为"./src/*/.{js,jsx,ts,tsx}"，并确保@tailwind base/components/utilities按序置于css顶部。
不能直接 npm install -D tailwindcss 就完事——缺了 postcss 和 autoprefixer，tailwind.config.js 里 content 路径写错，或者 @tailwind 指令顺序乱了，项目跑起来样式就“看起来有、构建后全丢”。
create-react-app 项目必须用 PostCSS 链，不是 Vite 插件
如果你是 npx create-react-app 创建的项目，@tailwindcss/vite 插件完全不生效。它只认纯 Vite 项目（比如 npm create vite@latest）。这类 React 项目得走传统 PostCSS 流程：
- 必须安装三个包：
tailwindcss、postcss、autoprefixer（npm install -D tailwindcss postcss autoprefixer） -
postcss.config.cjs（注意是.cjs后缀）里写：module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, } - 不要装
@tailwindcss/postcss——那是旧版迁移用的，新版tailwindcss包里已自带 PostCSS 插件入口
content 路径写错，开发时正常、build 后白屏
Vite 插件模式和 CRA 的 PostCSS 模式都依赖 content 字段扫描文件，但路径必须精确匹配实际文件系统结构：
- 错误写法：
"./src/**/*"（没指定扩展名，插件无法识别 JSX/TSX 中的 class 字符串） - 正确写法（React + TSX）：
"./src/**/*.{js,jsx,ts,tsx}"，还要加"./public/index.html" - 别名（如
@/components）在content里无效——插件不解析别名，必须写真实路径，比如"./src/components/**/*.{js,jsx,ts,tsx}" - 如果用了
src/main.tsx但没写.tsx扩展名，那这部分组件里的类名会被 purge 掉
@tailwind 指令必须按序放在主 CSS 文件顶部
@tailwind base、@tailwind components、@tailwind utilities 不是随便塞进 src/index.css 就行：
- 三者顺序不能换：
base必须在最前（重置样式），utilities必须在最后（覆盖优先级） - 不能写成
@import 'tailwindcss/base'——这是旧写法，Vite 和 CRA 新版本都不支持，会报Unknown at rule @import或直接忽略 - 如果主 CSS 文件里混了其他
@layer或自定义 CSS，@tailwind指令仍需顶格、无空行地放在最开头 - VS Code 报
unknownAtRules是校验器问题，不影响构建——装Tailwind CSS IntelliSense插件即可消除提示
tailwind.config.js 版本对齐和 JIT 模式默认开启
Tailwind v3.4+ 默认启用 JIT（Just-in-Time）编译，不需要手动开 mode: 'jit'。但要注意版本协同：
- 如果你装的是
tailwindcss@4.0.0，配套的@tailwindcss/forms也得是v4.0.x，否则插件加载失败 -
tailwind.config.js导出格式要匹配项目模块类型：CRA 默认 CommonJS，用module.exports = {...}；Vite 项目若设了"type": "module"，就得用export default {...} - 修改
theme.extend后，热更新有时不触发样式再生——关掉 dev server 再重启一次更可靠
真正容易被忽略的点是：所有配置项都依赖路径真实性，而不是开发时“看着像就行”。content 路径错一个字符，npm run build 就会把所有类名清空，而 npm start 还能糊弄你——这种问题只能靠检查构建产物 CSS 文件来确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
