Tailwind CSS报错：`hover:rounded-xl`类不存在的原因及解决方案

• 检查Tailwind配置文件tailwind.config.js的content字段：确认你使用hover:rounded-xl的文件路径被纳入扫描范围，未被扫描到的文件中使用的类不会被Tailwind生成。rotate归属Transform核心插件、rounded归属Border Radius核心插件，二者默认均为启用状态，不存在单插件未加载问题。
• 检查自定义borderRadius配置：如果你的配置中自定义圆角值时未保留xl对应的配置，rounded-xl本身就不会生成，自然无法匹配hover:变体，可临时删除自定义borderRadius配置验证是否恢复正常。
• 匹配Tailwind版本检查变体配置：Tailwind 3默认已为所有核心插件开启hover变体，无需额外配置；如果你使用Tailwind 2.x版本，需要在配置的variants字段中为borderRadius添加hover支持，示例如下：

  // tailwind.config.js 2.x 版本配置示例
  module.exports = {
    variants: {
      extend: {
        borderRadius: ['hover'],
      }
    }
  }
  

• 调整CSS文件书写顺序：所有@import语句必须放在CSS文件最顶部，不能放在@tailwind指令之后，否则Tailwind无法提前解析引入的样式，正确顺序示例：

  @import './custom-styles.css';
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• 修正@apply语句的错误写法：@apply不支持直接调用带变体的类，如果是在自定义类中调用该类，需要把变体逻辑拆分到外层，示例如下：

  /* 错误写法 */
  .custom-btn {
    @apply hover:rounded-xl;
  }
  /* 正确写法 */
  .custom-btn {
    @apply rounded-lg;
  }
  .custom-btn:hover {
    @apply rounded-xl;
  }
  

• 检查PostCSS插件配置：确保你已经安装postcss-import插件，且在postcss.config.js中该插件的加载顺序在tailwindcss之前，这样才能保证所有@import语句在Tailwind处理CSS前完成解析，示例配置如下：

  // postcss.config.js
  module.exports = {
    plugins: [
      require('postcss-import'),
      require('tailwindcss'),
      require('autoprefixer'),
    ]
  }
  

• 清理构建缓存后重启开发服务，残留缓存可能导致新添加的类无法被正常生成。

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