zorn
What is the best way to get phx_live_storybook to use the same font as my site in the component on display?
I am just getting started playing around with phx_live_storybook and one of my early observations was that because I am not explicitly declaring a font in my button, it looks different in the storybook compared to how it looks on my site. Note I’m using Tailwind on my site which seems to by default apply a font-sans docs to the site.
I can “fix” this by configuring my component’s story with def container, do: :iframe. The documentation seems to recommend against this.
Two questions:
- Is there a better way I can get the font in my component stories to better match my site?
- If I do want to default to
:iframeis there a way I can do that globally and not need to configure it per story?
Marked As Solved
cblavier
I’m sorry, Michael, I missed your post!
I’m following the storybook tag on the forum now 
The following documentation gives you a few hints, even if its not super clear, I’ll improve it:
- declare a
sandbox_classin yourstorybook.exfile - apply this class to your application body element
This will make your components to be nested under a same class, whether they are living in the storybook or in your application.
Then the next step is to make TailwindCSS to use this class:
- in tailwind.config.js, use the
importantsetting with your sandbox class - then put all your custom CSS styles in the
utilitieslayer
Let me know if this helps!
Popular in Questions
Other popular topics
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
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
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.
Enabling companies to succeed by building software people love.
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!"