/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    screens: {
      mb: "320px",
      sm: "640px",
      // => @media (min-width: 640px) { ... }
      md: "768px",
      lg: "1024px",
      // => @media (min-width: 1024px) { ... }
      tablet: "960px",
      tablet1: "1060px",
      desktop: "1200px",
      // => @media (min-width: 1280px) { ... }
    },
    extend: {
      keyframes: {
        listShowdown: {
          "0%": { height: "0px", opacity: 0, transform: "translateY(-150px)" },
          "100%": { height: "164px", opacity: 1, transform: "translateY(0px)" },
        },
      },
      boxShadow: {
        custom: "0px 0px 8px 2px rgba(0,0,0,0.75);",
      },
      rotate: {
        17: "17deg",
      },
    },
    fontFamily: {
      sans: ["Sen", "sans-serif"],
      body: ["Comfortaa", "sans-serif"],
    },
  },
  plugins: [
    require("tailwindcss-filters"),
    {
      "postcss-import": {},
      tailwindcss: {},
      autoprefixer: {},
    },
  ],
  mode: "jit",
};
