背景图片与媒体查询相关潜在Bug问题咨询

问题现象 #

• 直接使用自定义背景URL类时，样式正常生效：

  bg-[url('https://d2kcw0xpn7sann.cloudfront.net/[GLOBAL]/sellout-vbox-inner-bg.svg')]
  

• 但给类加上lg:响应式前缀后，样式完全不生效：

  lg:bg-[url('https://d2kcw0xpn7sann.cloudfront.net/[GLOBAL]/sellout-vbox-inner-bg.svg')]
  

解决方法 #

方法一：自定义主题类（推荐）

在tailwind.config.js里把这个背景图注册成主题扩展类，这样响应式前缀就能正常工作：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      backgroundImage: {
        'sellout-inner': "url('https://d2kcw0xpn7sann.cloudfront.net/[GLOBAL]/sellout-vbox-inner-bg.svg')",
      },
    },
  },
  plugins: [],
}

之后直接用响应式类即可：

<div class="bg-sellout-inner lg:bg-sellout-inner">...</div>

方法二：让JIT编译器识别动态类

如果不想改配置，可以在页面中某个隐藏元素上提前声明这个响应式类，确保Tailwind的JIT编译能捕获到它：

<div class="hidden lg:bg-[url('https://d2kcw0xpn7sann.cloudfront.net/[GLOBAL]/sellout-vbox-inner-bg.svg')]"></div>

这样编译器就会生成对应的响应式CSS样式。

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