开发者问题收集

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

2021-10-13
1225

我想在我的 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 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)

1个回答

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

976525797
2021-10-25