Description

Inspired by a style made by Webflow. For this practice, it's so easy to implement the gradient backgound with the help of Tailwind CSS. But how to make it animate? I tried to animate the background position, but background position only, and it didn't move at all. What went wrong?

If going to the documentation of Background Position on Tailwind CSS, we can notice that, if we want to modify the position of a background, having a background that's larger than our foreground, is the whole point. Thus we need to not only set the background position from left to right, but also the background size to be larger than its original size, like this:

    // set in tailwind.config.js
    'gradient-x': {
      '0%, 100%': {
        'background-size':'900% 100%',
        'background-position': 'left center'
      },
      '50%': {
          'background-size':'900% 100%',
          'background-position': 'right center'
      }
    }
  

If we want the background to move only horizontally, then we don't need to 'stretch' the height of the backgrounud but to stretch the width, since I want the 3 colors to be displayed fully, so I stretched the width a lot.