開始使用

連結

• 文件
• 範例

需求

• Vue 3.0+
• Tailwind CSS
• Storybook

安裝套件

npm install storybook-tailwind-foundations

調整 ./storybook/main.js

const path = require('path');
const tailwindConfigPath = path.join(__dirname, '../tailwind.config.js'); // or your own config file
require('storybook-tailwind-foundations/initialize.js')
  .default(tailwindConfigPath);

module.exports = {
   // ...
  stories: [
    // ... 
    '../node_modules/storybook-tailwind-foundations/**/*.stories.js'
  ],
}

啟動 Storybook

如果您對 tailwind 配置進行任何變更，您需要重新啟動 Storybook 才能看到變更。現在您可以啟動 Storybook，並且 Foundations 區段應該會出現在側邊欄中。