[Bug]: 在storybook中使用tailwindcss时，预设：[xxx]不起作用,

wqsoz72f 于 4个月前发布在其他

关注(0)|答案(2)|浏览(39)

描述bug

我创建了两个vite react tailwindcss storybook项目，分别是project-one和project-two。在project-one的tailwind.config.js中创建了自定义样式，并将其导出到project-two中的tailwind.config.js中。我在project-two中定义的tailwind.config.js如下：

import * as uiCoreConfig from 'project-one';

/** @type {import('tailwindcss').Config} */
export default {
    presets: [uiCoreConfig],
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};
``` I found that it is working when run `npm run dev`, the div or p tag can use the customized style properly, but when it applied on storybook, it is not work. 

### Reproduction link

a

### Reproduction steps

_No response_

### System

```bash
a

附加信息

无响应*

storybook

来源：https://github.com/storybookjs/storybook/issues/28451

2条答案

按热度按时间

ecr0jaav1#

要解决在 Storybook 中 Tailwind CSS 预设不起作用的问题，请按照以下步骤操作：

在 .storybook/preview.js 中导入 Tailwind CSS:

import { Preview } from '@storybook/react';
+import '../src/index.css';

const preview: Preview = {
  parameters: { /* ... */ },
};

export default preview;

确保在 tailwind.config.js 中正确设置了 Tailwind CSS 配置:

import * as uiCoreConfig from 'project-one';

/** @type {import('tailwindcss').Config} */
export default {
    presets: [uiCoreConfig],
    content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

在 .storybook/main.js 中注册必要的插件:

export default {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
+   '@storybook/addon-themes',
  ],
};

在 withThemeByClassName 中添加装饰器:

import { Preview, Renderer } from '@storybook/react';
+import { withThemeByClassName } from '@storybook/addon-themes';
import '../src/index.css';

const preview: Preview = {
  parameters: { /* ... */ },
+ decorators: [
+  withThemeByClassName<Renderer>({
+    themes: {
+      light: '',
+      dark: 'dark',
+    },
+    defaultTheme: 'light',
+  }),
+ ]
};

export default preview;