Tailwind CSS JIT Not Compiling Classes Inside @layer指令

efzxgjgh  于 12个月前  发布在  其他
关注(0)|答案(2)|浏览(128)

我正在使用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编译器编译和应用。

ijxebb2r

ijxebb2r1#

@layer utilities内部定义的自定义实用程序类应该编译[...]
如果Tailwind在content文件globs或safelist覆盖的文件中找到与类名匹配的完整字符串,则自定义实用程序类将仅出现在编译的CSS中。请考虑检查content文件globs覆盖的文件中是否有h1-bold
在@layer实用程序中定义的自定义实用程序类应该由Tailwind的JIT编译器应用。
他们不应该这样做。浏览器的工作是将CSS规则应用于正确的元素。Tailwind只生成CSS规则。
根据Next.js的CSS处理规则,您可能还需要使用postcss-import配置构建时导入。这将对您的CSS结构进行一些更改:

/* globals.css */
@import "tailwindcss/tailwind.css";
@import "../styles/theme.css";

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

个字符
顺便说一句,你也可能希望完全避免@apply,正如Tailwind的创建者Adam Wathan所建议的那样:

忏悔:Tailwind中的apply特性基本上只存在于欺骗那些被长长的类列表推迟的人尝试框架。
你几乎不应该使用它。
重新使用你的实用程序垃圾HTML代替。

我可以绝对肯定地说,如果我从头开始Tailwind CSS,就不会有@​apply CSS。
行为是非常复杂的,每个人都在努力建立正确的心理模型,它应该做什么,它鼓励坏的CSS架构。

2w3kk1z5

2w3kk1z52#

我想明白了。原来这都是layout. tsx中导入管理不善造成的。
如果没有_app.js/ts文件,则需要直接在layout.tsx中处理导入
我知道我很蠢。

相关问题