CSS import below Tailwind does not work

Check out Tailwind’s @layer directive.

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!

I feel I led you to a wrong direction, @import inside @layer is a PostCSS instruction apparently. Relatively simple instruction and not working! Duh
So apparently it should work in-between tailwind imports, and yet you are saying it doesn’t.

I’ve tested it on a simple file, and other.css seems to be imported at the right place - after components and before utilities. Certainly, no tree shaking happening.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "other.css";
@import "tailwindcss/utilities";

Wait, @import tailwind does works:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

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

Yet, @tailwind doesn’t:

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

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

I’ll @import tailwind. Thanks!

@import is a css/postcss feature and those imports can only be added at the top of any css file. Using @tailwind essentially means the following @imports are no longer at the top of the file.

I get it now, thank you for explaining it!

It looks like a great project indeed!

Glad that you like Notesclub!