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

Question

无法通过故事书 UI 实时应用顺风类，例如，通过道具

classes

更改按钮的颜色，从

bg-red-600

到

bg-red-100

不会更改故事书中按钮的颜色ui，是否可以从 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中有一个配置叫做safelisting。 这个选项表示顺风类在实时和 DOM 变化时不适用。

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

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

tailwind.config.js

:

来将所有顺风类添加到安全列表中

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

Answer 2

首先您需要阅读本节以了解 Tailwind 的工作原理：https://tailwindcss.com/docs/content-configuration#configuring-source-paths

Tailwind CSS 的工作原理是扫描所有 HTML、JavaScript 组件以及类名的任何其他模板文件，然后 为这些样式生成所有相应的 CSS。

为了让 Tailwind 生成您需要的所有 CSS，它需要 了解项目中包含任何内容的每个文件 Tailwind 类名称。

这意味着，如果您希望 Tailwind 了解您在 Storybook 组件中使用的实用程序类，您需要将该目录添加到 Tailwind 配置的

content

部分。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
    './stories/**/*.{tsx,ts} // this is the location to your storybook components
  ],
  // ...
}

这将确保 Tailwind 实时扫描您的组件。