Mastering Tailwind Marquee Effect: A Complete Guide

The marquee effect—the dynamic scrolling of text or images adds an interactive touch to web design, drawing attention and enhancing user engagement. While this effect was traditionally achieved using the now-deprecated <marquee> tag, modern web practices rely on more flexible and accessible solutions. In this guide, we’ll show you how to create a smooth, customizable Tailwind marquee effect using only Tailwind CSS 4.

By the end of this post, you’ll know exactly how to add the marquee effect to your website, enhancing its visual appeal while keeping your code clean and efficient. Let’s dive in!

What is the Marquee Effect?

The marquee effect is a design technique that involves making text, images, or other elements move horizontally or vertically across the screen. It’s often used to display important information or create attention-grabbing animations, such as news tickers, promotions, or announcements. The marquee effect is a simple yet powerful way to make certain content stand out on a webpage.

While the marquee effect was traditionally implemented using the <marquee> tag in HTML, this method is now considered outdated and not ideal for modern web design. The <marquee> tag has limited customization options and doesn’t provide the level of control that today’s developers need.

Why Use the Marquee Effect?

There are several reasons why you might want to use the marquee effect on your website:

1. Grab Attention: It’s an effective way to highlight important content or announcements, such as special offers, latest news, or updates.
2. Increase User Engagement: Moving content naturally draws the eye, encouraging visitors to pay attention to key messages.
3. Enhance User Experience: The marquee effect can make your site feel more dynamic and interactive without overwhelming the user.

By using Tailwind CSS to create a marquee effect, you can achieve all of these benefits with clean, maintainable code that doesn’t require JavaScript or messy custom styles.

The Advantages of Using Tailwind CSS for This Effect

Using Tailwind CSS to create the marquee effect offers several advantages over traditional methods:

1. Simplicity: Tailwind’s utility-first approach means you can style the marquee effect directly in your HTML, without writing custom CSS. This results in cleaner, more maintainable code.
2. Customizability: Tailwind provides an extensive set of utilities for adjusting animations, spacing, and other properties, giving you complete control over the appearance and behavior of the marquee.
3. Performance: By avoiding JavaScript and relying on CSS, Tailwind ensures that the marquee effect runs smoothly and efficiently, even on resource-constrained devices.
4. Responsiveness: Tailwind makes it easy to adjust the marquee for different screen sizes, ensuring your content looks great on any device.
5. Consistency: As a utility-first framework, Tailwind promotes design consistency across your project, ensuring that all elements, including your marquee, follow the same styling principles.

In short, Tailwind CSS simplifies the implementation of the marquee effect while offering maximum flexibility, performance, and responsiveness.

Creating the Tailwind Marquee Effect With Tailwind CSS 4:

Before we dive into creating the marquee effect, ensure that you have Tailwind CSS installed in your project. You can either use the CDN for quick prototyping or install it using npm for a more scalable setup. For detailed instructions, check out the official Tailwind installation guide.

Now, let’s move on to implementing the marquee effect. We’ll use a combination of Tailwind CSS utilities and custom animations to create a smooth, scrolling marquee effect.

Step 1: HTML Structure We’ll create a container div to hold the marquee items. Inside it, we’ll have two div elements that will each animate in horizontal directions, giving the illusion of continuous scrolling.

<div class="relative flex overflow-x-hidden">
  <div class="animate-marquee py-12 whitespace-nowrap">
    <span class="mx-4 text-4xl">Marquee Item 1</span>
    <span class="mx-4 text-4xl">Marquee Item 2</span>
    <span class="mx-4 text-4xl">Marquee Item 3</span>
    <span class="mx-4 text-4xl">Marquee Item 4</span>
    <span class="mx-4 text-4xl">Marquee Item 5</span>
  </div>

  <div class="absolute top-0 animate-marquee2 py-12 whitespace-nowrap">
    <span class="mx-4 text-4xl">Marquee Item 1</span>
    <span class="mx-4 text-4xl">Marquee Item 2</span>
    <span class="mx-4 text-4xl">Marquee Item 3</span>
    <span class="mx-4 text-4xl">Marquee Item 4</span>
    <span class="mx-4 text-4xl">Marquee Item 5</span>
  </div>
</div>

Explanation:

• The relative class is used on the outer div to establish a reference point for positioning the inner divs.
• overflow-x-hidden ensures that the marquee content does not overflow horizontally and stay within the bounds.
• Each item inside the marquee is wrapped in a span element and styled with text-4xl to make them large and visible.
• The absolute class on the second div ensures that it stays aligned with the first one while animating in the opposite direction.

Step 2: Adding the Tailwind CSS Animation

Now, let’s define the animations that make the items move. We’ll be using custom animations for the marquee effect. To do this, you’ll add the following CSS in your Tailwind configuration:

@import "tailwindcss";

@theme {
  --animate-marquee: marquee 15s linear infinite;
  --animate-marquee2: marquee2 15s linear infinite;

  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes marquee2 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
}

Your marquee items will now scroll smoothly in a horizontal direction, achieving the desired effect. You can view the demo here: Demo Link.

Check out the most blazing-fast Tailwind AI Builder – FlyonUI MCP. Craft stunning UI Components, Landing Pages, Blocks, Sections, and much more within seconds by simply providing prompts.

You can also check the best Tailwind Templates by FlyonUI.

Customizing the Tailwind css Marquee Effect

