Since my old article is really popular and Tailwind have moved to a CSS config, I thought I'd write up a quick demo of how to set up a simple marquee within Tailwind CSS v4 as there are a few differences.
Creating the HTML
Let's set up a basic list of items for our marquee to display. These items should take up more space than the screen width otherwise there is not much point turning them into a marquee. You'll then want to duplicate these as we'll add a second animation which works in tandem so that we don't get any whitespace trailing our elements.
We set the second marquee as absolute and position on top on load. This ensures we only see one set of the elements.
<div class="overflow-x-hidden">
<div class="py-12 animate-marquee whitespace-nowrap">
<span class="text-4xl mx-4">Marquee Item 1</span>
<span class="text-4xl mx-4">Marquee Item 2</span>
<span class="text-4xl mx-4">Marquee Item 3</span>
<span class="text-4xl mx-4">Marquee Item 4</span>
<span class="text-4xl mx-4">Marquee Item 5</span>
</div>
<div class="absolute top-0 py-12 animate-marquee-alt whitespace-nowrap">
<span class="text-4xl mx-4">Marquee Item 1</span>
<span class="text-4xl mx-4">Marquee Item 2</span>
<span class="text-4xl mx-4">Marquee Item 3</span>
<span class="text-4xl mx-4">Marquee Item 4</span>
<span class="text-4xl mx-4">Marquee Item 5</span>
</div>
</div>Creating the Animation
To get the elements to move, we'll create an animation that moves the elements from their default position to off the screen.
For the first marquee, we can do this by adding a new keyframe that translates the X axis from 0% to -100%. This will move the marquee to the left. If you want to move it to the right, you would instead animate to 100%.
For the cloned marquee, we want to animate from the default 100% to a value of 0%. This allows it to start off the screen and reach the default position by the time the first marquee element has moved. If you want the element to move to the right, you'll animate from -100% here.
Within your main CSS file, add the following.
@import "tailwindcss";
@theme {
--animate-marquee: marquee 25s linear infinite;
--animate-marquee-alt: marquee-alt 25s linear infinite;
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes marquee-alt {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
}When using Tailwind v4, if you want the styles pre-generated so you can just write animate-marquee as a class, we need to include the keyframe within the @theme config.
As our elements have the same timing of 25s, we'll have one move from the centre to the left, and one move from the right to the centre. They will then reset and repeat this process, giving us a smooth marquee.
Demo
Want to see it in action? You can view the demos on Tailwind Play, which offers a left flowing marquee and a right flowing marquee.
Hope this helps for those who need it.