整合Tailwind CSS與 Storybook
1. 設定 PostCSS
Tailwind 使用 PostCSS 編譯您的 CSS。如果您正在使用
vite@storybook/nextjs@storybook/preset-create-react-app與react-scripts@2.0.0@storybook/angular
那麼您可以跳到下一步。
對於 Webpack 使用者，您需要安裝 @storybook/addon-styling-webpack 擴充功能。
執行以下腳本以安裝並註冊擴充功能
npx storybook@latest add @storybook/addon-styling-webpack這將執行一個設定腳本，引導您完成擴充功能的設定。如果出現提示，請從設定選項中選擇 PostCSS。
設定腳本失敗了嗎？
在底層，此命令執行 npx @storybook/auto-config styling，它負責讀取您的專案並嘗試為您所需的工具設定您的 Storybook Webpack。如果直接執行該命令無法解決您的問題，請考慮在 @storybook/auto-config 儲存庫上提交錯誤報告，以便我們進一步改進它。有關 PostCSS 的手動設定說明，您可以參考此處的文件。
2. 將 Tailwind 提供給 stories
現在您可以將 tailwind.css 檔案匯入到您的 .storybook/preview.js 檔案中。這將使 Tailwind 的樣式類別適用於您的所有 stories。
// .storybook/preview.js
import '../src/tailwind.css'; // replace with the name of your tailwind css file2.1. Angular
如果您正在使用 Angular，您將需要改為將 tailwind.css 檔案新增到您的 angular.json 檔案中。這將確保您的樣式使用 PostCSS 處理，並注入到呈現 stories 的預覽 iframe 中。
// angular.json
{
"storybook": {
"builder": "@storybook/angular:start-storybook",
"options": {
"browserTarget": "my-default-project:build",
"styles": ["src/tailwind.css"]
}
}
}3. 新增主題切換工具
Tailwind 開箱即用，提供淺色和深色主題。您可以覆寫這些主題並新增更多主題。為了充分利用您的 stories，您應該有一種在所有主題之間切換的方法。
首先，更新您的 tailwind.config.js 檔案，以根據類別或 data-attribute 變更主題。此範例使用 data-attribute。
// tailwind.config.js
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
// Toggle dark-mode based on .dark class or data-mode="dark"
darkMode: ['class', '[data-mode="dark"]'],
theme: {
extend: {},
},
plugins: [],
};接下來，安裝 @storybook/addon-themes 擴充功能以提供切換工具。
執行以下腳本以安裝並註冊擴充功能
npx storybook@latest add @storybook/addon-themes這將執行一個設定腳本，引導您完成擴充功能的設定。
設定腳本失敗了嗎？
在底層，這會執行 npx @storybook/auto-config themes，它應該讀取您的專案並嘗試使用正確的裝飾器設定您的 Storybook。如果直接執行該命令無法解決您的問題，請在 @storybook/auto-config 儲存庫上提交錯誤報告，以便我們進一步改進它。若要手動新增此擴充功能，請安裝它，然後將其新增到 .storybook/main.ts 中的 addons 陣列。
3.1. 依類別名稱切換主題
從 @storybook/addon-themes 將 withThemeByClassName 裝飾器新增到您的 Storybook。
// .storybook/preview.js
import { withThemeByClassName } from '@storybook/addon-themes';
/* snipped for brevity */
export const decorators = [
withThemeByClassName({
themes: {
light: 'light',
dark: 'dark',
},
defaultTheme: 'light',
}),
];3.2. 依 data-attribute 切換主題
從 @storybook/addon-themes 將 withThemeByDataAttribute 裝飾器新增到您的 Storybook。
// .storybook/preview.js
import { withThemeByDataAttribute } from '@storybook/addon-themes';
/* snipped for brevity */
export const decorators = [
withThemeByDataAttribute({
themes: {
light: 'light',
dark: 'dark',
},
defaultTheme: 'light',
attributeName: 'data-mode',
}),
];此程式碼將建立一個新的工具列選單，以選擇您 stories 的所需主題。
參與貢獻
現在您已準備好將 Tailwind 與 Storybook 一起使用。🎉
如果您在工作中使用 Tailwind，我們很樂意您協助讓此設定更輕鬆。加入 Discord 中維護者的行列以參與貢獻，或跳到擴充功能文件。
- ShaunEvening
