---
title: "Discussion on \"Configure next/font with Tailwind in Storybook\" | Hashnode"
description: "Discussion on \"Configure next/font with Tailwind in Storybook\". 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..."
url: "https://hashnode.com/posts/configure-nextfont-with-tailwind-in-storybook/66508fad6bb77e639c9d17f8"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Configure next/font with Tailwind in Storybook](https://blog.borristw.com/configure-nextfont-with-tailwind-in-storybook?utm_source=hashnode&utm_medium=feed)

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...

May 24, 2024 · 2 min read · blog.borristw.com  
Read the article

-   [#nextfont](https://hashnode.com/tag/nextfont)
-   [#tailwind-css](https://hashnode.com/tag/tailwind-css)
-   [#nextjs](https://hashnode.com/tag/nextjs)
-   [#storybook](https://hashnode.com/tag/storybook)
-   [#reactjs](https://hashnode.com/tag/reactjs)

## Written by

[Borris](https://hashnode.com/@linkb)

@linkb · Dubai, United Arab Emirates

  
[View profile](https://hashnode.com/@linkb)

Frontend Engineer

Tinkering projects by Night. Working as a Frontend developer by Day. Frontend enthusiast.

## Responses 2

Markdown supported · ⌘↵ to post

[Alex Mongeot](https://hashnode.com/@sandros99)

[Jun 19, 2024](https://hashnode.com/posts/configure-nextfont-with-tailwind-in-storybook/66508fad6bb77e639c9d17f8/comment/6672feb040be4e31a51dc3ed)

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.

[Borris](https://hashnode.com/@linkb)

[Jun 19, 2024](https://hashnode.com/posts/configure-nextfont-with-tailwind-in-storybook/66508fad6bb77e639c9d17f8/comment/6672feb040be4e31a51dc3ed#reply-667303db97e23f768e45e12e)

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.

[Borris](https://hashnode.com/@linkb)

[May 24, 2024](https://hashnode.com/posts/configure-nextfont-with-tailwind-in-storybook/66508fad6bb77e639c9d17f8/comment/6650ea0e10396a27fd370846)

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