描述
在使用 Storybook 7.4.3 和 Tailwind CSS 时,遇到了一个问题。CSS 只部分创建,缺少了很多其他类。
重现步骤
- 确保已安装所有依赖项:
{
"dependencies": {
// ...
},
"devDependencies": {
// ...
}
}
- 在
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;
- 在项目根目录下运行以下命令启动 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*
3条答案
按热度按时间mspsb9vt1#
这个有什么更新吗?
1tu0hz3e2#
关于这个问题,我遇到了相同的问题。
kmpatx3s3#
在这里遇到了相同的问题。在storybook
8.0.5
上。DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.has-\[\:checked\]\:active\:bg-ezgreen-800:active:has(:checked), .has-\[\:checked\]\.pseudo-active\:bg-ezgreen-800.pseudo-active:has(:checked), .pseudo-active-all .has-\[\:checked\]\\:bg-ezgreen-800:has(:checked) { --tw-bg-opacity: 1; background-color: rgb(0 37 29 / var(--tw-bg-opacity)); }'.