如何让Nuxt3中TailwindCSS自定义backgroundImage类生效？

我在学习 Nuxt 3 和 TailwindCSS，尝试在 tailwind.config.js 中通过 extend 扩展 backgroundImage 时遇到问题：

配置与问题现象 #

第一种配置方式 #

theme: {
  extend: {
    colors: {
      darkBlue: "hsl(217, 28%, 15%)",
      darkBlue1: "hsl(218, 28%, 13%)",
      darkBlue2: "hsl(216, 53%, 9%)",
      darkBlue3: "hsl(219, 30%, 18%)",
      accentCyan: "hsl(176, 68%, 64%)",
      accentBlue: "hsl(198, 60%, 50%)",
      lightRed: "hsl(0, 100%, 63%)",   
  },
    backgroundImage: {
      'logo-dark-mode': "url('~/assets/images/logo-dark-mode.svg')",
      'logo-light-mode': "url('~/assets/images/logo-light-mode.svg')",
      'curvy-dark-mode': "url('~/assets/images/bg-curvy-dark-mode.svg')",
      'curvy-light-mode': "url('~/assets/images/bg-curvy-light-mode.svg')",
  },
},

无效的模板代码 #

使用以下代码时背景图无法显示：

<div class="bg-curvy-light-mode dark:curvy-dark-mode bg-no-repeat bg-contain bg-bottom">
  <div class="container mx-auto px-6 text-center md:pt-20 pb-52">
    <img src="~/assets/images/illustration-intro.png" class="mx-auto" alt="">
  </div>
</div>

有效的任意值写法 #

使用任意值（Arbitrary values）的方式可以正常显示背景图：

<div class="bg-[url('~/assets/images/bg-curvy-light-mode.svg')] dark:[url('~/assets/images/bg-curvy-dark-mode.svg')] bg-no-repeat bg-contain bg-bottom">
  <div class="container mx-auto px-6 text-center md:pt-20 pb-52">
    <img src="~/assets/images/illustration-intro.png" class="mx-auto" alt="">
  </div>
</div>

请问如何让第一种配置方法生效？

环境版本 #

• @nuxtjs/tailwindcss: ^6.11.4
• nuxt: ^3.11.1

完整配置文件 #

tailwind.config.js #

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

export default {
  content: [
    `/components/**/*.{vue,js,ts}`,
    `/layouts/**/*.vue`,
    `/pages/**/*.vue`,
    `/composables/**/*.{js,ts}`,
    `/plugins/**/*.{js,ts}`,
    `/utils/**/*.{js,ts}`,
    `/App.{js,ts,vue}`,
    `/app.{js,ts,vue}`,
    `/Error.{js,ts,vue}`,
    `/error.{js,ts,vue}`,
    `/nuxt.config.{js,ts}`,
  ],
  darkMode: 'selector',
  
  theme: {
    extend: {
      colors: {
        darkBlue: "hsl(217, 28%, 15%)",
        darkBlue1: "hsl(218, 28%, 13%)",
        darkBlue2: "hsl(216, 53%, 9%)",
        darkBlue3: "hsl(219, 30%, 18%)",
        accentCyan: "hsl(176, 68%, 64%)",
        accentBlue: "hsl(198, 60%, 50%)",
        lightRed: "hsl(0, 100%, 63%)",   
    },
      backgroundImage: {
        'logo-dark-mode': "url('~/assets/images/logo-dark-mode.svg')",
        'logo-light-mode': "url('~/assets/images/logo-light-mode.svg')",
        'curvy-dark-mode': "url('~/assets/images/bg-curvy-dark-mode.svg')",
        'curvy-light-mode': "url('~/assets/images/bg-curvy-light-mode.svg')",
    },
  },
},
variants: {
  extend: {
    backgroundImage: ['dark'],
  },
},
  plugins: [],
}

nuxt.config.ts #

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: false },
  extends: [ 

   ],
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/google-fonts',
    '@nuxtjs/color-mode',
  ],
  colorMode: {
    preference: 'system',
    fallback: 'light',
    hid: 'nuxt-color-mode-script',
    globalName: '__NUXT_COLOR_MODE__',
    componentName: 'ColorScheme',
    classPrefix: '',
    classSuffix: '',
    storageKey: 'nuxt-color-mode'
  },
  tailwindcss: {
    configPath: 'tailwind.config.js',
    cssPath: ["~/assets/css/tailwind.css", { injectPosition: 0 }],
    exposeConfig: false,
    config:{},
    injectPosition: 0,
    viewer: true,
  },
  googleFonts: {
    families: {
      Inter: [100, 200, 300, 400, 500, 600, 700, 800, 900],
      Raleway: [100, 200, 300, 400, 500, 600, 700, 800, 900],
      Roboto: [100, 300, 400, 500, 700,900],
      "Open Sans": [300, 400, 500, 600, 700, 800],
    },
    display: 'swap',
    download: true
  },
  components: [
    { path: '~/components/Icones', prefix: 'Special' },
    '~/components'
]
})

问题出在两个关键细节上：

1. 修正 Dark 模式类名格式 #

模板中 dark:curvy-dark-mode 缺少 bg- 前缀，Tailwind 的 dark 变体需要作用在完整工具类上，正确写法为 dark:bg-curvy-dark-mode。

修正后的模板代码：

<div class="bg-curvy-light-mode dark:bg-curvy-dark-mode bg-no-repeat bg-contain bg-bottom">
  <div class="container mx-auto px-6 text-center md:pt-20 pb-52">
    <img src="~/assets/images/illustration-intro.png" class="mx-auto" alt="">
  </div>
</div>

2. 修复路径解析问题 #

Tailwind 配置中 ~/ 路径别名可能无法被正确解析，换成相对路径即可：

修改 tailwind.config.js 中的 backgroundImage 配置：

backgroundImage: {
  'logo-dark-mode': "url('./assets/images/logo-dark-mode.svg')",
  'logo-light-mode': "url('./assets/images/logo-light-mode.svg')",
  'curvy-dark-mode': "url('./assets/images/bg-curvy-dark-mode.svg')",
  'curvy-light-mode': "url('./assets/images/bg-curvy-light-mode.svg')",
},

3. 验证配置生效 #

完成上述修改后，重启 Nuxt 开发服务器，确保配置热重载生效。你的 variants 配置已经正确开启了 backgroundImage 的 dark 变体，无需额外修改。

内容的提问来源于stack exchange，提问作者Ahmed Abuteir