tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    container: {
      center: true,
      padding: "1rem",
      screens: {
        sm: "600px",
        md: "728px",
        lg: "984px",
        xl: "1240px",
        "2xl": "1496px",
      },
    },
    boxShadow: {
      custom: "rgba(0, 0, 0, 0.1) 0px 4px 12px",
      custom_secondary: "rgba(0, 0, 0, 0.030) 5.4px 2.4px 3.2px",
    },
    colors: {
      transparent: "transparent",
      white: "#ffffff",
      black: "#000000",
      primary: {
        50: "#ebfef7",
        100: "#d0fbe9",
        200: "#a4f6d8",
        300: "#6aebc4",
        400: "#2fd8aa",
        500: "#0abf94",
        600: "#00a884",
        700: "#007c65",
        800: "#036250",
        900: "#045043",
      },
      secondary: {
        50: "#fff4ed",
        100: "#ffe5d4",
        200: "#ffc8a9",
        300: "#ff9966",
        400: "#fe6f39",
        500: "#fc4913",
        600: "#ed2f09",
        700: "#c51f09",
        800: "#9c1a10",
        900: "#7e1810",
      },
      sunglow: {
        50: "#fffaeb",
        100: "#fff1c6",
        200: "#fee489",
        300: "#feca38",
        400: "#feba21",
        500: "#f89808",
        600: "#dc7103",
        700: "#b64e07",
        800: "#943c0c",
        900: "#79320e",
      },
      gray: {
        50: "#f8f8f8",
        100: "#f0f0f0",
        200: "#e4e4e4",
        300: "#d1d1d1",
        400: "#b4b4b4",
        500: "#999999",
        600: "#818181",
        700: "#6a6a6a",
        800: "#5a5a5a",
        900: "#4e4e4e",
      },
    },
  },
  plugins: [],
};