tailwind 3.0.23 类未在故事书中实时应用

Question

无法通过 Storybook UI 实时应用 Tailwind 类，例如，通过classes这里的 props 更改按钮的颜色从bg-red-600到bg-red-100不会改变 Storybook ui 中按钮的颜色，是否可以更改用户界面中的按钮看看它会是什么样子？（组件在应用程序中按预期工作，只是不在故事书中工作）

不确定这是否与清除或 JIT 编译有关https://github.com/tailwindlabs/tailwindcss/discussions/6347

storybook ui

button component

<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,
};

preview.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"
  },

Answer 1

Tailwind 中有一个配置称为安全列表。该选项表示，顺风类在实时和 DOM 发生变化时不适用。

阅读： https: //tailwindcss.com/docs/content-configuration#safelisting-classes

您需要将特定的类添加到安全列表中才能申请 DOM 和实时更改。您可以通过将此配置添加到您的tailwind.config.js：

module.exports = {
  safelist: [
    {
      pattern: /^(.*?)/,
    },
  ],
  // ...
}