Tailwind CSS 样式不起作用最常见的原因是样式未加载：检查 CDN 是否正确引入或构建流程是否正常，确认 content 配置覆盖所有模板文件，避免拼写错误及动态 class 未被扫描。

Tailwind CSS 样式不起作用，最常见的原因是样式根本没有加载进来。先确认你是否真的引入了 Tailwind 的 CSS 文件（或通过 PostCSS 正确构建），而不是只写了 class 名字就以为能生效。

检查 CDN 是否正确引入

如果你用的是 CDN 方式（仅适用于开发或简单页面），必须确保：

• 在 中引入了官方提供的最新 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