Chapter 5: Tailwind CSS animations

Core Idea

Animate Tailwind CSS with Motion: hover and tap effects, responsive animations driven by CSS variables, and spring easings generated for your utility classes.

Key Concepts

• Basic animations: The key to using Motion with Tailwind CSS is to let each library do what it does best.
• Responsive animations: It's possible to make an animation responsive to screen size by combining Tailwind CSS's a
• Generate CSS springs: CSS is capable of performing spring animations using the linear() easing function
• Troubleshooting: If you find that an Motion x Tailwind CSS animation is stuttery
• My animation is moving weirdly: If you find that an Motion x Tailwind CSS animation is stuttery
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

import { motion } from "motion/react";

function Button() {
  return (
    <motion.button
      className="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-lg"
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    >
      Click Me!
    </motion.button>
  );
}

• What it demonstrates: Core usage pattern for Tailwind CSS animations.

Key Takeaways

1. Perform basic animations with the two libraries.
2. Create responsive animations by animating CSS variables.
3. Generate Tailwind CSS spring animations directly in your code editor using Motion for .
4. Tailwind CSS's utility classes for static and responsive styling.
5. Motion's animation props like animate and layout for animation.

Connects To

• Generate CSS springs with your LLM: related Motion doc page.
• CSS spring animations for React, Astro and Vue: related Motion doc page.
• React motion component: related Motion doc page.
• React Animation: related Motion doc page.
• How to install Motion for React: related Motion doc page.