[component-library-styled-components] issue with Storybook.

[Rhym]

Hi there, just wanted to say amazing project! Loving using it so far. I used your component-library-styled-components with Next.js example and then added Storybook as you have in the storybook-styled-components-typescript example.

In my project, I extend tailwind's config to add custom colours e.g: base, primary, secondary, etc... My issue is that compiling the monorepo requires that a package must have the babelMacros inside it's respective package.json but when Storybook imports those packages they seem to conflict somehow and remove the custom tailwind config. Removing the babelMacros from the package.json for a package fixes the issue when you want to run Storybook, but then it will have to be re-added when you want to compile the project as a whole.

I was hoping you'd have some idea of why this may happen, as the error logs only say that the generated classes for the custom colours don't exist e.g: "bg-base-100 was not found. Did you mean bg-blue-100".

Cheers!

[ben-rogerson]

Great to hear you're enjoying twin :)

The problem sounds like the twin config isn't being picked up. If you're defining the twin config in package.json then it'll use the package.json closest to where you start your server.

Sometimes there are some issues with paths to the twin config in monorepos, so perhaps you could try something like this to refer to the root tailwind.config.js from within your packages:

// babel-plugin-macros.config.js
const { resolve } = require("path");

module.exports = {
  twin: {
    preset: "styled-components",
    config: resolve(__dirname, "../../", "tailwind.config.js"),
  },
};