Tailwind CSS 样式不起作用最常见的原因是样式未加载：检查 CDN 是否正确引入或构建流程是否正常，确认 content 配置覆盖所有模板文件，避免拼写错误及动态 class 未被扫描。
Tailwind CSS 样式不起作用，最常见的原因是样式根本没有加载进来。先确认你是否真的引入了 Tailwind 的 CSS 文件（或通过 PostCSS 正确构建），而不是只写了 class 名字就以为能生效。
检查 CDN 是否正确引入
如果你用的是 CDN 方式（仅适用于开发或简单页面），必须确保：
- 在 <head> 中引入了官方提供的最新 CDN 链接（注意不是 unpkg 或 jsDelivr 的旧版本）
- 链接放在所有自定义 CSS 之前，避免被覆盖
- 没有拼写错误，比如
cdn.tailwindcss.com写成cdn.tailwindcss.com/（结尾斜杠可能触发 404） - 浏览器控制台 Network 标签页里能看到该资源状态码是 200，且响应内容包含大量
.bg-blue-500{...}类规则
检查 npm + 构建流程是否正常运行
如果项目是用 Vite、Next.js、Create React App 等脚手架搭建的，Tailwind 需要通过 PostCSS 插件处理并生成实际 CSS：
- 确认已安装
tailwindcss、postcss、autoprefixer - 执行过
npx tailwindcss init -p生成tailwind.config.js和postcss.config.js -
src/index.css（或入口 CSS）中包含@tailwind base; @tailwind components; @tailwind utilities; - 启动的是开发服务器（如
npm run dev），而不是直接打开 HTML 文件 —— 否则 PostCSS 不会运行，class 就不会被解析
检查 HTML 文件是否被正确扫描（content 配置）
Tailwind 默认只会提取你在 content 字段里声明的文件中的 class 名。如果没配或路径错，它会“看不见”你写的 class="text-red-500"：
立即学习“前端免费学习笔记（深入）”；
- 打开
tailwind.config.js，确认content包含所有模板文件路径，例如：content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/**/*.html"] - 路径用相对路径，不要漏掉
**和扩展名 - 改完配置后重启开发服务（热更新不一定会重读 config）
检查 class 名是否拼写正确或受 Purge 影响
开发环境下一般关闭 Purge，但若误开了或用了生产构建命令（如 npm run build），可能把未识别的 class 清掉了：
- 临时在
tailwind.config.js中设purge: false（v2.x）或content: []（v3.x+）测试是否恢复 - 确认 class 名没写错：比如
flex-col不是flex-column，md:text-lg要有空格不能连写 - 动态拼接 class（如
className={`text-${color}-500`}）不会被扫描到，需显式写死或用safelist
