Create React App中Tailwind CSS样式不显示问题求助

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

• 核对craco.config.js配置
  Tailwind v2靠CRACO接管PostCSS配置，你的文件得是这个结构：

  module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  };
  

  另外注意CRACO版本要和Tailwind v2兼容，建议用@craco/craco@6.x系列。

• 检查tailwind.config.js的扫描路径
  Tailwind需要知道哪些文件里用了它的类才能生成对应样式，purge路径不能写错：

  module.exports = {
    purge: ['./src/**/*.{js,jsx}', './public/index.html'],
    darkMode: false,
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  };
  

  开发环境默认不清理未使用样式，但路径错了照样会导致样式生成失败。

• 确认index.css的导入和指令顺序
  在index.css里必须按顺序写这三行，不能乱：

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

  还要保证index.js里正确导入了这个CSS文件：import './index.css';

• 匹配依赖版本
  Tailwind v2对PostCSS和autoprefixer有版本要求，别装错了：

  • tailwindcss: 选v2.x稳定版（比如2.2.19）
  • postcss: ^8.0.0（v2必须用PostCSS 8）
  • autoprefixer: ^10.0.0
    可以直接运行这条命令安装兼容版本：

  npm install tailwindcss@2.2.19 postcss@8.4.21 autoprefixer@10.4.13 @craco/craco@6.4.3
  

• 检查启动命令是否用了CRACO
  打开package.json的scripts，必须把默认的react-scripts换成craco：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }
  

  要是还在用react-scripts start，CRACO的配置根本不会生效，Tailwind自然没反应。

• 验证编译后的CSS
  从你提供的元素截图看，Tailwind类没有对应的CSS规则，说明样式没生成。可以在浏览器开发者工具里打开index.css，看看是不是只有@tailwind指令，没有编译后的具体样式——如果是这样，就是PostCSS没正确处理Tailwind，回到前面的CRACO配置检查。

• 清理缓存试试
  有时候浏览器缓存或者React的缓存会搞事，试试：

  • 按Ctrl+Shift+R强制刷新浏览器
  • 关掉开发服务器，删除node_modules/.cache文件夹，再重新启动

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