phenixdigital/phoenix_storybook

Buttons in stories use serif fonts when using tailwind CSS

hrvelic opened this issue · 5 comments

hrvelic commented

OS: macOS Monterey 12.6.5
Elixir: 1.14.3-otp-25
Phoenix: 1.7.1
LiveView: 0.18.18
Tailwind: 3.3.1
Phoenix Storybook: 0.5.2
Browsers tested: Brave (Chrome), Firefox

Steps to reproduce:

  1. Create a Phoenix project.
  2. Add Phoenix Storybook to the project.
  3. Run phoenix and go to core component button stories generated by storybook by default. All buttons will show serif fonts.

Setting fonts in CSS files using utilities layer will not change anything.

Current workaround is to always create a container for stories with buttons with "font-sans" class on it, but this is both tedious and error-prone.

stuartc commented

I've just run into this myself, it looks like the .lsb-sandbox class overrides the html selector that Tailwind uses to set the default font.

I've worked around it by putting the following in storybook.css:

.lsb-sandbox {
  font-family: inherit !important;
}

As an aside, this happens in both the regular and iframe container strategies.

  • 👍2
cblavier commented

Hey there, sorry for the late answer.
I'm working again on the storybook for a few weeks, so I can now help :)

I was able to reproduce the issue and I think the missing part is the important setting in tailwind.config.js
It should be set to a value matching the sandbox_class parameter in storybook.ex file.

I will amend the documentation and fix the generators.

pochampagne commented

Hey @cblavier

I have the exact same problem but I did set the important setting in tailwind.config.js, matching the sandbox_class parameter in my storybook.ex

Any idea, what could cause that ?

pochampagne commented

Hey @cblavier

I have the exact same problem but I did set the important setting in tailwind.config.js, matching the sandbox_class parameter in my storybook.ex

Any idea, what could cause that ?

I finally make it use my own font by adding this css in storybook.css

.lsb-sandbox {
  font-family: inherit !important;
  -webkit-font-smoothing: auto !important;
}
cblavier commented

The idea is that anything rendered by the storybook is sandboxed, and won't be polluted by any styles defined by the storybook library itself.

The fact that your components render with a serif font is due to the fact that sandbox is working well, and CSS in the sandbox is properly reset

Feel free to have a look at the demo repository to get an example: https://github.com/phenixdigital/phoenix_storybook_demo/blob/main/assets/css/app.css