cal/apps/storybook/postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    /**
     * We use this postcss plugin to create custom css classes for
     * any pseudo classes (eg hover, focus) mentioned below.
     * This way you can eg show a hover state in Storybook by adding
     * this classname .sb-pseudo--hover to the item.
     *
     * These styles will only be added in storybook, and will NOT
     * end up in the final css bundle of apps using the components.
     */
    "postcss-pseudo-companion-classes": {
      prefix: "sb-pseudo--",
      // We have to keep a restrictTo list here, because otherwise
      // this library will have issues processing tailwind's \: prefixed classes
      // and start adding dots everywhere, breaking this functionality.
      restrictTo: [":hover", ":focus"],
    },
  },
};