CSS import below Tailwind does not work

Phoenix Forum Questions / Help
,
1

Hi!

This does NOT work in my phoenix app:

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

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

Yet, this does:

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

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

If it helps, you can see my PR with the changes — including the content of markdown.css and code.css.

Tailwind’s commands should be at the top so they don’t override my custom CSS, right?

Any idea why it doesn’t work? Thanks!

2

Check out Tailwind’s @layer directive.

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!

4

I feel I led you to a wrong direction, @import inside @layer is a PostCSS instruction apparently. Relatively simple instruction and not working! Duh :smiley:
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";
1 Like
5

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!

6

@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.

3 Likes
7

I get it now, thank you for explaining it!

8

It looks like a great project indeed!

1 Like
9

Glad that you like Notesclub!