我在 Laravel 的 app.css 中定义 Tailwind 的 active/hover 类时出错

Question

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

<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 中设置 class 定义，如下所示。

.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 The active:bg-gray-700 class does not exist, but hover:bg-gray-700 does. If you're sure that active:bg-gray-700 exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

621 | 622 | .btn_frontend_submit_w_full { 623 | @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; | ^ 624 | } 625 |

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

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)

Answer 1

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

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

我在 Laravel 的 app.css 中定义 Tailwind 的 active/hover 类时出错

I got error defining Tailwind's active/hover classes in Laravel's app.css

php

laravel

tailwind-css

我在 Laravel 的 app.css 中定义 Tailwind 的 active/hover 类 时出错

I got error defining Tailwind's active/hover classes in Laravel's app.css

php

laravel

tailwind-css

我在 Laravel 的 app.css 中定义 Tailwind 的 active/hover 类时出错