export const content = [
  "./public/*.html",
  "./app/helpers/**/*.rb",
  "./app/javascript/**/*.js",
  "./app/views/**/*.{erb,html}",
];

export const theme = {
  extend: {
    colors: {},
    keyframes: {
      "fade-in": {
        "0%": { opacity: 0, transform: "translateY(-30)" },
        "60%": { transform: "translateY(0)" },
        "100%": { opacity: "100%" }
      },
    },
    swing: {
      "0%": { transform: "rotate(0deg)" },
      "20%": { transform: "rotate(15deg)" },
      "40%": { transform: "rotate(-10deg)" },
      "60%": { transform: "rotate(5deg)" },
      "100%": { transform: "rotate(0deg)" },
    },
  },
  animation: {
    "fade-in": "fade-in .2s ease-in-out",
    swing: "swing 1s ease-in-out forwards",
  },
},
};