A Guide To Custom Animations in Tailwind Css.

#nextjs #typescript #tutorial #tailwindcss

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;