Open AlexFrazer opened 1 month ago
Did you run:
npx storybook@latest add @storybook/addon-styling-webpack
From the instructions?
yes I did that. I did find a workaround in one of the issues where I modify the styling webpack addon not to tree shake
@AlexFrazer
I fixed it by setting this
If you're facing issues with Tailwind CSS not being applied correctly in a Next.js project, you might need to adjust the module format of your PostCSS configuration file. Here are the steps to do so:
postcss.config.mjs
to postcss.config.js
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
module.exports = config;
details::
Rename the Configuration File: This switch changes the file from an ES module format to a CommonJS format, which is necessary if your project is not set up to handle ES modules by default. Modify the Export Style to CommonJS:
Update your configuration file to use CommonJS style exports. this change is how the postcss.config.js should be structured to include Tailwind CSS as a plugin using CommonJS syntax:
Describe the bug
I have a next app, and I ran the command
npx storybook@latest init
. Everything looks fine, and it ran when I didnpm run storybook
However, following the guide for Tailwind, I tried importing the global.css file in preview.tsx file, as recommended. My
preview.tsx
looks as follows:When I go to storybook, I don't see any of these styles applied. I looked for a stylesheet which could contain the tailwindcss classnames, but didn't find any
Inspecting the iframe that it was rendered in, I found the component
I would have expected to see those classnames somewhere in a stylesheet. I searched for
.flex
, but there was no styles. I searched through all of thestyle
tags and didn't see any that would be tailwind.cssFor a short term fix, I tried
import 'tailwindcss/tailwind.css'
instead, which, surprisingly, worked fine. However, this won't work for me because I have custom styles. Take for example the following configuration:And suppose I have a "link" component that is just an
a
tag. I will need this@layer components {}
directive to work to see it display correctly.To Reproduce
npx create-next-app@latest test-tailwind
npx storybook@latest init
.storybook/preview.tsx
, import the stylesheet undersrc/app/globals.css
. Make some changes to it for extra effectsrc/app/globals.css
, and some tailwind styles (such as.flex .flex-col
)System