CSS import below Tailwind does not work

Questions & Help Questions
, ,
3

Thanks @aiwaiwa.

Can I use @import within a @layer directive?

The following does NOT work:
app.css

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

@layer base {
  @import "./markdown.css";
}

@layer utilities {
  @import "./code.css";
}

The following does NOT work either:
app.css:

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

@import "./markdown.css";
@import "./code.css";

markdown.css:

@layer base {
  .markdown h1 {
    @apply pb-2 text-4xl;
  }
  ...
}

code.css:

@layer utilities {
  .highlight .hll {
    background-color: #49483e
  }
  ...

Yet, this did work:
app.css:

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

@layer base {
  .markdown h1 {
    @apply pb-2 text-4xl;
  }
...
}

@layer utilities {
  .highlight .hll {
    background-color: #49483e
  }
...
}

So can’t I use @import inside @layer?
Or am I doing something wrong?
Thanks!