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

【问题标题】：not able to use custom classes in @apply in scss file tailwind nextjs project?无法在 scss 文件 tailwind nextjs 项目的 @apply 中使用自定义类？
【发布时间】：2021-06-12 19:34:45
【问题描述】：

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

完整回购：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:\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”，

【问题讨论】：

我对 Tailwind 没有任何经验，但是，也许您在定义之前调用了 @apply overflow-inherit，因为 SASS 使用自上而下的控制流。即使在导入模块时，也应该按顺序导入。
查看github.com/andybroger/nextjs-tailwindcss/tree/jsx-tailwind
@Leo 我遵循了 tailwind 在他们的文档中提出的建议tailwindcss.com/docs/adding-new-utilities
@GorvGoyl 你找到解决方案了吗？编辑：在 git 中，我看到您采用了顺风插件方法，这是我想避免的:(
是的，我也不喜欢那样，但这似乎是迄今为止唯一的方法......见github.com/tailwindlabs/tailwindcss/discussions/3754#

标签： css sass next.js tailwind-css

【解决方案1】：

"files.associations": {
  "*.css": "postcss"
}

【讨论】：

能否请您添加一些有关您的代码 sn-p 的上下文，即添加它的位置

【解决方案2】：

我在 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;
}

【讨论】：