How to Add Text Animations with Tailwind CSS

Tailwind CSS doesn’t have built-in utilities for text animations, but you can still achieve text animations by combining Tailwind’s utility classes with custom CSS animations.

Getting Started with Tailwind CSS Animations

To begin, ensure Tailwind CSS is set up in your project. For quick testing, you can include it via CDN:

<script src="https://cdn.tailwindcss.com"></script>

For production, it’s recommended to install Tailwind CSS via npm. Refer to the official Tailwind CSS documentation for detailed setup instructions.

Define Keyframes: Create a CSS file or add a <style> tag in your HTML to define the keyframes for your animation.

<style>
  @keyframes textGlow {
    0% {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f0f, 0 0 20px #f0f, 0 0 25px #f0f, 0 0 30px #f0f, 0 0 35px #f0f;
    }
    50% {
      text-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #ff0, 0 0 40px #ff0, 0 0 50px #ff0, 0 0 60px #ff0, 0 0 70px #ff0;
    }
    100% {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #f0f, 0 0 20px #f0f, 0 0 25px #f0f, 0 0 30px #f0f, 0 0 35px #f0f;
    }
  }

  .animate-text-glow {
    animation: textGlow 1.5s infinite;
  }
</style>

Apply the Animation: Use Tailwind CSS utility classes in your HTML to style your text and apply the custom animation class.

<div class="text-4xl font-bold text-center animate-text-glow">
  Glowing Text Animation
</div>
glow text animation

Waving and Fading Text

Let’s start with a comprehensive example that showcases two different text animations:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Text Animation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    keyframes: {
                        wave: {
                            '0%, 100%': { transform: 'rotate(0deg)' },
                            '50%': { transform: 'rotate(15deg)' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                    },
                    animation: {
                        'waving-hand': 'wave 2s linear infinite',
                        'fade-in': 'fadeIn 2s ease-in',
                    },
                },
            },
        }
    </script>
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
    <div class="text-center">
        <h1 class="text-4xl font-bold text-blue-600 animate-waving-hand">
            Hello, Tailwind CSS!
        </h1>
        <p class="mt-4 text-xl text-gray-700 animate-fade-in">
            This text fades in.
        </p>
    </div>
</body>
</html>
Waving and Fading Text animation
  1. A waving animation for the main heading
  2. A fade-in animation for the subtext

The key is extending Tailwind’s configuration to add custom keyframes and animations. We define wave and fadeIn keyframes, then create corresponding animation classes: animate-waving-hand and animate-fade-in.

Staggered List Appearance

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Staggered List Animation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    keyframes: {
                        fadeInUp: {
                            '0%': { opacity: '0', transform: 'translateY(10px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                    },
                    animation: {
                        'fade-in-up': 'fadeInUp 0.5s ease-out forwards',
                    },
                },
            },
        }
    </script>
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
    <ul class="space-y-2">
        <li class="opacity-0 animate-fade-in-up" style="animation-delay: 100ms;">First Item</li>
        <li class="opacity-0 animate-fade-in-up" style="animation-delay: 300ms;">Second Item</li>
        <li class="opacity-0 animate-fade-in-up" style="animation-delay: 500ms;">Third Item</li>
    </ul>
</body>
</html>

Creates a staggered appearance effect for list items, enhancing the user’s focus and providing a dynamic feel to the content.

Tags