Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions docs/src/app/(docs)/concepts/theming/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,40 @@ export function Page() {
</Tab>
</Tabs>

<Note>
If you wrap your Tailwind config with `withUt` and use Storybook with webpack,
Storybook may fail to resolve Node builtins that `withUt` imports. Map them in
`.storybook/main.ts` (merge `webpackFinal` into your existing export if you
already have one):

```ts
// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-webpack5";

const config: StorybookConfig = {
// ...your existing Storybook config
webpackFinal: async (config) => {
Comment thread
coderabbitai[bot] marked this conversation as resolved.
const nodeExternals = {
// commonjs form avoids webpack's default `var` externalsType
"node:path": "commonjs path",
"node:module": "commonjs module",
};
if (Array.isArray(config.externals)) {
config.externals.push(nodeExternals);
} else if (config.externals) {
config.externals = [config.externals, nodeExternals];
} else {
config.externals = nodeExternals;
}
return config;
},
};

export default config;
```

</Note>

<Note>
If you're not wrapping your config as shown above, you have to import our
stylesheet into your app. Otherwise, components will not look right.
Expand Down
Loading