Tailwind CSS 2.2小屏仅隐藏背景图及自定义背景图不生效问题咨询

小屏仅隐藏背景图、保留div的实现 #

Tailwind 2.2原生支持背景图相关的响应式变体，结合需求有两种实现方式：

• 仍保留行内背景图样式的场景：
  行内样式优先级高于普通类，需要自定义带!important的工具类覆盖行内样式，在Tailwind全局入口CSS中添加如下代码：

  @layer utilities {
    /* 适配你的小屏断点，默认xs为<640px */
    @screen xs {
      .xs\:bg-image-none {
        background-image: none !important;
      }
    }
  }
  

  给目标div添加xs:bg-image-none类即可，小屏下仅隐藏背景图，div本身和其他样式都会保留。
• 改用自定义背景类的场景（更推荐）：
  遵循Tailwind移动优先的规则，默认设置无背景，到指定断点再加载背景图即可：

  <div class="absolute top-0 w-full h-full bg-gray-900 bg-none md:bg-personal_page_container_wrapper_bg_image md:bg-[length:100%] md:bg-no-repeat"></div>
  

  上述代码会在md断点及以上的设备显示背景图，小于md断点的设备仅显示灰色背景的div。

自定义背景图类不生效的排查 #

按照给出的配置，可按优先级依次排查：

1. 类名前缀遗漏：Tailwind自定义backgroundImage生成的类会自动加bg-前缀，需要给div添加的类是bg-personal_page_container_wrapper_bg_image，而非直接使用配置里的键名，这是最常见的错误原因。
2. Purge 树摇误删：如果类名是动态拼接生成的，Tailwind的Purge规则会识别不到该类并将其删除，可将该类手动加入safelist：

   module.exports = {
     purge: {
       options: {
         safelist: [...ta_gallery_safelist, 'bg-personal_page_container_wrapper_bg_image'],
       },
     },
     // 其余配置不变
   }
   

3. 缺少背景附加属性：配置中仅定义了背景图地址，没有设置背景尺寸和重复规则，默认背景图为自动尺寸、平铺展示，如果div尺寸和图片尺寸不匹配会导致视觉上看不到背景，给div额外添加bg-[length:100%] bg-no-repeat类即可匹配原来的行内样式效果。
4. 路径匹配问题：原行内样式用的是相对路径./assets/img/register_bg_2.png，配置中用的是根路径/img/register_bg_2.png，确认两个路径指向的是同一个资源即可。

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