tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,jsx}",
    "./components/**/*.{js,jsx}",
    "./app/**/*.{js,jsx}",
    "./src/**/*.{js,jsx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        // primary: {
        //   DEFAULT: "hsl(var(--primary))",
        //   foreground: "hsl(var(--primary-foreground))",
        // },
        primary: "#f13a01",
        "cerulean-blue": {
          50: "#ecf9ff",
          100: "#d4efff",
          200: "#b3e5ff",
          300: "#7fd7ff",
          400: "#43beff",
          500: "#189dff",
          600: "#007bff",
          700: "#0063fb",
          800: "#0353d3",
          900: "#0a469e",
          950: "#0c2b5f",
        },
        astronaut: {
          50: "#f2f5fc",
          100: "#e2e9f7",
          200: "#cbd8f2",
          300: "#a7bfe9",
          400: "#7d9edd",
          500: "#5f7fd2",
          600: "#4b64c5",
          700: "#4153b4",
          800: "#3a4693",
          900: "#313b72",
          950: "#232748",
        },
        mercury: {
          50: "#f7f7f7",
          100: "#ededed",
          200: "#e5e5e5",
          300: "#c8c8c8",
          400: "#adadad",
          500: "#999999",
          600: "#888888",
          700: "#7b7b7b",
          800: "#676767",
          900: "#545454",
          950: "#363636",
        },
        "ship-cove": {
          50: "#f4f7fa",
          100: "#e6ecf3",
          200: "#d2ddeb",
          300: "#b3c7dd",
          400: "#8faacb",
          500: "#6a88b9",
          600: "#6179af",
          700: "#56699f",
          800: "#4a5783",
          900: "#3f4a69",
          950: "#292f42",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      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")],
};