Laravel 8中app.css用@apply定义Tailwind active类报错如何解决？

你使用的Tailwind CSS版本默认未为背景色类启用active状态变体，导致active:bg-gray-700类无法被识别，因此使用@apply调用时抛出不存在的错误。

有两种可用方案，按需选择即可：

方案1：手动启用active变体 #

• 打开项目根目录下的tailwind.config.js文件，追加对应变体配置：

// Tailwind v2 配置写法
module.exports = {
  // 保留你的原有配置不变，只修改variants部分
  variants: {
    extend: {
      // 给backgroundColor新增active变体支持
      backgroundColor: ['active'],
    },
  },
}

如果使用Tailwind v3版本，默认JIT模式已全量支持所有变体，若仍报错请检查配置文件中的content路径是否覆盖了resources/css/目录下的文件。

• 检查resources/css/app.css的导入顺序，Tailwind基础导入必须放在自定义类之前：

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

/* 所有自定义类写在上述三个导入语句之后 */
.btn_full {
    @apply bg-gray-900 text-white active:bg-gray-700 text-sm 
    font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg 
    outline-none focus:outline-none mr-1 mb-1 w-full;
    transition: all 0.15s ease 0s;
}

• 重新执行编译命令即可生效：

npm run dev

方案2：手动写active伪类样式（无需修改配置） #

如果不想改动Tailwind配置，直接拆分自定义类的写法即可，兼容性更强：

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

.btn_full {
    @apply bg-gray-900 text-white text-sm 
    font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg 
    outline-none focus:outline-none mr-1 mb-1 w-full;
    transition: all 0.15s ease 0s;
}
/* 单独写active状态的样式 */
.btn_full:active {
    @apply bg-gray-700;
}

写完直接重新编译即可正常使用。

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