TailwindCSS 自定义类和渐变在 Vercel 上不起作用

Question

在 Vercel 上部署时，我的自定义 Tailwind 类和渐变不会显示，但它们在本地主机（开发和生产）上都能完美运行。我正在使用 Nuxt 2，并将最新的 TailwindCSS (3.3.2) 作为插件安装。

这就是我的 nuxt.config.js 的样子：

css: ['~/assets/css/tailwind.css']

 build: {
    postcss: {
      plugins: [
        'tailwindcss',
        'postcss-flexbugs-fixes',
        [
          'postcss-preset-env',
          {
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
            features: {
              'custom-properties': false,
            },
          },
        ],
      ],
    }
  }

tailwind.config.js：

/** @type {import('tailwindcss').Config} */

module.exports = {
    content: [
      './components/**/*.{vue,js}',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.{js,ts}',
      './nuxt.config.{js,ts}',
      './assets/**/*.{vue,js}',
      './assets/css/*.css'
    ],
  safelist: ['text-gradient-warm', 'btn-gradient', 'btn-gradient:hover', 'bg-gradient-to-r', 'from-[#44BCFF]', 'via-[#FF44EC]', 'to-[#FF675E]'],
  theme: {
    extend: {
      colors: {
        'blue-custom': '#44BCFF',
        'pink-custom': '#FF44EC',
        'orange-custom': '#FF675E'
      }
    }
  },
  plugins: [
    require('daisyui'),
  ],
  daisyui: {
    styled: true,
    themes: ["light"],
  },
}

postcss.config.js：

module.exports = {
  plugins: [
    'tailwindcss',
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
        },
      },
    ],
  ],
}

我尝试了很多方法，但似乎不起作用。我还尝试了在网上找到的类似问题的所有解决方案，但似乎没有做任何事情。大多数文本渐变不起作用，最重要的是，按钮上的某些渐变背景不起作用。例如：

<div class="absolute transition-all duration-1000 opacity-60 -inset-px bg-gradient-to-r from-blue-custom via-pink-custom to-orange-custom rounded-xl blur-lg group-hover:opacity-80 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>

在我的按钮下方显示了一个漂亮的渐变阴影，但在 Vercel 上部署后它什么也没有显示。

我刚刚制作了一个可以克隆的公共存储库：https://github.com/fdarkaou/tailwindvercel

您都可以使用

yarn install

安装依赖项，我使用

nuxt generate

作为构建命令。

您可以在此处查看 localhost 和 vercel 上的部署之间的区别：

维塞尔：https://pasteboard.co/ZBnG3n5BhWO8.png 本地主机：https://pasteboard.co/573VNtLDE9rQ.png

如您所见，Vercel 上没有显示渐变。

我尝试过：将内容列入安全列表、编辑 nuxt.config.js、postcss.config.js、tailwindcss.config.js。

Answer 1

这里同样，除了使用自定义类的渐变之外，其他一切都有效。有什么想法吗？