sgardn
Hi folks - I’m trying to get up and running with phoenix-storybook so I can have a local sandbox to learn a little about LiveView while building increasingly complicated components.
However, I’m seeing something broken where after installation, my app.css file no longer seems to affect the rendered homepage at all.
I’ve done a fair bit of spot checking and I can’t see what’s diverging about how the page could be working
- the
app.cssfile is completely unchanged (I’ve diffed it) - it is present as a resource locally when hitting the “/” route (either on the branch or on
main) - it is included in the
<head>tag in the page HTML
Does anyone have ideas about what could be broken about my rendering pipeline?
Here’s a PR / diff if that’s easiest to leaf through: feat: install storybook by sgardn · Pull Request #3 · sgardn/unprompted · GitHub
Version info:
Elixir: 1.16.0
Erlang: 25.3.2.8
Phoenix Storybook: 0.6.0
Here’s a test repo and branch that’s forkable if anyone wants to look around: https://github.com/sgardn/unprompted/tree/install-storybook
I’ve also created an issue here, where I will followup if I learn anything useful in the meantime: bug: setting up storybook breaks homepage rendering (CSS) · Issue #426 · phenixdigital/phoenix_storybook · GitHub
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
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixirconf-us
- #ai
- #blog-post
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #hex
- #security
Our Sponsors
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, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Bringing learning, work and compliance together since 1987.
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!"
Showing Posts 1 to 2- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
cblavier
Hey @scott, I replied to you on GitHub!
sgardn
Ah thank you!
It looks like the solution is to add a CSS class generated based on the project name (
"foo-web") to the<body>tag in the root HTML file (which is likely located herelib/#{your_app_name}/components/layouts/root.html.heex).Though the number of lines of CSS happens to be the same (because the
.importantprefixer tailwind hack doesn’t do anything besides add a qualified CSS class), the contents do indeed differ.My mistake was diffing the raw CSS at
).
assets/css/app.cssacross branches - that file (for a newly created Phoenix app) just includes tailwind modules, and is 20 lines long. It and doesn’t actually represent the post processed CSS files (which I should have checked by downloading from dev toolsThe commit containing updated generator instructions is here: generator now explains to set the sandbox class on the body tag · phenixdigital/phoenix_storybook@be3295f · GitHub