React项目按Tailwind v2官方文档安装后样式不生效问题咨询

我严格按照Tailwind CSS v2官方的Create React App集成指南完成操作，但Tailwind样式完全没生效，请问这是什么原因？官方文档会不会有问题？以下是我的操作截图：

Tailwind CSS v2的CRA集成指南本身没问题，样式不生效大概率是操作细节遗漏，按以下步骤逐一排查：

• 核对CSS导入与引用
  确认src/index.css内的Tailwind指令完全正确：

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

  同时检查该CSS文件是否已被正确导入到src/index.js中（即存在import './index.css';语句），注意路径拼写不要出错。

• 验证Tailwind配置文件的Purge路径
  tailwind.config.js里的purge配置必须覆盖CRA项目所有页面和组件的路径，正确配置示例：

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

  路径错误会导致Tailwind无法识别需要保留的样式，甚至在开发环境也无法正常加载。

• 检查依赖版本兼容性
  Tailwind v2对postcss和autoprefixer版本有要求：

  • tailwindcss需为^2.0.0及以上版本
  • postcss需为^8.0.0（Tailwind v2不兼容postcss 7，旧版CRA可能需要额外处理）
  • autoprefixer需为^10.0.0及以上版本
    版本不匹配时，卸载后重新安装对应版本：

  npm uninstall tailwindcss postcss autoprefixer
  npm install tailwindcss@^2.2.19 postcss@^8.4.16 autoprefixer@^10.4.13
  

• 确认PostCSS配置文件位置与内容
  postcss.config.js必须放在项目根目录，内容需为：

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

  若将该文件放在src目录下，PostCSS会无法读取配置。

• 重启开发服务器
  修改配置文件后，必须重启npm start才能让新配置生效，这是容易忽略的基础操作。

• 排查开发环境Purge强制开启问题
  若开发环境样式消失，检查tailwind.config.js的purge配置是否手动添加了enabled: true——Tailwind v2默认开发环境不启用Purge，强制开启会导致所有样式被清空。

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