Tailwind CSS JIT 未编译 @layer 指令内的类

Question

我正在使用启用了 JIT 模式的 Tailwind CSS 开发 Next.js 项目。我遇到了一个问题，即在 theme.css 文件中的 @layer 实用程序块内定义的自定义实用程序类未按预期进行编译和应用。但是，当这些类在 @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;
}

全局.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:继承；font-weight:继承；）。但是，当在 @layer 实用程序外部定义时，自定义样式会正确应用。

预期行为： @layer 实用程序中定义的自定义实用程序类应由 Tailwind 的 JIT 编译器进行编译和应用。

Answer 1

内部定义的自定义实用程序类

@layer utilities

应该被编译[…]

仅当 Tailwind 在

content

 文件 glob 或 

safelist

 覆盖的文件中找到与类名匹配的完整字符串时，

自定义实用程序类才会出现在已编译的 CSS 中。考虑检查

h1-bold

文件团覆盖的文件中是否有

content

。

@layer 实用程序中定义的自定义实用程序类应该 […] 由 Tailwind 的 JIT 编译器应用。

他们不应该。将 CSS 规则应用到正确的元素是浏览器的工作。 Tailwind 仅生成 CSS 规则。