Monorepo tailwind css configuration with multiple .storybook folder

[zigang93]

Summary

Problem:

Cannot load tailwind css in my ui packages.
but able to load tailwind css in my web app storybook with linked to my ui stories.

My folder structure:

├── .storybook
├── apps
│   └── web
│       ├── .storybook 
│       └── src
│           ├── pages
│           └── styles
├── packages
│   ├── eslint-config-custom
│   ├── tailwind-config
│   ├── tsconfig
│   └── ui
│       ├── .storybook /* Notes: cannot load tailwindcss */
│       ├── src
│       │   ├── components
│       │   │   └── BatteryLevel
│       │   └── styles
│       └── stories

My ui packages's storybook: ( tailwind css not loaded )

My web app's storybook: ( tailwind css loaded )

Additional information

UI packages

ui's main.ts

import type { StorybookConfig } from '@storybook/nextjs'
import { dirname, join } from 'node:path'

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-onboarding'),
    getAbsolutePath('@storybook/addon-interactions'),
    getAbsolutePath('@storybook/addon-themes'),
    getAbsolutePath('storybook-dark-mode'),
  ],
  core: {
    disableTelemetry: true,
  },
  framework: {
    name: getAbsolutePath('@storybook/nextjs'),
    options: {
      strictMode: true,
      // enable it when storybook is getting bigger, trade off is each story need to load
      builder: {
        // lazyCompilation: true,
        // fsCache: true,
        // useSWC: true, // Enables SWC support
      },
    },
  },
}
module.exports = config
/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
}

ui's preview.tsx:

import { DocsContainer } from '@storybook/addon-docs'
import type { Preview } from '@storybook/react'
import { themes } from '@storybook/theming'
import { ComponentProps } from 'react'
import { useDarkMode } from 'storybook-dark-mode'
import '../src/styles/styles.css'
const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    docs: {
      container: ({
        children,
        context,
      }: ComponentProps<typeof DocsContainer>) => {
        const isDark = useDarkMode()
        return (
          <DocsContainer
            context={context}
            theme={isDark ? themes.dark : themes.light}
          >
            {children}
          </DocsContainer>
        )
      },
      source: {
        state: 'open',
        excludeDecorators: true,
      },
    },
    darkMode: {
      current: 'light',
      // Override the default dark theme
      dark: { ...themes.dark, appBg: 'black' },
      // Override the default light theme
      light: { ...themes.light, appBg: 'white' },
      stylePreview: true,
    },
    options: {
      showToolbar: true,
    },
  },
}

export default preview

---

Web app

web's main.ts:

import type { StorybookConfig } from '@storybook/nextjs'
import { dirname, join } from 'node:path'

const config: StorybookConfig = {
  stories: [
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
    '../../../packages/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-onboarding'),
    getAbsolutePath('@storybook/addon-interactions'),
    getAbsolutePath('storybook-dark-mode'),
  ],
  core: {
    disableTelemetry: true,
  },
  framework: {
    name: getAbsolutePath('@storybook/nextjs'),
    options: {
      strictMode: true,
      // enable it when storybook is getting bigger, trade off is each story need to load
      builder: {
        // lazyCompilation: true,
        // fsCache: true,
        // useSWC: true, // Enables SWC support
      },
    },
  },
}
module.exports = config
/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
}

web's preview.tsx:

import { DocsContainer } from '@storybook/addon-docs'
import type { Preview } from '@storybook/react'
import { themes } from '@storybook/theming'
import { ComponentProps } from 'react'
import { useDarkMode } from 'storybook-dark-mode'

import '../src/styles/globals.css'

const preview: Preview = {
  parameters: {
    // actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    docs: {
      container: ({
        children,
        context,
      }: ComponentProps<typeof DocsContainer>) => {
        const isDark = useDarkMode()
        return (
          <DocsContainer
            context={context}
            theme={isDark ? themes.dark : themes.light}
          >
            {children}
          </DocsContainer>
        )
      },
      source: {
        state: 'open',
        excludeDecorators: true,
      },
    },
    darkMode: {
      current: 'light',
      // Override the default dark theme
      dark: { ...themes.dark, appBg: 'black' },
      // Override the default light theme
      light: { ...themes.light, appBg: 'white' },
    },
    options: {
      showToolbar: true,
    },
    
  },
  decorators: [
    (Story) => {
      return (
        <Story />
      )
    },
  ],
}

export default preview

Create a reproduction

https://github.com/zigang93/monorepo-sb-tailwind

[anicioalexandre]

We're having the same issue on our monorepo's packages (with pnpm) :/