layer - @import 某些属性在 @layer tailwindcss 中不起作用

Question

破坏文件并全部导入到tailwindcss.css 文件中。当我从其他文件导入而不是将其写入tailwind.css 时它失败了。

使用图层应用自定义字体系列和 text-3xl（以这种方式工作）

// tailwind.css
@tailwind base;
@layer base {
  h1 {
    @apply font-heading text-3xl;
  }
}

@import 从外部 css 文件，它不能像往常一样工作。字体标题有效，但字体大小(text-3xl)无效。

@tailwind base;
@layer base {
  @import "./fonts/index.css";
}

// fonts/index.css
h1 {
  @apply font-heading text-3xl
}

我猜什么：

1. 它在加载@tailwind base之前先加载 @import css ，默认 base 会将我的h1字体大小覆盖为 tailwindcss 默认值。

是否有任何工作可以避免 tailwindcss 中的这种行为？如果 tailwindcss 文件中的所有样式都看起来很乱。

标签： layertailwind-css