You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've set up a Next.js application and initiated Storybook using the command npx storybook@latest init. The setup completed without issues, and the Storybook environment started successfully with npm run storybook.
Following the Tailwind CSS integration guide, I attempted to import the global.css file into the preview.tsx file as suggested.
Upon navigating to Storybook, I noticed that none of the Tailwind CSS styles were applied. I conducted a thorough search for a stylesheet that might contain the Tailwind class names, but my efforts were fruitless.
Reproduction link
n/a
Reproduction steps
Create a New Next.js Application:
Execute the command npx create-next-app@latest test-tailwind to generate a new Next.js app named 'test-tailwind'.
Initialize Storybook:
Run npx storybook@latest init within the project directory to set up Storybook.
Import Global Stylesheet:
In the .storybook/preview.tsx file, import the global stylesheet located at src/app/globals.css. Modify the stylesheet to observe the changes effectively.
Develop a Story:
Craft a story that incorporates specific styles from src/app/globals.css as well as Tailwind utility classes like .flex and .flex-col.
Inspect the Storybook Iframe:
Review the Storybook iframe to ensure that the styles are applied correctly.
Describe the bug
I've set up a Next.js application and initiated Storybook using the command npx storybook@latest init. The setup completed without issues, and the Storybook environment started successfully with npm run storybook.
Following the Tailwind CSS integration guide, I attempted to import the global.css file into the preview.tsx file as suggested.
Upon navigating to Storybook, I noticed that none of the Tailwind CSS styles were applied. I conducted a thorough search for a stylesheet that might contain the Tailwind class names, but my efforts were fruitless.
Reproduction link
n/a
Reproduction steps
Execute the command npx create-next-app@latest test-tailwind to generate a new Next.js app named 'test-tailwind'.
Run npx storybook@latest init within the project directory to set up Storybook.
In the .storybook/preview.tsx file, import the global stylesheet located at src/app/globals.css. Modify the stylesheet to observe the changes effectively.
Craft a story that incorporates specific styles from src/app/globals.css as well as Tailwind utility classes like .flex and .flex-col.
Review the Storybook iframe to ensure that the styles are applied correctly.
System
The text was updated successfully, but these errors were encountered: