How to install Storybook outside of a NextJS & Tailwind project

35 Views Asked by At

Init

I have a project made with NextJS and TailwindCSS. Everything's working absolutely fine.

The goal

I want to install storybook next to my NextJS project, so the structure is as follow:

my-project
-- next
---- src
------ ...
-- storybook
---- .storybook
------ ...

The issue

Storybook runs, finds my components and my stories. But the styles are not applied, although they're applied on my front site.

I paid attention in the my-project/storybook/.storybook/main.ts file to the stories path (each stories will be next to the associated component):

const config: StorybookConfig = {
  ...
  stories: ["../../next/src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  ...
};

and in the my-project/storybook/.storybook/preview.ts file to import properly the tailwindcss style:

import "../../next/src/app/globals.css";

but no style in storybook.
The only way to apply the styles is to import the built ones in my-project/storybook/.storybook/preview.ts file:

import "../../next/.next/static/css/app/layout.css";

but this is not a lasting solution.

What solutions would you have to offer me? Thanks a lot!

0

There are 0 best solutions below