我在Laravel的应用程序中定义Tailwind的活动/悬停类时出错。css

Question

我想在我的Laravel 8应用程序中应用顺风启动套件，我从html登录页面/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>

我想设置资源/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-grey-700类不存在，但是hover： bg-grey-700存在。如果您确定active： bg-gry-700存在，请确保在TailWind CSS看到您的CSS之前，任何@index语句都已被正确处理，因为@Application只能用于同一CSS树中的类。

621|622|.btn_frontend_submit_w_full{623|@应用bg-Grey-900文本-白色活动： bg-Grey-700文本-SM字体-粗体大写px-6 py-3圆形阴影悬停：阴影-lg轮廓-无焦点：轮廓-无mr-1 mb-1 w-满；|^624|} 625|

在processResult（/project\u path/node\u modules/webpack/lib/NormalModule.js:743:19）。。。

子编译中出现1个错误（有关详细信息，请使用“stats.children:true”resp.--stats children）

Answer 1

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

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