Discussion on "Configure next/font with Tailwind in Storybook"

Borris · 2024-05-24T13:01:33.881Z

Next.js has font optimization option using their package next/font using google fonts and local. When adding a storybook to a Next.js project, you will start to wonder on how we can achieve the same font to be loaded into the storybook itself as well...

Hi Borris, thanks for this very nice blog post! If I may suggest a simple improvement, since this decorator is run before rendering each Story, you can add, out of the preview scope, a boolean variable that becomes true once the classes have been added to the body. You can then check the value of this variable on subsequent runs of the decorator and return early if the classes have already been added. Even if the cost of a classList.add isn't that important, this would help your technique scale better as the number of Stories grows.

Definitely interesting idea, will definitely try it out. The story rendering part should be isolated, so it should be new afresh on every story - hence I will have to check if the class is being reset or not on each story rendering. Thanks for the suggestion - will keep up to date with this as well after trying it out.

As simple as that to configure the next/font with your storybook

Search Hashnode

Configure next/font with Tailwind in Storybook

Responses2