tailwind.config.js

import daisyui from "daisyui";
/** @type {import('tailwindcss').Config} */

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          "0%, 100%": { transform: "rotate(-30deg)" },
          "50%": { transform: "rotate(30deg)" },
        },
        ring: {
          "25%": { transform: "rotate(-50deg)" },
          "75%": { transform: "rotate(50deg)" },
        },
        heart: {
          "75%, 100%": {
            transform: "scale(1.2)",
            opacity: "0",
          },
        },
        "fade-in-left": {
          "0%": {
            opacity: 0,
            transform: "translate3d(-100%, 0, 0)",
          },
          "100%": {
            opacity: 1,
            transform: "translate3d(0, 0, 0)",
          },
        },
        tada: {
          "0%": {
            transform: "scale3d(1, 1, 1)",
          },
          "10%, 20%": {
            transform: "scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)",
          },
          "30%, 50%, 70%, 90%": {
            transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
          },
          "40%, 60%, 80%": {
            transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
          },
          "100%": {
            transform: "scale3d(1, 1, 1)",
          },
        },
        "slide-in-down": {
          "0%": {
            visibility: "visible",
            transform: "translate3d(0, -100%, 0)",
          },
          "100%": {
            transform: "translate3d(0, 0, 0)",
          },
        },
      },
      animation: {
        ring: "wiggle 1s ease-in-out 2",
        "spin-one-time": "spin 1s linear",
        heart: "heart 1s cubic-bezier(0, 0, 0.2, 1) 2",
        shake: "wiggle 1s ease-in-out 1",
        fadeInLeft: "fade-in-left 1s ease-in-out 0.25s infinite",
        tada: "tada 1s ease-in-out 0.25s 1",
        slideindown: "slide-in-down 1s ease-in-out 0.25s 1",
      },
    },
  },
  plugins: [daisyui],
  daisyui: {
    themes: ["light", "dark"],
  },
};