tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: {
          100: "#FEE9D1",
          200: "#FECEA4",
          300: "#FDAB76",
          400: "#FB8A54",
          500: "#FA541C",
          600: "#D73714",
          700: "#B3200E",
          800: "#900E08",
          900: "#770508",
        },
        gray: {
          25: "#FCFCFD",
          50: "#F9FAFB",
          100: "#F9FAFB",
          200: "#F4F6F8",
          300: "#DFE3E8",
          400: "#C4CDD5",
          500: "#919EAB",
          600: "#637381",
          700: "#454F5B",
          800: "#212B36",
          900: "#161C24",
        },
        error: {
          100: "#FFE3D5",
          200: "#FFC1AC",
          300: "#FF9882",
          400: "#FF7163",
          500: "#FF3030",
          600: "#DB2333",
          700: "#B71833",
          800: "#930F31",
          900: "#7A0930",
        },
        success: {
          100: "#E9FCD9",
          200: "#CEFAB4",
          300: "#AAF18C",
          400: "#86E36D",
          500: "#54D140",
          600: "#36B32E",
          700: "#209622",
          800: "#14791E",
          900: "#0C641B",
        },
        warning: {
          100: "#FFF5DA",
          200: "#FFE9B6",
          300: "#FFDA91",
          400: "#FFCB76",
          500: "#FFB349",
          600: "#DB8E35",
          700: "#B76D24",
          800: "#935017",
          900: "#7A3A0E",
        },
        info: {
          100: "#D8F3FF",
          200: "#B2E4FF",
          300: "#8BD0FF",
          400: "#6FBEFF",
          500: "#3F9FFF",
          600: "#2E7CDB",
          700: "#1F5CB7",
          800: "#144093",
          900: "#0C2D7A",
        },
      },
      boxShadow: {
        z1: "rgba(145, 158, 171, 0.16) 0px 1px 2px 0px",
        z4: "rgba(145, 158, 171, 0.16) 0px 4px 8px 0px",
        z8: "rgba(145, 158, 171, 0.16) 0px 8px 16px 0px",
        z12: "rgba(145, 158, 171, 0.16) 0px 12px 24px -4px",
        z16: "rgba(145, 158, 171, 0.16) 0px 16px 32px -4px",
        z20: "rgba(145, 158, 171, 0.16) 0px 20px 40px -4px",
        z24: "rgba(145, 158, 171, 0.16) 0px 24px 48px 0px",
        card: "rgba(145, 158, 171, 0.2) 0px 0px 2px 0px, rgba(145, 158, 171, 0.12) 0px 12px 24px -4px",
        dropdown: "rgba(145, 158, 171, 0.24) 0px 0px 2px 0px, rgba(145, 158, 171, 0.24) -20px 20px 40px -4px",
        dialog: "rgba(145, 158, 171, 0.24) -40px 40px 80px -8px",
      },
      opacity: {
        8: "0.08",
        16: "0.16",
        24: "0.24",
        32: "0.32",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}