在全局 CSS 文件中，tailwindcss 的 @apply 指令无效 | Next.js

Question

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

@layer base{
body {
    @apply bg-[#06202A] text-grey-300; 
}
}

@apply在Nextjs中的全局CSS文件中与tailwindcss不兼容，我已经尝试使用JIT模式，但仍然无法正常工作，需要帮助...请看这里的图片描述

- Muhammad Akif

---

请点击以下链接，获取最新的Tailwind和Next.js解决方案：[https://stackoverflow.com/questions/67679410/nextjs-not-able-to-use-custom-colors-in-tailwind-css-in/70121053#70121053] - sommer

请点击此链接获取最新答案：https://stackoverflow.com/questions/67679410/nextjs-not-able-to-use-custom-colors-in-tailwind-css-in/70121053#70121053 - sommer

Answer 1

@apply 是一种使用自定义的 Tailwind 指令制作的 CSS，在常规 CSS 文件中使用的方法。因此，在使用它之前必须先声明 bg-[#06202A]。

在使用之前，您需要在 TailwindCSS 文件中预定义它。以下是可能的解决方案。

解决方案1

@layer base{
   body {
       --body-bg-color: '#06202A';
       @apply bg-var(--body-bg-color) text-grey-300; 
   }
}

解决方案2

body {
   --body-bg-color:'#06202A';
   --tw-text-opacity: 1;
   background-color: var(--body-bg-color);
   color: rgba(209, 213, 219, var(--tw-text-opacity));
}

此外，以下链接对您会有所帮助。 祝你好运，编程愉快！

- JsWizard

Answer 2

相反，只需尝试添加

@tailwind apply;

并且它应该按预期工作。

- Junaid Rasheed

---

你能进一步解释吗？ - afhamu

Answer 3

在当前版本（v2.1.4）中，无法使用JIT生成的类进行@apply。
来自文档：

您只能@apply核心部分、插件生成或在@layer规则内定义的类。 您不能@apply未在@layer规则内定义的任意CSS类。

您可以添加配置文件中的新颜色。
例如 blue: '#06202A' 然后您可以@apply bg-blue。

- Jax-p