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 …

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

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: …

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 …

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 …

I get it now, thank you for explaining it!

It looks like a great project indeed!

Elixir Programming Language Forum

CSS import below Tailwind does not work

Questions & Help Questions

aiwaiwa March 27, 2023, 10:37pm 2

Check out Tailwind’s @layer directive.