Loading Tailwind config into Storybook in a monorepo structure

[TheMikeyRoss]

Summary

Hi all,

My team is migrating our UI kit library to a monorepo structure (here)

The current structure of the mono repo as like this:

- apps
- -- web (next.js app) Everything is working fine here
- packages
- -- components (the core of the repo and where everything is. The main tailwind.config.js lives here)
- -- storybook (everything works fine except the extended colors in tailwind.config.js)

I'm testing around and when I change --radius in /packages/components/styles.css the border-radius changes in the components displayed in the storybooks, which is a good sign. But there are other things from the tailwind config not working inside storybook, the ones I can tell are:

• colors
• animation

Is this possibly a tailwind issue or a storybook issue?

Any help is appreciated 🌹

Additional information

The packages/storybook/.storybook/main.ts is:

import type { StorybookConfig } from "@storybook/nextjs";
import path from "path";
import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  addons: [
    {
      name: "@storybook/addon-styling-webpack",
      options: {
        rules: [
          {
            test: /\.css$/,
            use: [
              "style-loader",
              { loader: "css-loader", options: { importLoaders: 1 } },
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    plugins: [
                      require("tailwindcss")(
                        path.resolve(
                          __dirname,
                          "../../components/tailwind.config.ts"
                        )
                      ),
                      require("autoprefixer")
                    ]
                  },
                  implementation: require.resolve("postcss")
                }
              }
            ]
          }
        ]
      }
    },
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-dark-mode"
  ],
  core: { disableWhatsNewNotifications: true },
  staticDirs: ["../public"],

  framework: { name: "@storybook/nextjs", options: {} },

  webpackFinal: async (config: any) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({ extensions: config.resolve.extensions })
    ];

    config.resolve.alias = {
      ...config.resolve.alias,
      "@elements": path.resolve(__dirname, "../../components/elements"),
      "@blocks": path.resolve(__dirname, "../../components/blocks")
    };

    return config;
  }
};

export default config;

Create a reproduction

https://github.com/sikka-software/Hawa/tree/monorepo

[TheMikeyRoss]

I tried using a tailwind preset but still the same problem

[TheMikeyRoss]

This issue might be related to it #19041

[TheMikeyRoss]

This issue might also be related to it #20616

[TheMikeyRoss]

This issue #15971 could also be related although a few years old

[chadi-kazan]

Having the same issue. did you find a way to make it work?

[Whax]

Here is a "dirty" workaround :

|--- packages
|------ my-beautiful-component-with-vue
|------ my-other-component
|------ storybook
|------------ tailwind.config.ts (symlink)
|------------ postcss.config.js (symlink)
|--- tailwind.config.ts
|--- postcss.config.js

1. Inside storybook

ln -s ../../tailwind.config.ts ../tailwind.config.ts
ln -s ../../postcss.config.js ../postcss.config.js

2. tailwind.config.ts

import type { Config } from "tailwindcss";

const packagesPath = new URL(".", import.meta.url).pathname;

export default {
  content: [`${packagesPath}/**/*.{vue,js,ts,jsx,tsx}`, "!./node_modules/**"],
  theme: {},
  plugins: [],
} satisfies Config;

Not the best way to do, but at least, storybook works x)