描述

在使用 Storybook 7.4.3 和 Tailwind CSS 时，遇到了一个问题。CSS 只部分创建，缺少了很多其他类。

重现步骤

1. 确保已安装所有依赖项：

{
 "dependencies": {
  // ...
 },
 "devDependencies": {
  // ...
 }
}

2. 在 Main.ts 文件中配置 Storybook:

import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
 stories: ['../src/primitives/**/*.mdx', '../src/**/*.stories.@(ts|tsx|mdx)'],
 addons: [
  '@storybook/addon-essentials',
  '@storybook/addon-a11y',
  'storybook-addon-pseudo-states',
  '@storybook/addon-designs',
 ],
 docs: {
  autodocs: true,
 },
 framework: {
  name: '@storybook/nextjs',
  options: {},
 },
 staticDirs: ['../public', '../../../apps/site/public'],
};
export default config;

3. 在项目根目录下运行以下命令启动 Storybook:

npx storybook serve --config-path config/storybook-nextjs.js --dir stories --port=9000 --disableRouter --out-dir public/static/storybook-preview --host=0.0.0.0 --hotReloadAPI="%s" --quietOnInfo --no-font-loader --no-animations --webpackHotUpdatePathname=client --webpackDevServerURL=http://localhost:8080 --webpackDevServerOpenPage='/_storybook?page=%2Fapi%2Freact-router#default' --globalTypedComponents=true --preset=react-scripts --env-production --enable-preview --quietOnInstall && npx tailwindcss dev config/tailwindcss.config.js && npx @testing-library/react-hooks test --scripts-prepend-node-modules && npx jest && npx @storybook/addon-a11y/client/build && npx @storybook/addon-essentials/client/build && npx @storybook/addon-codeblock/client/build && npx @storybook/addon-links/client/build && npx @storybook/addon-notes/client/build && npx @storybook/addon-prismjs/client/build && npx @storybook/addon-react/client/build && npx @storybook/addon-scrollbar/client/build && npx @storybook/addon-settings/client/build && npx @storybook/addon-showdown/client/build && npx @storybook/addon-sourcerer/client/build && npx @storybook/addon-storyshots/client/build && npx @storybook/addon-thumbnails/client/build && npx @storybook/addon-twitter/client/build && npx @storybook/addon-unused-imports/client/build && npx @storybook/addon-whitespaces/client/build && npx @storybook/addons-commonjs | grep "Failed to execute 'insertRule' on" | xargs kill -9 && tailwindcss build config/tailwindcss.config.js && yarn start & tailscale connect & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start & yarn build & yarn start
// To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
 // and  [https://nx.dev/packages/storybook/documents/custom-builder-configs](https://nx.dev/packages/storybook/documents/custom-builder-configs)

**Create one component**

`import { type ComponentProps, type ReactNode } from 'react';
 import { type VariantProps, tv } from 'tailwind-variants';
type ButtonProps = ComponentProps<'button'> &
 VariantProps & {
 children: ReactNode;
 };
const buttonStyles = tv({
 base: 'bg-primary-100 hover:bg-primary-50 focus-visible:outline-primary rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
 variants: {},
 defaultVariants: {},
 });
const Button = ({
 className,
 children,
 testId = 'button',
 type,
 ...rest
 }: ButtonProps) => {
 return (
 <button className={buttonStyles({ className })} {...rest}>
 {children}
 );
 };
export { Button, buttonStyles, type ButtonProps };

**run storybook**

 `

#### System

Environment Info:

System:
OS: macOS 13.5.2
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
Browsers:
Chrome: 116.0.5845.187
Safari: 16.6
npmPackages:
@storybook/addon-designs: ^7.0.4 => 7.0.5
@storybook/addon-essentials: 7.4.3 => 7.4.3
@storybook/addon-storyshots: 7.1.0 => 7.1.0
@storybook/core-common: 7.4.3 => 7.4.3
@storybook/core-server: 7.4.3 => 7.4.3
@storybook/nextjs: 7.4.3 => 7.4.3

#### Additional context

* No response*