我在 Laravel app.css 中定义 Tailwind 活动/悬停类时出错

Posted 2023-03-07

【中文标题】我在 Laravel app.css 中定义 Tailwind 活动/悬停类时出错

【英文标题】：I got error defining Tailwind's active/hover classes in Laravel's app.css

【发布时间】：2021-12-01 15:27:33

【问题描述】：

我想在我的 Laravel 8 应用程序中应用 tailwind-starter-kit 我从 html-login-page/login.html 文件中获得了编辑器表单，并且该表单的“登录”页面具有类：

<button class="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"
        type="button" style="transition: all 0.15s ease 0s;">
    Sign In
</button>

我想在 resources/css/app.css 中设置类定义，如下所示。

.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;

但我收到以下错误。

(623:39) /project_path/resources/css/app.css active:bg-gray-700 类不存在，但hover:bg-gray-700 存在。如果你确定 active:bg-gray-700 存在，确保任何 @import 在 Tailwind CSS 看到您的 CSS，因为@apply 只能用于同一 CSS 树中的类。

621 | 第622章.btn_frontend_submit_w_full 第623章@apply bg-gray-900 text-white active:bg-gray-700 text-sm font-bold 大写 px-6 py-3 圆形阴影 hover:shadow-lg 大纲-无焦点：大纲-无 mr-1 mb-1 w-full； | ^ 第624章 第625章|

在 processResult (/project_path/node_modules/webpack/lib/NormalModule.js:743:19) ...

子编译中有 1 个错误（使用 'stats.children: true' 和 '--stats-children' 了解更多详细信息）

【问题讨论】：

确保您在tailwind.config.js中为背景属性启用了active或hover变体

看起来不像。请问，网址我该怎么做？

【参考方案1】：

您可以在 tailwind.config.js 文件的变体部分控制是否为插件启用悬停变体。 active: 前缀仅在元素处于活动状态时适用于实用程序。

// tailwind.config.js
module.exports = 
  // ...
  variants: 
    extend: 
        backgroundColor: ['hover','active'],
    
  ,