VSCode 本身不运行 Tailwind CSS，也不能直接预览样式效果——它只负责编辑和提示；真正“看到效果”必须靠构建工具启动本地服务器，并让浏览器实时加载生成的 CSS。
为什么改完 HTML 看不到 Tailwind 样式？
常见错误现象：写好 class="bg-blue-500"，保存后刷新页面仍是白底黑字；tailwind.css 文件里手动加规则也完全没反应。
根本原因：Tailwind 不是传统 CSS 库，它不会解析你写的类名字符串，而是靠构建时扫描源码（如 ./src/**/*.{js,jsx,ts,tsx}），把实际用到的类提取出来，生成精简的最终 CSS。VSCode 不执行这个扫描和构建过程。
- content 路径没覆盖 JSX/TSX 文件 → 扫描不到类名 → 输出 CSS 为空
- 直接双击打开
index.html（file://协议）→ 浏览器拒绝加载外部 CSS 或热重载失效 - 没装或没启用
@tailwindcss/postcss插件 → PostCSS 流程中断，@tailwind指令不生效
怎么让“保存即刷新”生效？
核心链路：VSCode 保存文件 → 构建工具监听变更 → 重新生成 CSS → 浏览器自动刷新。推荐用 Vite，配置最少、热更新最稳。
- 初始化：
npm create vite@latest my-app -- --template react（或vanilla） - 装依赖：
npm install -D tailwindcss postcss autoprefixer，再运行npx tailwindcss init -p - 配
tailwind.config.js：content: ["./src/**/*.{js,jsx,ts,tsx}"]（扩展名必须显式写出） - 启动：
npm run dev，访问http://localhost:5173，改任何 JSX 或 CSS 都秒刷新
别用 live-server 或 http-server：它们不触发 Tailwind 构建，只 serve 静态文件，CSS 永远是空的。
立即学习“前端免费学习笔记（深入）”；
VSCode 插件能帮你“看”到什么？
Tailwind CSS IntelliSense 插件（ID：bradlc.vscode-tailwindcss）不做渲染，但能极大提升编码效率：
- 输入
bg-自动列出所有背景色变体，悬停显示background-color: #3b82f6和色块 - 按住
Ctrl（Mac 是Cmd）点击text-lg，跳转到tailwind.config.js的fontSize定义处 - 动态类名如
className={`${base} ${isHovered ? 'bg-red-500' : ''}`不会补全也不悬停预览——插件只识别静态字符串 - 要支持
cn()或tw`...`，得在settings.json里配tailwindCSS.experimental.classRegex正则
容易被忽略的关键点
很多问题卡在“看似配置对了，其实漏了一处”：
-
tailwind.config.js必须在项目根目录（code .打开的那一层），插件不会往上或往下找 -
editor.quickSuggestions.strings默认是false，关掉它，className="..."里一个提示都没有 - Vite 启动后，浏览器地址必须是
http://localhost:5173，不是file://路径，也不是127.0.0.1（部分插件对域名敏感） - 改完
tailwind.config.js后，Vite 会自动热更新配置，但 VSCode 插件需要手动执行Developer: Reload Window才能重新读取
