hectorperez
CSS import below Tailwind does not work
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!
Marked As Solved
LostKobrakai
@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.
Also Liked
aiwaiwa
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";
aiwaiwa
It looks like a great project indeed!
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"