[Bug]: Tailwind CSS Styles Not Applying in Next.js Application

[TheBenevolentJoker]

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.

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;

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

1. 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'.
2. Initialize Storybook: Run npx storybook@latest init within the project directory to set up Storybook.
3. 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.
4. 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.
5. Inspect the Storybook Iframe: Review the Storybook iframe to ensure that the styles are applied correctly.

System

Storybook Environment Info:

  System:
    OS: macOS 14.3.1
    CPU: (11) arm64 Apple M2
    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_

[mdugue]

facing the same issue. @TheBenevolentJoker any news here?

[musjj]

Same issue here. I have imported the my Tailwind css file and I can see the css variables from the file (e.g. --background) being applied, but none of the actual Tailwind classes are being compiled.

Does anyone have a solution?