In this post, I'll show you how you can build an animated infinite logo carousel easily using tailwindcss. You could use this effect not only for logos but also for any other content such as videos, divs, etc.

TLDR; Entire code is available here: play.tailwindcss.com/LiptaMZ4Hp

You can also import this code block in the UiBun Visual Editor

Getting started

You need to do two things in order to build an infinite carousel in tailwindcss:

1. Write the HTML & tailwindcss code
2. Update tailwind config to support infinite scroll animation

HTML & tailwindcss Code

Here's the HTML code for infinite logo carousel in tailwindcss. If you notice carefully, I've also added the ability to pause the carousel using animation-pause classname when the user hovers on it, but you know that it is not available out-of-the-box in tailwindcss.

For pausing-on-hover, we use the animation-play-state property in css which is not available in tailwindcss yet, so we need to update globals.css file to add support for it. You can get the code below.

<section class="bg-black text-white pt-8 pb-4">
  <h2 class="text-center text-2xl mb-2 font-bold leading-8 ">Our Clients</h2>
  <p class="text-center text-lg font-extralight leading-8 ">We are trusted by the world’s most innovative teams</h2>
  
  <div class="logos group relative overflow-hidden whitespace-nowrap  py-10 [mask-image:_linear-gradient(to_right,_transparent_0,_white_128px,white_calc(100%-128px),_transparent_100%)]">
    <div class="animate-slide-left-infinite group-hover:animation-pause inline-block w-max">
      <!-- Ensure that the images cover entire screen width for a smooth transition -->
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/transistor-logo-white.svg" alt="Transistor" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/reform-logo-white.svg" alt="Reform" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/tuple-logo-white.svg" alt="Tuple" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/savvycal-logo-white.svg" alt="SavvyCal" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/statamic-logo-white.svg" alt="SavvyCal" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/laravel-logo-white.svg" alt="SavvyCal" />
    </div>

    <!-- Duplicate of the above for infinite effect (you can use javascript to duplicate this too) -->
    <div class="animate-slide-left-infinite group-hover:animation-pause inline-block w-max">
      <!-- Ensure that the images cover entire screen width for a smooth transition -->
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/transistor-logo-white.svg" alt="Transistor" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/reform-logo-white.svg" alt="Reform" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/tuple-logo-white.svg" alt="Tuple" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/savvycal-logo-white.svg" alt="SavvyCal" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/statamic-logo-white.svg" alt="SavvyCal" />
      <img class="mx-4 inline h-16" src="https://tailwindui.com/plus/img/logos/158x48/laravel-logo-white.svg" alt="SavvyCal" />
    </div>
  </div>
</section>

You can also notice from the code that here we need to duplicate the logos to get the infinite scroll effect without any gaps. Ideally, we should be able to make the infinite transition without any duplicate HTML content. I'll build it soon, so if you wish to get notified when I publish it, subscribe to the newsletter.

Tailwind Config

Update your tailwind config to add the following keyframes and animation:

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      // ...
      keyframes: {
        'slide-left': {
          from: { transform: 'translateX(0)' },
          to: { transform: 'translateX(-100%)' },
        },
      },
      animation: {
        'slide-left': 'slide-left 8s linear infinite',
      },
    },
  },
  plugins: [],
}

Here you can see that the slide-left keyframe slides the element from 0% to -100% of the screen width. This combined with 8 seconds linear infinite animation gives the smooth carousel effect.

Bonus: Tailwindcss utility for pausing the animation

This utility class helps you to pause the animation. In the code above, we use group-hover to pause the animation when the user hovers over the logo carousel.

Update your globals.css file and add the following utility class to support pausing the animation:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .animation-pause {
    animation-play-state: paused;
  }
}

Conclusion

See, it is so easy to add an infinite logo carousel using tailwindcss. If you wish to get notified when I publish more such articles, subscribe to the UiBun newsletter below.