[Bug]: tailwind styles not loading for a next.js app

[AlexFrazer]

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 did npm 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:

import type { Preview } from '@storybook/react';
import '../src/app/globals.css';

export default {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
} satisfies Preview;

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:

@tailwind base;
@tailwind utilities;
@tailwind components;

@layer components {
  a {
    @apply outline-2 outline-primary-200 active:outline-none;
  }
}

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

1. Create a new next app npx create-next-app@latest test-tailwind
2. Initialize storybook in the project with npx storybook@latest init
3. in the .storybook/preview.tsx, import the stylesheet under src/app/globals.css. Make some changes to it for extra effect
4. Make a story that will use some of the styles specified in your src/app/globals.css, and some tailwind styles (such as .flex .flex-col)
5. Check the iframe in storybook

System

Storybook Environment Info:

  System:
    OS: macOS 14.3
    CPU: (11) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm <----- active
  Browsers:
    Chrome: 124.0.6367.208
    Safari: 17.3
  npmPackages:
    @storybook/addon-essentials: ^8.1.1 => 8.1.1
    @storybook/addon-interactions: ^8.1.1 => 8.1.1
    @storybook/addon-links: ^8.1.1 => 8.1.1
    @storybook/addon-onboarding: ^8.1.1 => 8.1.1
    @storybook/addon-themes: ^8.1.1 => 8.1.1
    @storybook/blocks: ^8.1.1 => 8.1.1
    @storybook/nextjs: ^8.1.1 => 8.1.1
    @storybook/react: ^8.1.1 => 8.1.1
    @storybook/test: ^8.1.1 => 8.1.1
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.1.1 => 8.1.1

### Additional context

_No response_

[shilman]

Did you run:

npx storybook@latest add @storybook/addon-styling-webpack

From the instructions?

[AlexFrazer]

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

[yuki-katayama]

@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:

1. the file name from postcss.config.mjs to postcss.config.js
2. postcss.config.js change below content

/** @type {import('postcss-load-config').Config} */
const config = {
  plugins: {
    tailwindcss: {},
  },
};

module.exports = config;

details::

1. 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:

2. 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: