kalkatfyodor
I don’t understand the difference between phoenix.css and app.css. In app.css I have phx-something classes. Why aren’t they in the phoenix.css file? Why isn’t app.css blank for my custom styling?
To be honest I have no idea where should I put my custom CSS styling, phoenix.css or app.css?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Deploy Phoenix to your own VPS with PaaS ease: push-to-deploy, zero downtime, auto SSL, managed Postgres. 14-day free trial at potions.io
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #ai
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #blog-post
- #ecto-query
- #elixirconf-us
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Bringing learning, work and compliance together since 1987.
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!"
Showing Posts 1 to 4- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
benwilson512
app.css
Phoenix code will apply those classes to various DOM elements automatically, like when a live view page disconnects. However, it’s up to you what it should look like when those classes are applied. Thus, since it is “custom code” of a sort, it goes in app.css. When you generate a new project, Phoenix generates a good default for you, just as it does with lots of other code.
kalkatfyodor
Exactly. To me it doesn’t make sense at all. All phx-something alert-something classes should be in phoenix.css and app.css should be almost empty or perhaps have some basic styling.
The current setup is bad design and utterly confusing.
I have decided to ditch the phoenix.css file altogether and use only app.css but then I came to this error: From my 5 css files only app.css is being compiled to the static folder
LostKobrakai
phoenix.cssis the styling used so code generated by the phoenix generators doesn’t look ****. If you don’t intend to use the default UI you can delete the whole file as is. The LV related classes inapp.cssare indendend to be kept even if you scrap the default UI. They’re meant to be updated, but not removed, given they’re essential for the UX of LV pages. No need to searchphoenix.cssfor essential vs non-essential pieces of css.I can see a case being made that the alert classes should be part of phoenix.css, but tbh I also just delete them once I don’t use them anymore, just like
phoenix.css.benwilson512
It’s best to hand out such comments sparingly
@LostKobrakai I think has done an excellent explanation here that really gets at the heart of the goal. A good example today would be Bulma. Bulma is a very popular javascript free CSS framework. If you want to use bulma in a phoenix project it’s super easy: just delete
phoenix.cssand add the core bulma files and you’re done.Notably:
app.csswill still contain aphx-disconnecteddefinition, why? Because this is still a class you need to have a definition for regardless of whether you’re using the phoenix styles or not.