Configure Tailwind with Storybook & Slice machine in Nextjs

Hello everyone,

I cloned the slice library starter nextjs repo and it works pretty well for now. I am encountering a problem which is not exactly related to prismic and the slice machine, but something that I am sure it will pop up in the future with other developers.

I installed Tailwind successfully and it runs well within my slice. The problem is that within storybook, there is no styling. Therefore, my screenshots & component library are not looking great.

Is there anything I could do to fix that? This is the first time I'm using storybook so there is a lot to learn

My repo: https://github.com/kb1995/slice-library-starter-next

Thanks,
Kris

Hey @kris thanks again for reaching out!

Indeed because Storybook does not run into the Next.js context adding TailwindCSS to Next.js doesn't make Storybook aware of it, you have to install TailwindCSS on Storybook's end too.

I'm not super familiar with the React ecosystem so I found some links that might help you set up TailwindCSS on Storybook:

Let me know if that helps! Happy to dig more into it~

1 Like

Thanks @lihbr - it took me some time to figure out, especially since I was trying to upgrade Storybook to its latest version which caused some dependency issues with Prismic Slices (I believe) but I got it working in the end!

Thanks for all the help.

Kris

1 Like

Nice Kris! Really happy you got it working, I'm looking forward to seeing your library!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.