无法在scss文件tailwind nextjs项目中使用@apply中的自定义类

Question

我试图在tailwindnext.js项目中使用自定义类overflow:inherit作为@apply overflow-inherit，但它引发了错误。然而，我可以像@apply flex flex-col md:h-full h-screen;一样预先构建@apply顺风类，但不能自定义。

全额回购：https://github1s.com/GorvGoyl/Personal-Site-Gourav.io

tailwind.scss:

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
@variants responsive {
.overflow-inherit {
overflow: inherit;
}
}
}

project.module.scss:

.css {
:global {
.wrapper-outer {
@apply overflow-inherit; //trying to apply custom utility
}
}
}

错误：

wait  - compiling...
event - build page: /next/dist/pages/_error
error - ./layouts/css/project.module.scss:4:6
Syntax error: C:Users1gourPersonal-Siteproject.module.scss The `overflow-inherit` class does not exist, but `overflow-hidden` does. If you're sure that `overflow-inherit` 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.
2 |   :global {
3 |     .wrapper-outer {
> 4 |       @apply overflow-inherit;
|      ^
5 |     }
6 |   }

postss.config.js:

module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

• "下一个"："10.0.7">
• "tailwindcss"："2.0.3">
• "sass"："1.32.8〃
• "邮政编码"："8.2.6">

Answer 1

我的Laravel项目也遇到了同样的问题。

我认为postcss对我来说不够。所以在webpack.mix.js中，我删除了以下

mix.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);

并将其替换为sass，就像这个一样

mix.sass("resources/css/app.scss", "public/css").options({
postCss: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
], });

现在，我有一些很酷的功能，包括你想要的

我甚至不需要使用@layer

在我的scss文件中，我可以将@apply和@extend组合起来，它可以进行

.btn-my-theme{
@apply rounded border py-2 px-3 shadow-md hover:shadow-lg;
}
.btn-my-primary{
@extend .btn-my-theme;
@apply text-blue-600 bg-blue-200 hover:bg-blue-100 border-blue-500;
}
.btn-my-secondary{
@extend .btn-my-theme;
@apply text-gray-600 bg-gray-200 hover:bg-gray-100 border-gray-500;
}

Answer 2

在"Workspace/.vscode/settings.json"；

"css.validate": false,

或"；User/settings.json"；

"css.validate": false,

像这个链接