Next.js中Tailwind的focus变体与@apply指令失效问题求助

核心原因 #

1. focus:shadow-outline 类已被废弃：Tailwind CSS v3 移除了 shadow-outline 系列类，替换为 ring 相关样式类（你在组件中使用的 focus:ring、focus:ring-offset-2 就是官方替代方案），这个类本身不存在，因此触发报错。
2. 自定义类未放入 @layer 指令：直接在全局样式中定义 .btn 而不包裹在 @layer components 中，Tailwind 无法正确解析 @apply 引用的工具类和状态变体，会触发严格的类存在性检查。

解决步骤 #

步骤1：替换废弃的类 #

把 .btn 中的 focus:shadow-outline 替换为你需要的 ring 系列类，比如和组件中一致的样式：

focus:ring focus:ring-blue-600 focus:ring-opacity-50 focus:ring-offset-2

步骤2：将自定义类放入 @layer components #

修改 globals.css，把 .btn 类包裹在 @layer components 中，确保 Tailwind 正确处理样式：

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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-rgb: 255, 255, 255;
}

body {
  color: rgb(var(--foreground-rgb));
  background: rgb(var(--background-rgb));
}

@layer components {
  .btn {
    @apply mt-6 shadow bg-blue hover:bg-light-blue-500 focus:ring focus:ring-blue-600 focus:ring-opacity-50 focus:ring-offset-2 focus:outline-none text-white font-bold py-2 px-4 rounded;
  }
}

注意：这里把 hover:bg-lightBlue-500 改为 hover:bg-light-blue-500，因为 Tailwind 的颜色类采用短横线命名（kebab-case），驼峰式的 lightBlue 无法被识别。

步骤3：验证配置（可选） #

检查你的 tailwind.config.ts，当前自定义的 blue 颜色配置没问题；如果需要使用 light-blue-500，它属于 Tailwind 默认颜色，无需额外定义。

补充说明 #

组件中直接使用类没问题，是因为你根本没用到 focus:shadow-outline，而是用了正确的 ring 系列类；而自定义类中引用了不存在的类，加上未放入 @layer，才触发了报错。

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