tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        background: "hsl(0, 0%, 100%)",
        foreground: "hsl(222.2 47.4% 11.2%)",
        muted: {
          DEFAULT: "hsl(210 40% 96.1%)",
          foreground: "#A29DB1",
        },
        popover: {
          DEFAULT: "hsl(0 0% 100%)",
          foreground: "#403E47",
        },
        border: "hsl(214.3 31.8% 91.4%)",
        input: "#EEEDF1",
        accent: {
          DEFAULT: "#FAF9FA",
          foreground: "hsl(222.2 47.4% 11.2%)",
        },
        ring: "#EEEDF1",
        grey: {
          50: "#FAF9FA",
          100: "#EEEDF1",
          200: "#E2E0E6",
          300: "#D3D1DB",
          400: "#C5C2CF",
          500: "#B4B0C1",
          600: "#A29DB1",
          700: "#8B869B",
          800: "#6E697B",
          900: "#403E47",
        },
        primary: {
          50: "#F1ECFE",
          100: "#D4C5FD",
          200: "#BFA9FC",
          300: "#A282FA",
          400: "#906AF9",
          500: "#7445F8",
          600: "#6A3FE2",
          700: "#5231B0",
          800: "#402688",
          900: "#311D68",
        },
        info: {
          50: "#F4F7FE",
          100: "#E9EFFD",
          200: "#C8D8FA",
          300: "#92B1F5",
          400: "#5C8AF0",
          500: "#2563EB",
          600: "#1F54C8",
          700: "#1943A0",
          800: "#10327E",
          900: "#0B265F",
        },
        success: {
          50: "#EFFDF6",
          100: "#D9F9E6",
          200: "#B8F1D2",
          300: "#8EE4BA",
          400: "#6AD09D",
          500: "#53B483",
          600: "#2F9461",
          700: "#2F7657",
          800: "#255E46",
          900: "#1E4D3A",
        },
        alert: {
          50: "#FEFAF5",
          100: "#FBF2CB",
          200: "#FDE57E",
          300: "#FFD16A",
          400: "#FBBC55",
          500: "#E9A23B",
          600: "#C8811A",
          700: "#A35C00",
          800: "#8B4400",
          900: "#78310B",
        },
        destructive: {
          50: "#FEF2F2",
          100: "#FDE9E9",
          200: "#FAC7C7",
          300: "#F7A1A1",
          400: "#F37373",
          500: "#F34141",
          600: "#CD3636",
          700: "#A32E2E",
          800: "#7C2323",
          900: "#601B1B",
        },
      },
      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")],
};