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
Last Post!
hectorperez
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
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.
Error tracking for Elixir devs who love to ship. Start your free account.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"