React项目按流程配置Tailwind CSS后样式不生效如何解决

核心问题原因 #

样式不生效的根因是tailwind.config.js中的content扫描路径配置错误。
Create React App 脚手架默认将所有业务源码存放在src目录下，你当前配置的./pages/**/*、./components/**/*路径既没有匹配src目录前缀，也没有覆盖到src根目录下的App.js、index.js等入口文件，Tailwind 在编译阶段扫描不到你代码里写的text-orange-500这类工具类，就不会生成对应的CSS代码，最终样式失效。

修复步骤 #

• 第一步：打开项目根目录下的tailwind.config.js，将content字段替换为适配CRA项目的正确配置：

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 第二步：核对文件位置与内容
  确认你添加了Tailwind核心指令的index.css文件存放在src目录下，且文件内指令内容正确：

@tailwind base;
@tailwind components;
@tailwind utilities;

同时确认App.js顶部引入index.css的路径正确，没有写错相对路径。

• 第三步：重启开发服务
  终止当前正在运行的开发服务进程（终端按Ctrl+C即可），重新执行npm start启动项目，配置改动需要重启服务才能生效。

额外排查点 #

如果完成以上操作后样式仍未生效，可以做两项检查：

1. 你最开始执行进入目录的命令cd my app存在笔误，创建的项目名是myapp（中间无空格），确认你后续所有依赖安装、配置修改操作都是在myapp项目根目录下执行的，没有把配置文件写到其他错误目录。
2. 执行npm ls tailwindcss检查依赖安装状态，如果提示依赖缺失，重新执行npm install -D tailwindcss postcss autoprefixer安装依赖即可。

内容的提问来源于stack exchange，提问作者Syed Laeeq Ahmed