無法在 scss 文件 tailwind nextjs 項目的 @apply 中使用自定義類？

Question

我正在嘗試在tailwind next.js項目中使用自定義 class overflow:inherit為@apply overflow-inherit ，但它拋出錯誤。 但是，我可以@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",
• “薩斯”：“^1.32.8”，
• "postcss": "^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 驗證

"css.validate": false,

或“用戶/settings.json”

"css.validate": false,

喜歡這個鏈接