StorybookでTailwindcssを適用させる

Next.jsのアプリケーションにStorybookを入れて動かしてみたがスタイルがあたっていなかったので調べて対応した

storybookのアドオンaddon-postcssを追加する

version

"storybook": "6.5.12"

addonの追加

yarn add -D @storybook/addon-postcss

.storybook/main.js

  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    }

.storybook/preview.js

+ import '../styles/globals.css';

このcssファイルはTailwindcssを読み込んでいるCSSファイルを指定する

関連記事

Profile

Account

RSS