时间戳

首页 > 解决方案 > 我在 Laravel 的 app.css 中定义 Tailwind 的活动/悬停类时出错

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

问题描述

我想在我的 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.cssactive: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 圆形阴影悬停:shadow-lg 轮廓-无焦点:轮廓-无 mr-1 mb- 1 w-满；| ^ 624 | 625 |

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

1 子编译中的错误（使用“stats.children：true”或“--stats-children”获取更多详细信息）

标签： phplaraveltailwind-css

解决方案

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

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

推荐阅读