A Guide To Custom Animations in Tailwind Css.

Defining Animations in Tailwind CSS

To incorporate animations into your Tailwind CSS setup, you'll need to extend the theme in your tailwind.config.js file. Here’s how you can do it:

1. Extend Tailwind’s Configuration

You can add custom animations and keyframes to your Tailwind configuration like this:

// tailwind.config.ts
module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
        'fade-in': 'fadeIn 2s ease-out',
        'bounce-slow': 'bounce 2s infinite'
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' }
        },
        bounce: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-1rem)' }
        }
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

2. Apply Animations in Your TypeScript Components

Once you’ve defined your animations, you can use them in your Next.js components. Here’s an example of how to apply these animations:

// pages/index.tsx
import React from 'react';

const Home: React.FC = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-4xl font-bold mb-4 animate-fade-in">Welcome to My Next.js App</h1>
      <div className="animate-spin-slow">
        <img src="/spinner.svg" alt="Loading" />
      </div>
      <button className="mt-4 px-6 py-3 bg-blue-500 text-white rounded-lg animate-bounce-slow">
        Click Me
      </button>
    </div>
  );
};

export default Home;

By following these steps, you can create smooth and engaging animations for your web applications using Tailwind CSS.

Read More on Animations in Tailwind