tailwind 3.0.23 classes not being applied in real time in storybook

user_3226932 0
Viewed 977

not able to apply tailwind classes via storybook UI in real time, for example, changing the color of a button through the props classes here from bg-red-600 to bg-red-100 doesn't change the color of the button in the storybook ui, is it possible to change the color of the button from the UI to see what it would look like? (component works as expected in app, just not in the storybook)

not sure if this is related to purging or JIT compilation https://github.com/tailwindlabs/tailwindcss/discussions/6347

storybook ui

enter image description here

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 dev dependencies

  "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"
  },
postcss storybook tailwind-css next.js reactjs
1 Answers

There is a config in tailwind called safelisting. This option said that tailwind classes don't apply when they change in real time and DOM.

read: https://tailwindcss.com/docs/content-configuration#safelisting-classes

you need to add specific classes to safelist to apply for changing in DOM and real-time. you can add all of tailwind classes to safe list by adding this config to your tailwind.config.js:

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