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

Question

我正在尝试在项目中使用自定义类overflow:inherit，但它抛出错误。但是，我可以预先构建像但不是自定义的顺风类。@apply overflow-inherittailwind next.js@apply@apply flex flex-col md:h-full h-screen;

完整回购：https : //github1s.com/GorvGoyl/Personal-Site-Gourav.io

顺风.scss：

@tailwind base;
@tailwind components;
@tailwind utilities;

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

项目.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:\Users\1gour\Personal-Site\project.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 |   }

postcss.config.js：

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

• "下一个": "^10.0.7",
• "tailwindcss": "^2.0.3",
• "sass": "^1.32.8",
• "postcss": "^8.2.6",

Answer 1

在“Workspace/.vscode/settings.json”中设置 CSS 验证

"css.validate": false,

或“用户/settings.json”

"css.validate": false,

喜欢这个链接