Nuxt 3 和 tailwindCSS

Question

我正在学习 nuxt 3 和 taillwindcss 如果我在 tailwind.config.js 中添加 bagroundImages 作为扩展

第一种方法

  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>

但是如果我将图像网址添加为任意值，我可以看到图像

第二种方法

<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', // default value of $colorMode.preference
    fallback: 'light', // fallback value if not system preference found
    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'
]
})

提前致谢

详情部分有提及

Answer 1

我建议将图像文件夹移动到public文件夹中。然后你可以使用这样的图像：

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