Create React App中Tailwind CSS类未生效问题求助

下面是几个关键排查点，按顺序检查：

1. 移除index.css中多余的指令 #

Tailwind CSS v3已废弃@tailwind variants指令，保留会导致编译异常。修改后的index.css应为：

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

2. 确认PostCSS配置文件正确配置 #

在项目根目录创建postcss.config.js，让Create React App识别Tailwind插件：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. 检查CSS文件的引入路径 #

• 如果你用PostCSS自动编译（推荐方式），确保src/index.js中引入的是src/index.css：

  import './index.css';
  

• 若手动执行了npx tailwindcss -i ./src/index.css -o ./dist/output.css，则需在src/index.js中替换为引入生成的文件：

  import '../dist/output.css';
  

  注意：手动编译无法在开发时自动更新样式，建议改用PostCSS自动处理方案。

4. 补充tailwind.config.js的扫描路径 #

Tailwind需要扫描公共HTML文件中的类名，在content数组中添加public/index.html路径：

content: [
  "./public/index.html",
  "./src/App.jsx",
  "./src/*.{js,jsx}",
  "./src/**/*.{js,jsx}",
  "./src/components/**/*.{js,jsx}",
],

（移除了src目录下不必要的html后缀，因为Create React App的HTML文件存放在public目录）

5. 确保用正确命令启动开发服务 #

使用npm start启动Create React App的开发服务器，这样PostCSS才能在开发过程中自动编译Tailwind样式。

完成以上步骤后重启开发服务器，Tailwind的CSS类应该就能正常生效了。

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