如何在 Storybook 中加入 TailwindCSS

Oct 07, 2021

以往在設立 CRA、Vue、Vite、Next 的專案時，往往都會有 npx --template 可以使用，然而 Storybook 縱使有 npx sb init，也無法幫我們自動插入 TailwindCSS 的設定。這篇文章將跟大家分享如何在 Storybook 裡使用 TailwindCSS。（如果你是使用 CRA 請參考這一篇¹）

如果你是用 npx create-next-app -e with-tailwindcss my-project 架起整個專案，你將自帶 PostCSS8 的設定²。然而 Storybook 當前的預設值為 PostCSS7，為了讓兩者兼容，我們將使用 @storybook/addon-postcss³ 來讓 Storybook 使用 PostCSS8。（幸好未來 Storybook 將 deprecated postCSS7 預設的設定⁴）

首先，安裝 postCSS8。

npm i --save-dev postcss@^8

在 root folder 創建 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

然後在 .storybook/main.js 中加入以下 addon

const path = require('path');

module.exports = {
  stories: ...
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
	
	/// 加入以下設定 ///
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
	///
	
  ],
};

並且在 .storybook/preview.js 中 import tailwind.css⁵

import 'tailwindcss/tailwind.css';

Voilà

這樣你就成功將 TailwindCSS 導入 Storybook 了

如何在 Storybook 中加入 TailwindCSS

Footnotes