@apply 在 tailwindcss 中不工作 |全局 css 文件中的 Next.js答案

【问题标题】：@apply not working in tailwindcss | Next.js in global css file@apply 在 tailwindcss 中不工作 |全局 css 文件中的 Next.js
【发布时间】：2021-08-31 06:24:40
【问题描述】：

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

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

@apply 没有在 Nextjs 中使用 tailwindcss 唤醒 css 全局文件，我也使用了 jit 模式但仍然无法正常工作，需要帮助... enter image description here

【问题讨论】：

标签： reactjs next.js tailwind-css

【解决方案1】：

@apply 是一种在通用 CSS 文件中使用由 Tailwind 指令制作的自定义 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));
}

另外，以下link 将对您有所帮助。祝你好运，编码愉快！

【讨论】：

【解决方案2】：

在当前版本 (v2.1.4) 中，无法 @apply JIT 生成的类。
来自documentation：

您只能@apply 属于核心的类、由插件生成或在@layer 规则中定义的类。 您不能@apply 未在@layer 规则中定义的任意 CSS 类。

您可以添加new color in config。
例如 blue: '#06202A' 而不是@apply bg-blue。

【讨论】：

【解决方案3】：

相反，只需尝试添加

@tailwind apply;

它应该按预期工作。

【讨论】：

【解决方案4】：

过去我也遇到过类似的问题。这是我的代码-

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

@layer components {
  .link {
         @apply cursor-pointer hover:underline;
        }
  .button {
            @apply p-2 text-xs md:text-sm bg-gradient-to-b from-yellow-200 to- 
            yellow-400 border border-yellow-300 rounded-sm focus:outline-none 
            focus:ring-2 focus:ring-yellow-500 active:from-yellow-500;
         }
}

我找到了一个解决方案（比如技巧）。兄弟，你只需要保存它并重新启动你的服务器。并看到魔术发生。一切顺利，愿你摆脱错误

【讨论】：