Repository: storybook
Issue: [Bug]: tailwind styles not loading for a next.js app
Labels: question / support,nextjs,tailwind,addon: styling

### 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](https://storybook.js.org/recipes/tailwindcss), I tried importing the global.css file in preview.tsx file, as recommended. My `preview.tsx` looks as follows:

```typescript
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

<img width="922" alt="image" src="https://github.com/storybookjs/storybook/assets/1350392/d6c919ac-e2b2-4855-af11-c3b146f3d4c0">

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:

```css
@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

```bash
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_