作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在我的全新元素中使用 Tailwind,每个实用程序都可以正常工作,但 @apply 甚至无法编译。
这是错误消息:
Syntax Error: SyntaxError friendly-errors 08:12:30
(5:5) `@apply` cannot be used with `.lg\:mt-0` because `.lg\:mt-0` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.lg\:mt-0` 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.
3 | @import 'tailwindcss/components';
4 | .navbar-item-link {
> 5 | @apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;
| ^
6 | }
7 | /* purgecss end ignore */
/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
.navbar-item-link {
@apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;
}
/* purgecss end ignore */
@import 'tailwindcss/utilities';
module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer")
]
};
最佳答案
你不能在@apply 方法中使用伪类前缀
而不是这个
.navbar-item-link {
@apply text-xs mt-1 lg:mt-0 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100 hover:border-blue-best-100;
}
// Normal State
.navbar-item-link {
@apply text-xs mt-1 px-3 no-underline text-gray-600 rounded-full border-solid border border-gray-100;
}
// Hover State
navbar-item-link:hover{
@apply border-blue-best-100;
}
// Large Screen
@screen lg {
.navbar-item-link{
@apply mt-0;
}
}
关于css - Tailwind 的指令 @apply 不适用于 Nuxt,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61407335/
我是一名优秀的程序员,十分优秀!