@import some attribute not work in @layer tailwindcss

Destructing the file and all import to the tailwindcss.css file. It failed when i import from other file instead write it in tailwind.css.

Use layer to apply custom font family and text-3xl (working in this way)

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

@import from outside css file, it cannot work as usual. The font-heading is work, but font-size(text-3xl) is not working.

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

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

What i guess:

1. it load @import css first before load @tailwind base, default base will overwrite my h1 font-size to tailwindcss default.

Do any workaorund could avoid this behavior in tailwindcss? it look messy if all style in tailwindcss file.