Tailwind的指令@apply Nuxt不起作用

Question

我正试图在我的全新项目中使用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 */

我的tailwind.css文件：

/* 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';

我已经安装了postss-cli并使用postss.config.js，如下所示：

module.exports = {
plugins: [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer")
]
};

但这些都不起作用。

Answer 1

您不能将伪类前缀与@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;
}
}

以下是有关它的更多信息

https://tailwindcss.com/docs/extracting-components/#extracting-css组件与应用

https://tailwindcss.com/docs/functions-and-directives/#screen