Repository: storybook
Issue: [Bug]: Failed to execute 'insertRule' on 'CSSStyleSheet' : Storybook 7.4.3 + TailwindCSS
Labels: bug,tailwind,sev:S2

### Describe the bug

Hi

Currently I am running into the following error when using Storybook 7.4.3 and Tailwind. Meaning my css only gets partially created, missing a lot of other classes.


DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.focus\:hover\:ring:hover:focus, .focus\.pseudo-hover\:ring.pseudo-hover.pseudo-focus, .pseudo-hover-all.pseudo-hover-all.pseudo-focus-all .focus\\:ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }'.
    at rewriteStyleSheet (http://localhost:4400/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-fbfd36.iframe.bundle.js:69444:15)
    at http://localhost:4400/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-fbfd36.iframe.bundle.js:69550:34
    at Array.forEach (<anonymous>)
    at rewriteStyleSheets (http://localhost:4400/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-fbfd36.iframe.bundle.js:69550:15)
    at Object.<anonymous> (http://localhost:4400/vendors-node_modules_storybook_addon-essentials_dist_actions_preview_mjs-node_modules_storybo-fbfd36.iframe.bundle.js:69554:85)
    at http://localhost:4400/sb-preview/runtime.js:4:95626
    at Array.forEach (<anonymous>)
    at Channel.handleEvent (http://localhost:4400/sb-preview/runtime.js:4:95610)
    at handler (http://localhost:4400/sb-preview/runtime.js:4:94698)
    at Channel.emit (http://localhost:4400/sb-preview/runtime.js:4:94753) null


### To Reproduce

**Package jSON**


  "dependencies": {
    "@formatjs/intl-localematcher": "^0.4.0",
    "@grpc/grpc-js": "^1.8.20",
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@nx/devkit": "16.5.0",
    "@nx/next": "16.5.0",
    "@radix-ui/react-select": "^1.2.2",
    "@schematics/angular": "^9.1.0",
    "@svgr/webpack": "^8.1.0",
    "@swc/helpers": "~0.5.0",
    "amqp-connection-manager": "^4.1.13",
    "amqplib": "^0.10.3",
    "axios": "^1.0.0",
    "class-transformer": "^0.3.1",
    "class-validator": "^0.14.0",
    "contentful": "^10.4.1",
    "ioredis": "^5.3.2",
    "jwks-rsa": "^3.0.1",
    "kafkajs": "^2.2.4",
    "mqtt": "^5.0.0",
    "nats": "^2.15.1",
    "negotiator": "^0.6.3",
    "next": "13.4.1",
    "next-auth": "^4.22.3",
    "passport": "^0.6.0",
    "passport-jwt": "^4.0.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "redis": "^4.6.7",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.0",
    "server-only": "^0.0.1",
    "tailwind-variants": "^0.1.14",
    "tslib": "^2.3.0",
    "zod": "^3.22.2"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.6.6",
    "@commitlint/config-conventional": "^17.6.6",
    "@nx/cypress": "16.5.0",
    "@nx/eslint-plugin": "16.5.0",
    "@nx/jest": "16.5.0",
    "@nx/js": "16.5.3",
    "@nx/linter": "16.5.0",
    "@nx/nest": "^16.5.3",
    "@nx/node": "16.5.3",
    "@nx/plugin": "^16.5.0",
    "@nx/react": "16.5.0",
    "@nx/storybook": "^16.5.3",
    "@nx/web": "16.5.3",
    "@nx/webpack": "16.5.3",
    "@nx/workspace": "16.5.0",
    "@rollup/plugin-commonjs": "^25.0.3",
    "@rollup/plugin-json": "^6.0.0",
    "@rollup/plugin-node-resolve": "^15.1.0",
    "@rollup/plugin-typescript": "^11.1.2",
    "@storybook/addon-a11y": "7.4.3",
    "@storybook/addon-designs": "^7.0.4",
    "@storybook/addon-essentials": "7.4.3",
    "@storybook/addon-storyshots": "7.1.0",
    "@storybook/core-common": "7.4.3",
    "@storybook/core-server": "7.4.3",
    "@storybook/nextjs": "7.4.3",
    "@swc-node/register": "~1.4.2",
    "@swc/cli": "~0.1.62",
    "@swc/core": "~1.3.51",
    "@swc/jest": "0.2.20",
    "@tailwindcss/forms": "^0.5.6",
    "@testing-library/jest-dom": "^6.1.2",
    "@testing-library/react": "14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.4.0",
    "@types/negotiator": "^0.6.1",
    "@types/node": "18.14.2",
    "@types/passport-azure-ad": "^4.3.1",
    "@types/react": "18.2.13",
    "@types/react-dom": "18.2.6",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "autoprefixer": "^10.4.14",
    "babel-jest": "^29.4.1",
    "commitizen": "^4.3.0",
    "commitlint-config-cz": "^0.13.3",
    "cypress": "^12.16.0",
    "cz-customizable": "^7.0.0",
    "eslint": "~8.15.0",
    "eslint-config-next": "13.4.1",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-jsx-a11y": "6.7.1",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-react": "7.32.2",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-sort-exports": "^0.8.0",
    "glob": "^10.3.3",
    "husky": "^8.0.3",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "lint-staged": "^13.2.3",
    "nx": "16.5.0",
    "nx-cloud": "latest",
    "postcss": "^8.4.26",
    "prettier": "^2.6.2",
    "prettier-plugin-tailwindcss": "^0.4.1",
    "rollup": "^3.26.3",
    "storybook-addon-pseudo-states": "^2.1.1",
    "tailwindcss": "^3.3.3",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.1.3"
  },
  "engines": {
    "node": "^18.16.1",
    "npm": "^9.5.1"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    }
  },
  "nx": {
    "includedScripts": []
  }
}


**Main.ts from storybook**
import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../src/primitives/**/*.mdx', '../src/**/*.stories.@(ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    'storybook-addon-pseudo-states',
    '@storybook/addon-designs',
  ],
  docs: {
    autodocs: true,
  },
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  staticDirs: ['../public', '../../../apps/site/public'],
  webpackFinal: async (config) => {
    config.module = config.module || {};
    config.module.rules = config.module.rules || [];

    // This modifies the existing image rule to exclude .svg files
    // since you want to handle those files with @svgr/webpack
    const imageRule: any = config.module.rules.find((rule: any) =>
      rule?.['test']?.test('.svg')
    );
    if (imageRule) {
      imageRule['exclude'] = /\.svg$/;
    }

    // Configure .svg files to be loaded with @svgr/webpack
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

export default config;

// To customize your webpack configuration you can use the webpackFinal field.
// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
// and https://nx.dev/packages/storybook/documents/custom-builder-configs


**Create one component**

`import { type ComponentProps, type ReactNode } from 'react';
import { type VariantProps, tv } from 'tailwind-variants';

type ButtonProps =  ComponentProps<'button'> &
  VariantProps<typeof buttonStyles> & {
    children: ReactNode;
  };

const buttonStyles = tv({
  base: 'bg-primary-100 hover:bg-primary-50 focus-visible:outline-primary rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
  variants: {},
  defaultVariants: {},
});

const Button = ({
  className,
  children,
  testId = 'button',
  type,
  ...rest
}: ButtonProps) => {
  return (
    <button className={buttonStyles({ className })} {...rest}>
      {children}
    </button>
  );
};

export { Button, buttonStyles, type ButtonProps };

**run storybook**
`

### System

```bash
Environment Info:

  System:
    OS: macOS 13.5.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Safari: 16.6
  npmPackages:
    @storybook/addon-designs: ^7.0.4 => 7.0.5 
    @storybook/addon-essentials: 7.4.3 => 7.4.3 
    @storybook/addon-storyshots: 7.1.0 => 7.1.0 
    @storybook/core-common: 7.4.3 => 7.4.3 
    @storybook/core-server: 7.4.3 => 7.4.3 
    @storybook/nextjs: 7.4.3 => 7.4.3
```


### Additional context

_No response_