tailwind ui 组件样式不生效，90% 是因 content 路径未覆盖粘贴的 html/jsx 文件，导致构建时静态扫描不到类名；需检查并修正 tailwind.config.js 中 content 配置、postcss 插件加载及动态类名处理。
复制 Tailwind UI 组件后样式不生效，90% 是因为 content 路径没覆盖到你粘贴进去的 HTML 或 JSX 文件，Tailwind 根本没扫描到那些类名——不是组件写错了，是构建时直接“看不见”。
content 没匹配到你粘贴的文件路径
Tailwind 不运行时解析 class 字符串，只在构建阶段静态扫描 content 配置里列出的文件。你从 Tailwind UI 复制一段 HTML，存成 src/components/FeatureCard.html 或 src/pages/Home.tsx，但 tailwind.config.js 里还是默认的 ["./src/**/*.{js,jsx,ts,tsx}"]，那 .html 就被彻底忽略。
- 如果用了
.html文件（比如 Vite 的静态页、Electron 主页），必须显式加进content："./src/**/*.html" - 如果粘贴到了
public/目录（如public/landing.html），Vite 默认不扫描它，得手动加上："./public/**/*.html" - 用 SvelteKit？
.svelte后缀不会被通配符自动包含，必须写成："./src/**/*.{svelte,js,ts}" - 路径写成
"../src/**/*"或"src/**/*"（缺./）会被 Tailwind 当作无效 glob 直接跳过
PostCSS 插件没加载，@tailwind 指令被当普通 CSS 注释
复制的组件代码里有 @tailwind base 这类指令，但浏览器看到的是空规则或报 Unknown at rule @tailwind，说明 PostCSS 没接管 CSS 编译流程。
- 确认
postcss.config.cjs存在且导出正确插件：module.exports = { plugins: { tailwindcss: {}, autoprefixer: {} } } - Vite 项目别漏装
@tailwindcss/vite插件（v4+ 推荐）；Next.js 项目确保next.config.js里有experimental: { appDir: true }且 PostCSS 配置未被覆盖 - 如果用
tailwindcssCLI 直接构建（如npx tailwindcss -i input.css -o output.css），命令里必须带--content参数，不能依赖配置文件自动读取 -
package.json设了"type": "module"？配置文件必须用.cjs扩展名，否则require()报错，PostCSS 插件加载失败
动态类名（如 class="text-${color}-500"）被 Purge 删除
Tailwind UI 官方示例有时带 JS 变量拼接类名，这类写法在构建时无法被静态分析到，结果就是 CSS 里压根没有 text-blue-500 这些规则。
- 高频组合建议预定义对象：
const textClasses = { primary: 'text-blue-500', danger: 'text-red-500' } - 必须用动态拼接？加
safelist显式声明：safelist: ['text-blue-500', 'text-red-500', /text-[a-z]+-500/]（注意正则要用斜杠包裹，不是字符串） - 避免写
safelist: ['/text-[a-z]+-500/']——引号里的斜杠会被当字面量，正则失效 - 开发期可临时设
TAILWIND_DISABLE_TOUCH=true触发全量生成，但别上生产
Monorepo 中子包引用路径错位
你在 packages/docs 里复制了 Tailwind UI 组件，但 tailwind.config.js 在 monorepo 根目录，content: ["../../packages/ui/src/**/*"] 在 packages/docs 下执行时会向上错一层。
- 每个子包必须有自己的
tailwind.config.js，路径基于__dirname构造：path.resolve(__dirname, '../ui/src/**/*.{js,ts,tsx}') - 禁用根目录统一配置——不同子包可能用不同版本 Tailwind，
contentglob 行为在 v3.4+ 有差异，混用必出问题 -
pnpm workspace:协议路径（如workspace:ui）不能直接塞进content数组，Tailwind 不解析它 - CI 构建时若进子包目录执行（如
cd packages/docs && pnpm build），process.cwd()变了，相对路径更不可靠
最常被忽略的一点：Tailwind UI 组件本身不带任何 CSS 文件，它完全依赖你本地 Tailwind 的构建产物。复制代码只是“调用接口”，真正干活的是你项目的 tailwind.config.js 和 PostCSS 流程——路径错一点，就全白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
