在Tailwind Next.js项目的scss文件中，无法在@apply中使用自定义类？

Question

我想在tailwind的next.js项目中使用自定义类overflow:inherit，并将其作为@apply overflow-inherit使用，但这会导致错误。然而，我可以使用预构建的tailwind类，例如@apply flex flex-col md:h-full h-screen;，但不能使用自定义类。

完整的repo：https://github1s.com/GorvGoyl/Personal-Site-Gourav.io

tailwind.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",
• "Tailwind CSS": "^2.0.3",
• "Sass": "^1.32.8",
• "PostCSS": "^8.2.6",

- GorvGoyl

---

我没有使用Tailwind的经验，但是也许你在定义@apply overflow-inherit之前就调用了它，因为SASS使用自上而下的控制流。即使导入模块，它们也应该按顺序导入。 - Leo

请查看此链接 https://github.com/andybroger/nextjs-tailwindcss/tree/jsx-tailwind。 - Alessandro_Russo

@Leo 我按照Tailwind文档中建议的方法进行了操作 https://tailwindcss.com/docs/adding-new-utilities - GorvGoyl

@GorvGoyl，你已经找到解决方案了吗？编辑：在git中我看到你采取了tailwind插件方法，这是我想要避免的 :( - chojnicki

是的，我也不喜欢这种方法，但目前似乎只有这种方法了... 请参见https://github.com/tailwindlabs/tailwindcss/discussions/3754# - GorvGoyl

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'),
    ], });

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

甚至不需要在我的 SCSS 文件中使用 @layer。

我可以组合 @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;
}

- Yevgeniy Afanasyev

Answer 2

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

"css.validate": false,

或者 "用户/设置.json"

"css.validate": false,

像这样 链接

- yaozhixiang

---

请问您能否添加一些关于代码片段的上下文，例如应该在哪里添加？这与IT有关。 - GorvGoyl