Kimkorng

Creating Looping Marquee With Tailwind CSS

27 MAY, 2024

The tailwind marquee, a scrolling text or image feature commonly seen on monder web development. In this section, we're gonna to build a new marquees effect by TailwindCss to replace HTML built in <marquee> tag which is no longer recommend in HTML5. Here's the step-by-step guide to create a marquee with tailwind css:

This example does not cover a TailwindCSS project set up. You can find out more at TailwindCSS installation guide

A Basic Marquee

Starting by create something simple with HTML with tailwind classes.

html
<div class="overflow-x-hidden">
    <div class="animate-marquee flex items-center whitespace-nowrap">
        <span class="text-sm whitespace-nowrap">Item 1</span>
        <span class="text-sm whitespace-nowrap">Item 2</span>
        <span class="text-sm whitespace-nowrap">Item 3</span>
        <span class="text-sm whitespace-nowrap">Item 4</span>
        <span class="text-sm whitespace-nowrap">Item 5</span>
    </div>
</div>

Adding Animation For Tailwind

Next, we'll add a custom animation for marquee in tailwind.config.js by write as following:

JavaScript icon
javascript
module.exports = {
  extend: {
    animation: {
      marquee: 'marquee 20s linear infinite',
    },
    keyframes: {
      marquee: {
        '0%': { transform: 'translateX(0%)' },
        '100%': { transform: 'translateX(-100%)' },
      }
    },
  }
}

Now we can test if our marquee works.

Improve the Looping of the Marquee

To create a looping marquee effect, we add a second marquee with the same spacing as the first. This requires updating the HTML to position the second marquee absolutely, preventing it from increasing the parent element's height:

html
<div class="relative overflow-x-hidden">
    <div class="animate-marquee flex items-center whitespace-nowrap">
        <span class="text-sm whitespace-nowrap">Item 1</span>
        <span class="text-sm whitespace-nowrap">Item 2</span>
        <span class="text-sm whitespace-nowrap">Item 3</span>
        <span class="text-sm whitespace-nowrap">Item 4</span>
        <span class="text-sm whitespace-nowrap">Item 5</span>
    </div>

    <div class="absolute top-0 animate-marquee2 flex items-center whitespace-nowrap">
        <span class="text-sm whitespace-nowrap">Item 1</span>
        <span class="text-sm whitespace-nowrap">Item 2</span>
        <span class="text-sm whitespace-nowrap">Item 3</span>
        <span class="text-sm whitespace-nowrap">Item 4</span>
        <span class="text-sm whitespace-nowrap">Item 5</span>
    </div>
</div>

Update Tailwind Config

Finally, update our tailwind.config.js by adding second animation for marquee2

JavaScript icon
javascript
module.exports = {
  extend: {
    animation: {
      marquee: 'marquee 20s linear infinite',
      marquee2: 'marquee2 20s linear infinite',
    },
    keyframes: {
      marquee: {
        '0%': { transform: 'translateX(0%)' },
        '100%': { transform: 'translateX(-100%)' },
      },
      marquee2: {
        '0%': { transform: 'translateX(100%)' },
        '100%': { transform: 'translateX(0%)' },
      },
    },
  }
}

Now, test your marquee again to ensure it works as expected.

SHARE