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
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 the style tags and didn't see any that would be tailwind.css
For 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:
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:
the file name from postcss.config.mjs to postcss.config.js
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
The text was updated successfully, but these errors were encountered: