How to transition background-position in tailwind (without using transition-all)

I’m trying to make the bg-left transition to bg-right on hover with transition. I know I can use transition-all, but I’ve had some issues with it. I tried updating the Tailwind config file with transitionProperty: { position: background-position }, but it didn’t work. Does anyone have any ideas for this? Thank you!

Solution

The values for transitionProperty need to be valid values for transition-property. With:

property: background-position,

You are trying to do a mathematical operation of subtraction of the variable background and position, which would evaluate to a number and this would not be a relevant value for transitionProperty since as of writing, there are no CSS properties that consist of solely as a numerical key. More likely, background and/or position are not defined in the scope and the statement would cause a JavaScript error.

Instead, consider passing the property identifier as a string for the value of the property key:

tailwind.config = {
  theme: {
    extend: {
      transitionProperty: {
        position: 'background-position',
      },
    },
  },
};

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-left bg-[url(https://picsum.photos/300/80)] w-20 h-20 transition-position hover:bg-right"></div>