嘿，你能试着在你的绝对URL前加上 /public ,看看是否有效吗？(例如：bg-[url("/public/images/background.png")])。
我遇到了类似的问题，看起来在我的绝对URL前加上 /public 似乎可以解决问题。不太确定谁实际上负责处理 tailwindcss 中任意值指定的 url() (例如：bg-[url(...)]),但我怀疑是 css-loader,如果你的构建器是 webpack。根据文档，似乎 css-loader 将绝对路径视为相对于服务器根目录的路径。我不知道文档中提到的服务器根目录具体在哪里，但如果我们假设那是项目根目录，那么在 /public 前加上前缀是有意义的。

你好，@sookmax 是的，我已经尝试过添加前缀 public 并使其正常工作，但我正在使用 nextJS 应用程序中的组件，因此 public 目录已设置。所以我不想添加前缀，我只是想像 v6 那样无问题地运行它。

你说得对。这很糟糕，而且非常不直观，需要添加 /public 前缀才能使 CSS URL 正确工作。我很想自己提交 PR 来解决这个问题，但我还没有找到确切的根本原因。它可能在 @storybook/builder-webpack5 中，也可能在 @storybook/nextjs 中，或者谁知道它可能是 nextjs 本身。
如果我学到了什么有用的东西，我会告诉你的。
干杯。

@mirkosaugo Hey, it turned out there was a conflict related to css-loader between @storybook/nextjs and @storybook/addon-styling . You can safely remove options.postCss for @storybook/addon-styling in .storybook/main.ts like below, and the url() should work without the /public prefix.

// .storybook/main.ts

...

addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-styling',
      // comment out the option below, and see if url() works correctly.
      // options: {
      //   postCss: {
      //     implementation: require.resolve('postcss'),
      //   },
      // },
    },
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },

...

Give it a try and let me know if it works!

@sookmax 它似乎起作用了！哇，比我想象的容易多了。非常感谢你

翻译结果为：@sookmax 这里也有同样的问题，但是我使用的是"@storybook/addon-styling-webpack"。有人知道如何解决吗？

// .storybook/main.js

const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],

  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-styling-webpack",
    "@storybook/addon-themes",
    "@storybook/addon-storysource",
    {
      name: "@storybook/addon-styling-webpack",
      options: {
        rules: [
          {
            test: /\.css$/,
            sideEffects: true,
            use: [
              require.resolve("style-loader"),
              {
                loader: require.resolve("css-loader"),
                options: {
                  importLoaders: 1,
                },
              },
              {
                loader: require.resolve("postcss-loader"),
                options: {
                  implementation: require.resolve("postcss"),
                },
              },
            ],
          },
        ],
      },
    },
  ],

  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },

  features: {
    previewMdx2: true,
  },

  webpackFinal: async (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      zlib: false,
    };

    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../src"),
    ];

    // Add TypeScript path mappings
    config.resolve.alias = {
      ...config.resolve.alias,
      "@/components": path.resolve(__dirname, "../src/components"),
      "@/lib/utils": path.resolve(__dirname, "../src/lib/utils"),
      "@/lib": path.resolve(__dirname, "../src/lib"),
    };

    return config;
  },

  docs: {
    autodocs: false,
  },
};

@integrayshaun ,我不确定这里的解决方案是什么——也许是一个文档问题？——但如果你回来后能看一下就太好了。

你好@pedro-stark 👋
你能分享一下你的项目的复现吗？这样我就能更好地查看了。