tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        "custom-gradient":
          "linear-gradient(to bottom right, #cedffb, #54d5fc, #2683f2, #1d81f3)",
      }),
      textShadow: {
        lg: "2px 4px 6px rgba(0, 0, 0, 0.5)",
      },
      colors: {
        "gradient-start": "rgba(252, 178, 231, 0.68)",
        "gradient-middle": "rgba(255, 174, 242, 0.68)",
        "gradient-end": "rgba(242, 117, 237, 0.68)",
        "dashboard-gradient-top": "rgba(160, 255, 181, 0.94)",
        "dashboard-gradient-bottom": "rgba(6, 240, 255, 1)",
        "dashboard-card-gradient-bottom": "rgba(117, 117, 117, 0.46)",
        "dashboard-card-report-gradient": "rgba(203, 199, 199, 0.77)",
        "campaign-input-top": "rgba(252, 178, 231, 0.68)",
        "campaign-input-middle": "rgba(252, 174, 242, 0.68)",
        "campaign-input-bottom": "rgba(242, 117, 237,0.68)",
        "campaign-card-bg-top": "#1e85e47d",
        "campaign-card-bg-middle": "#ffffff80",
        "campaign-card-bg-bottom": "#ffffffcc",
        stone: "#53605B",
        "success-top": "rgba(167, 254, 181, 0.60)",
        "success-bottom": "rgba(240, 7, 231, 0.60)",
      },
      fontFamily: {
        bayon: ["Bayon", "sans-serif"],
        breeSerif: ["BreeSerif", "sans-serif"],
        ChauPhilomeneOne: ["Chau Philomene One", "sans-serif"],
        baijam: ["Bai Jamjuree", "sans-serif"],
        baloo: ["Baloo", "sans-serif"],
        Calistoga: ["Calistoga", "sans-serif"],
        BigShotOne: ["BigShotOne", "sans-serif"],
        VarelaRound: ["VarelaRound", "sans-serif"],
      },
      boxShadow: {
        custom: "14px 18px 30px 0px #1E85E47D",
        buttonShadow:
          " rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px",
        dashBoardCardShadow:
          "0px 28.052980422973633px 0px #1E85E426, 0px 28.052980422973633px 0px #1E85E426",
        dashBoardCardImageShadow:
          "3.847223997116089px 4.946430683135986px 14.289689064025879px 0px #00000040",
        glow: "0 0 10px 0 #45bbf9",
      },
      opacity: {
        57: "0.57",
      },
      transitionDelay: {
        0: "0ms",
        2000: "2000ms",
      },
      keyframes: {
        "fade-in": {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 },
        },
        "zoom-in": {
          "0%": { transform: "scale(0.9)", opacity: "0" },
          "100%": { transform: "scale(1)", opacity: "1" },
        },
        "zoom-out": {
          "0%": { transform: "scale(1)", opacity: "1" },
          "100%": { transform: "scale(0.9)", opacity: "0" },
        },
      },
      screens: {
        "h-md": { raw: "(max-height: 768px)" },
        sm: "687px",
      },
      animation: {
        "fade-in": "fade-in 0.5s ease-out",
        "fade-in-campaign": "fade-in 2s infinite alternate",
        "zoom-in": "zoom-in 0.3s",
        "zoom-out": "zoom-out 0.3s",
        "fade-in-donation": "fade-in 2s infinite alternate",
      },
    },
  },
  variants: {
    extend: {
      transitionDelay: ["hover", "focus"],
    },
  },
  plugins: [],
  corePlugins: {
    scrollbarHide: true,
  },
};