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.