无法通过故事书 UI 实时应用顺风类,例如,通过 bg-red-600
中的 Prop classes
更改按钮的颜色到 bg-red-100
不会更改故事书 ui 中按钮的颜色,是否可以从 UI 更改按钮的颜色以查看它的外观? (组件在应用程序中按预期工作,只是不在故事书中)
不确定这是否与清除或 JIT 编译有关 https://github.com/tailwindlabs/tailwindcss/discussions/6347
故事书用户界面
按钮组件
<button
type="button"
className={clsx(
"rounded-full py-2 px-3",
classes,
disabled ? "disabled:opacity-25" : ""
)}
onClick={onClick}
>
tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
button.stories.tsx
ButtonComponent.args = {
label: "Button",
classes: "bg-red-600",
disabled: false,
};
预览.js
import "!style-loader!css-loader!postcss-loader!tailwindcss/tailwind.css";
import "../styles/globals.css";
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
};
main.js
module.exports = {
stories: [
"../components/**/*.stories.mdx",
"../components/**/*.stories.@(js|jsx|ts|tsx)",
],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
{
name: "@storybook/addon-postcss",
options: {
cssLoaderOptions: {
// When you have splitted your css over multiple files
// and use @import('./other-styles.css')
importLoaders: 1,
},
postcssLoaderOptions: {
// When using postCSS 8
implementation: require("postcss"),
},
},
},
],
framework: "@storybook/react",
staticDirs: ["../public"],
};
package.json
开发依赖
"devDependencies": {
"@babel/core": "^7.17.7",
"@babel/eslint-parser": "^7.17.0",
"@fullhuman/postcss-purgecss": "^4.1.3",
"@storybook/addon-actions": "^6.5.0-alpha.51",
"@storybook/addon-essentials": "^6.5.0-alpha.51",
"@storybook/addon-interactions": "^6.5.0-alpha.51",
"@storybook/addon-links": "^6.5.0-alpha.51",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/react": "^6.5.0-alpha.51",
"@storybook/testing-library": "^0.0.9",
"@testing-library/dom": "^7.30.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^10.4.7",
"@testing-library/user-event": "^12.8.3",
"@types/node": "^17.0.21",
"@types/react": "^17.0.40",
"autoprefixer": "^10.4.4",
"babel-loader": "^8.2.3",
"clsx": "^1.1.1",
"enzyme": "^3.11.0",
"eslint": "8.4.1",
"eslint-config-next": "^12.1.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-storybook": "^0.5.7",
"faker": "^5.4.0",
"history": "^5.0.0",
"html-webpack-plugin": "^5.5.0",
"imports-loader": "^2.0.0",
"jest": "^26.6.3",
"jest-axe": "^6.0.0",
"lodash": "^4.17.21",
"postcss": "^8.4.12",
"postcss-import": "^14.1.0",
"storybook-addon-next": "^1.6.2",
"tailwindcss": "^3.0.23",
"typescript": "^4.2.4"
},
最佳答案
tailwind 中有一个名为安全列表的配置。 此选项表示顺风类在实时和 DOM 中发生变化时不适用。
阅读:https://tailwindcss.com/docs/content-configuration#safelisting-classes
您需要将特定类添加到安全列表中才能申请在 DOM 中实时更改。
您可以通过将此配置添加到您的 tailwind.config.js
来将所有顺风类添加到安全列表:
module.exports = {
safelist: [
{
pattern: /^(.*?)/,
},
],
// ...
}
关于reactjs - Tailwind 3.0.23 类未在故事书中实时应用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71641943/