如何在Tailwind中实现background-position过渡（不使用transition-all）

你之前的配置没生效，问题出在自定义transitionProperty的方式不对，下面给你两种靠谱的解决方法：

方法一：自定义过渡属性类 #

在tailwind.config.js里的theme.extend下正确扩展过渡属性，用更明确的键名避免冲突：

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        'bg-pos': 'background-position',
      },
    },
  },
}

然后在元素上使用对应的类：

<div class="bg-left bg-cover transition-bg-pos duration-300 hover:bg-right">
  <!-- 内容 -->
</div>

这里duration-300是过渡时长，你可以换成duration-500这类符合需求的数值。

方法二：使用任意值过渡类 #

不用改配置，直接用Tailwind的任意值语法指定过渡属性，更快捷：

<div class="bg-left bg-cover transition-[background-position] duration-300 hover:bg-right">
  <!-- 内容 -->
</div>

注意事项 #

• 必须确保元素有背景图，且背景图尺寸足够支撑位置变化（比如加bg-cover或bg-contain），否则bg-left和bg-right的变化可能看不出来。
• 之前你用position作为自定义键名，可能和Tailwind内置的过渡属性（比如针对元素position属性的过渡）冲突，所以换成bg-pos这类专属命名更稳妥。

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