我正在使用Tailwind CSS并启用JIT模式的Next.js项目中工作。我遇到了一个问题，即在theme.css文件中的@layer utilities块中定义的自定义实用程序类无法按预期编译和应用。但是，当这些类在@layer指令之外定义时，它们可以正常工作。
theme.css（不工作）

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

@layer utilities {
  .h1-bold {
    @apply text-[30px] font-bold leading-[42px] tracking-tighter;
  }
}

字符串
theme.css（工作）

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

.h1-bold {
  @apply text-[30px] font-bold leading-[42px] tracking-tighter;
}

型
globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("../styles/theme.css");

body {
  font-family: "Inter", sans-serif;
}

型
我是Next.JS和Tailwind的新手。有人能给我指出正确的方向吗？为什么Tailwind CSS的JIT模式在这个场景中没有像预期的那样处理@layer指令中的类？是否有我可能遗漏的特定配置或项目设置？
观察到的行为：当.h1-bold在@layer实用程序中时，样式似乎会恢复为默认浏览器样式（如font-size：inherit; font-weight：inherit;）。但是当在@layer实用程序之外定义时，自定义样式会正确应用。
预期行为：在@layer实用程序中定义的自定义实用程序类应该由Tailwind的JIT编译器编译和应用。