-
-
Notifications
You must be signed in to change notification settings - Fork 46
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Buttons in stories use serif fonts when using tailwind CSS #289
Comments
I've just run into this myself, it looks like the I've worked around it by putting the following in
As an aside, this happens in both the regular and iframe container strategies. |
Hey there, sorry for the late answer. I was able to reproduce the issue and I think the missing part is the I will amend the documentation and fix the generators. |
Hey @cblavier I have the exact same problem but I did set the important setting in Any idea, what could cause that ? |
I finally make it use my own font by adding this css in
|
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 |
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:
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.
The text was updated successfully, but these errors were encountered: