整合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. 為 Stories 提供 Tailwind
現在您可以將 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. 依類別名稱切換主題
將 withThemeByClassName 裝飾器從 @storybook/addon-themes 新增至您的 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 切換主題
將 withThemeByDataAttribute 裝飾器從 @storybook/addon-themes 新增至您的 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
