Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
TheBenevolentJoker opened this issue Jun 7, 2024 · 0 comments
Open

Comments

@TheBenevolentJoker
Copy link

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_
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant