Tailwind CSS样式不生效主因是构建时content路径未覆盖TSX/JSX等源文件、PostCSS插件未加载或动态类名未被静态扫描到；需配置"./src/*/.{js,jsx,ts,tsx}"、使用@tailwindcss/postcss插件，并通过safelist预声明动态类名。
为什么 tailwind.css 文件里写样式没反应？
因为 Tailwind 不是传统 CSS 框架——它不直接运行你写的类名，而是靠构建时扫描 HTML/JSX 文件，把用到的类提取出来生成最终 CSS。你在 tailwind.css 里手动写 .bg-blue-500 这类规则，VSCode 不会实时解析、也不会生效。
真正起作用的是：你写的 HTML 中用了 class="bg-blue-500"，然后通过构建流程（比如 PostCSS）把对应样式注入到输出 CSS 里。VSCode 本身不执行这个过程，所以“预览”必须靠外部工具配合。
- 确保项目已正确初始化：
npm install -D tailwindcss postcss autoprefixer，并运行npx tailwindcss init -p -
tailwind.config.js中的content字段必须包含所有模板路径，例如：content: ["./src/**/*.{html,js,jsx,ts,tsx}"]，否则扫描不到类名，CSS 就为空 - 不要在浏览器里直接打开
index.html（file:// 协议），部分插件或热重载功能会失效；用本地服务器（如live-server或 Vite）启动
VSCode 插件能“预览”什么？不能做什么？
目前最常用的是 Tailwind CSS IntelliSense 插件，它提供类名自动补全、悬停提示、颜色预览（bg-red-400 旁显示色块）、以及跳转到配置定义——但它不渲染页面效果，也不替代浏览器查看。
它本质是静态分析工具：读取 tailwind.config.js 和 content 路径下的文件，推断哪些类可能被使用。如果 HTML 文件没被包含在 content 里，补全就失效；如果写了 class="text-[#123]" 这种动态值，插件也无法识别。
立即学习“前端免费学习笔记（深入）”；
- 启用后按
Ctrl+Space（Win/Linux）或Cmd+Space（Mac）触发补全，输入bg-就能看到所有背景色变体 - 悬停在
md:flex上能看到该响应式断点生效条件（min-width: 768px） - 禁用插件后，HTML 中的类名会失去语法高亮和校验，但不影响实际构建结果
如何做到“改完 HTML 立刻看到样式”？
核心是建立一个轻量、可热更新的开发服务链路，让 VSCode 保存文件 → 构建工具重新生成 CSS → 浏览器自动刷新。推荐两种低配置方案：
- 用
vite（最省事）：npm create vite@latest my-app -- --template vanilla，再安装 Tailwind 并按官方指南配置；运行npm run dev后访问http://localhost:5173，改 HTML 或 JS 保存即刷新 - 用
postcss-cli+watch（适合纯 HTML 项目）：npx postcss css/tailwind.css -o css/output.css --watch，再配合live-server启动根目录：npx live-server - 注意：不要同时运行多个构建进程（比如一边开 Vite，一边手动跑
tailwindcss -i ... -o ...），会导致 CSS 被覆盖或冲突
遇到 Cannot find module 'tailwindcss' 怎么办？
这是 Node.js 模块解析失败，不是 VSCode 设置问题。常见原因只有两个：模块没装对位置，或用了 pnpm/yarn 但没正确链接。
- 确认
package.json的devDependencies里有"tailwindcss": "^3.4.0"，然后运行npm install（不是npm install tailwindcss单独装，容易装错 scope） - 如果用 pnpm，检查
node_modules/.pnpm下是否存在tailwindcss目录；若缺失，删掉node_modules和pnpm-lock.yaml重装 - VSCode 终端默认使用集成终端的 shell，但有时缓存旧的
node_modules路径，关掉终端重开一个，或手动执行which tailwindcss看是否指向项目内路径
插件报错、命令行报错、构建失败这三者日志来源不同，但根源往往都是模块未被正确解析——先解决这个，其他预览问题才可能浮现。
