storybook8でtailwind cssを利用する。

動作環境

"next": "15.0.3"
"storybook": "8.4.6"
"tailwindcss": "^3.4.1"
"typescript": "^5"

.storybook/preview.tsを編集する。

import type { Preview } from "@storybook/react";
+ import '@/app/globals.css'; //global.cssの相対パスを指定

const preview: Preview = {
 parameters: {
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/i,
     },
   },
 },
};

export default preview;

アドオンのインストール(もしかしたらこれはいらないかも？)

npx storybook@latest add @storybook/addon-styling-webpack

デフォルトのままだとstyleがおかしくなるのでglobal.cssを修正しておく。

@tailwind base;
@tailwind components;
@tailwind utilities;

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}