Configure Tailwind with Storybook & Slice machine in Nextjs

Developing with Prismic
1

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: GitHub - kb1995/slice-contest: A starter to create your slice library with Next.js

Thanks,
Kris

2

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
3

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
4

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

1 Like
5

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