求助：SvelteKit中Tailwind CSS正常，但Storybook中无法生效

算力阿峰

2026-7-8

解决SvelteKit Storybook中Tailwind CSS不生效的问题

检查Storybook的Tailwind配置

直接在.storybook目录下创建tailwind.config.js，复用项目根目录的配置即可：
```
// .storybook/tailwind.config.js
module.exports = require('../tailwind.config.js');
```

配置Storybook的PostCSS

在.storybook目录下新建postcss.config.js，添加Tailwind和autoprefixer插件：

// .storybook/postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

导入Tailwind基础样式到Storybook

打开.storybook/preview.js，导入项目中的Tailwind入口样式文件（路径根据实际情况调整）：
```
// .storybook/preview.js
import '../src/app.css';
```

验证Storybook主配置文件

检查.storybook/main.js（或.ts），确保已正确添加PostCSS插件：

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
  ],
  framework: {
    name: '@storybook/sveltekit',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};