tailwind 样式不生效的主因是 content 路径未覆盖 tsx 文件、postcss 插件未正确加载或动态类名未被静态扫描到；需配置 "./src/*/.{js,jsx,ts,tsx}"、使用 @tailwindcss/postcss 插件，并通过 safelist 预声明动态类名。
content 路径没配对，Tailwind 就当那些类名不存在
Tailwind 不是运行时解析 class 字符串，而是在构建阶段扫描源码里**字面量出现的类名**。如果 tailwind.config.js 的 content 字段没覆盖到你的 TSX 文件，bg-blue-500 这种写法就根本不会被提取进最终 CSS —— DOM 里能看到 class，但浏览器查不到对应样式规则。
- 必须显式包含
.tsx扩展名："./src/**/*.{js,jsx,ts,tsx}"，漏掉tsx就等于把整个 React 组件目录排除在外 - 路径用 glob 模式，别写相对路径如
../src/App.tsx，Tailwind 不识别这种写法 - 如果用了 MDX、.astro 或自定义组件库，也要加进
content，比如"./src/**/*.mdx" - Vite 用户注意：Vite 默认不扫描
public/下的 HTML，若在public/index.html写了 Tailwind 类，需手动加入content
类名在 JSX 里拼着写，Tailwind 也看不见
className={`p-4 ${isHovered ? 'bg-red-500' : 'bg-gray-200'}` 这种写法没问题，但 className={`from-${color}-500`} 就失效 —— 因为 from-blue-500 这个完整字符串从未以字面量形式出现在源码中。
- 动态插值（
${...}）、变量拼接、eval类操作，全部绕过静态扫描 - 不是 bug，是设计：避免生成全量 CSS 导致打包体积爆炸
- 解决方案只有两个方向：预定义所有组合（如
{ primary: 'bg-blue-500', danger: 'bg-red-500' }），或用safelist显式声明高频动态值 -
safelist写法示例：safelist: ['from-blue-500', 'from-red-500', /from-[a-z]+-500/]，正则要加斜杠包裹
PostCSS 插件没加载，@tailwind 指令就是注释
哪怕 content 全对、类名全静态，如果 PostCSS 没调用 tailwindcss 插件，@tailwind utilities 这行就只是纯文本，不会生成任何 CSS 规则。
- Tailwind v4 起，PostCSS 插件已拆到
@tailwindcss/postcss，旧配置require('tailwindcss')会报错 - 检查
postcss.config.js是否含require('@tailwindcss/postcss')，而不是tailwindcss - CRA 用户注意：它默认禁用自定义 PostCSS 配置，需
eject或用craco注入插件 - Webpack 项目确认
css-loader的modules未开启，否则类名被哈希化，和 Tailwind 输出的原始类名对不上
React 19 + TSX 项目容易忽略的兼容点
React 19 的新特性（如 Actions、Document Metadata）本身不影响 Tailwind，但配套工具链升级常引发隐性断裂。
- 使用
create-react-app的老项目升级到 React 19，大概率仍卡在 Tailwind v3，因为 CRA 未适配 v4 的 PostCSS 插件分离 - TSX 中的 JSX 元素属性名（如
className）拼错成class，TypeScript 可能不报错但 Tailwind 完全不扫描 - 若用 Vite + React + TSX，确保
vite.config.ts中css.postcss正确透传配置，而非只靠tailwind.config.js - 开发服务器热更新后样式没变？先清
node_modules/.cache，Tailwind 的 content 缓存有时不自动失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
