CRA搭建的React TS项目配置Tailwind CSS后样式不渲染问题

核心问题是你项目里的react-scripts@^2.1.3版本太低，内置的是PostCSS 7，和你安装的Tailwind CSS v3、PostCSS 8、Autoprefixer 10这套依赖完全不兼容。全新CRA项目默认用5.x版本的react-scripts，内置PostCSS 8适配能力，所以同样的配置跑起来没问题。

方案1（推荐，适合长期维护）：升级react-scripts到兼容版本 #

直接把react-scripts升到5.x版本，原生适配PostCSS 8生态，你之前写的所有Tailwind配置都不用改：

• 执行升级命令

npm install react-scripts@^5.0.1

• 升级过程如果弹出其他依赖版本不兼容的提示，按控制台报错信息把对应依赖调到兼容版本就行，改完删了node_modules和lock文件重装，重启开发服务样式就正常了。

方案2（适合历史包袱重、没法升级react-scripts的项目）：换用PostCSS7兼容版Tailwind #

如果项目改造成本太高升不动react-scripts，就把现在装的高版本Tailwind相关依赖卸了，换兼容PostCSS7的版本：

• 先卸载不兼容的依赖

npm uninstall -D tailwindcss postcss autoprefixer

• 安装兼容版本依赖

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

• 之前写的tailwind.config.js、postcss.config.js、index.css里的Tailwind核心指令都不用动，重装依赖后重启服务就能生效。

如果按上面操作完还是没样式，挨个核对：

• 确认src/index.css是在项目入口src/index.tsx的最顶部引入的，避免被其他全局CSS的样式优先级覆盖
• 打开浏览器开发者工具，先看h1标签上有没有正常挂上underline类名，再看加载的index.css文件里有没有生成对应的下划线样式规则
• 你当前写的tailwind.config.js里的content配置是正确的，不要随便加额外的文件过滤规则，避免Tailwind扫描不到你的组件文件把类名裁掉。

内容的提问来源于stack exchange，提问作者C_Z_