Once you have your basic marquee effect set up, there are plenty of ways to customize it to fit your needs. Below, we’ll go over a few ways you can adjust the speed, direction, and even make use of external libraries like FlyonUI – A Free Tailwind CSS Component Library to further enhance the effect.

1. Direction Control: Reversing the Marquee Scroll

As shown earlier, we have two different div elements with horizontal directions. However, you might want to change the direction of the animation or make it more dynamic.

• Reverse Direction: To reverse the scrolling direction, swap the translateX values in the @keyframes for both animations:

@keyframes marquee {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes marquee2 {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}

This will make the items scroll from right to left instead of left to right, creating a reversed effect. Feel free to experiment with this depending on your design needs.

2. Using FlyonUI to Customize the Tailwind Marquee Effect

To make things even easier, we will use FlyonUI, a free Tailwind UI component library, to speed up your development process. FlyonUI provides a range of pre-built components, that you can directly integrate into your project.

Quick setup for the FlyonUI into your tailwind project:

Currently, we are only using the FlyonUI CSS. If you are using the FlyonUI JS components, please refer to the official installation guide.

Step 1 : Install FlyonUI using npm

npm install flyonui@latest

Step 2 : Add FlyonUI to your css file.

// Style.css
@import "tailwindcss";
@plugin "flyonui";

We will be using the Stat component from the FlyonUI library for the Marquee effect.

<div class="relative flex overflow-x-hidden">
  <div class="animate-marquee whitespace-nowrap space-x-3 py-10">
    <!-- Stat 1 -->
    <div class="stats">
      <div class="stat">
        <div class="stat-figure">
          <div class="avatar">
            <div class="size-12 rounded-full">
              <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="User Avatar" />
            </div>
          </div>
        </div>
        <div class="stat-title">Total page views</div>
        <div class="stat-value">89,400</div>
        <div class="stat-desc">21% ↗︎ than last month</div>
      </div>
    </div>
    <!-- Stat 2 -->
    <!-- Stat 3 -->
    <!-- Stat 4 -->
    <!-- Stat 5 -->
  </div>

  <div class="absolute top-0 animate-marquee2 whitespace-nowrap space-x-3 py-10 ms-3">
    <!-- Stat 1 -->
    <div class="stats">
      <div class="stat">
        <div class="stat-figure">
          <div class="avatar">
            <div class="size-12 rounded-full">
              <img src="https://cdn.flyonui.com/fy-assets/avatar/avatar-1.png" alt="User Avatar" />
            </div>
          </div>
        </div>
        <div class="stat-title">Total page views</div>
        <div class="stat-value">89,400</div>
        <div class="stat-desc">21% ↗︎ than last month</div>
      </div>
    </div>
    <!-- Stat 2 -->
    <!-- Stat 3 -->
    <!-- Stat 4 -->
    <!-- Stat 5 -->
  </div>
</div>

You can find various components and customize the marquee effect using FlyonUI’s. It’s an easy and efficient way to add rich, responsive components without the need to write custom code from scratch.

By leveraging FlyonUI, it significantly reduce development time, allowing you to focus on other aspects of your design.

FlyonUI – Free Tailwind CSS Components Library

FlyonUI is the free Tailwind Components Library designed to combine the best of both worlds: the aesthetic appeal of semantic classes and the powerful functionality of JS plugins.

Under the hood, it uses the strengths of:

• Tailwind CSS: A utility-first CSS framework that helps you build beautiful websites with ease.
• DaisyUI: adds component semantic class names to Tailwind CSS so you can make beautiful websites faster, easier, and more Maintainable.
• Preline: JavaScript headless & fully unstyled Tailwind plugins for accessible, responsive UI. Enhance experiences with animations, transitions, and more.

Features:

• JS plugins Support
• Semantic Components
• 800+ Free Components Examples
• Universal Framework Compatibility
• Unlimited Themes
• Unstyled & Accessible Plugins
• Responsive & RTL support
• Free Forever
• Beautiful and Semantic Styling
• Efficiency and Productivity
• Maintainable and Scalable

Also available in pro version. It includes

• Tailwind Blocks
• Tailwind UI Figma Design System

Further Resources:

Want to take your Tailwind skills even further? Check out these awesome resources to supercharge your projects:

• 🌟 Tailwind CSS: The official documentation—your go-to guide for mastering Tailwind!
• 🎨 FlyonUI: A free Tailwind CSS component library packed with ready-to-use, customizable components.
• ⚡️ All UtilityCSS: An Ultimate Collection of free and premium Tailwind CSS resources.
• 🚀 Rombo: Explore more animations and elevate your design game with this animation tool for Tailwind.
• 🔥 Tailwind Intersect: A Tailwind plugin for adding intersection-based animations—perfect for adding dynamic effects to your pages.

Dive in and unlock new possibilities for your web design!

Some informational Articles which you may find helpful:

• Tailwind Nextjs Configuration
• Tailwind 11ty Integration

Conclusion

And that’s it! With just a few lines of code, you’ve created a sleek, customizable marquee effect using Tailwind CSS. No JavaScript, no outdated tags—just clean, efficient design. Tailwind’s flexibility lets you tailor the marquee to your needs, whether it’s for promotions, news, or just adding a dynamic touch to your site.

Now, go ahead and bring your designs to life with this smooth scrolling effect. Happy coding!