tailwind.config.js

module.exports = {
  darkMode: "class",
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
    "./src/layouts/**/*.{js,ts,jsx,tsx}",
    "./src/pages/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      sans: ['"IBM Plex Sans"', "sans-serif"],
    },
    colors: {
      transparent: "#0000",
      black: "#000000",
      white: "#FFFFFF",
      primary: {
        25: "#FFF0FA",
        50: "#FFE5F7",
        100: "#FFCCEF",
        200: "#FF99DF",
        300: "#FF66CF",
        400: "#FF33BF",
        500: "#FF00AF",
        600: "#D60093",
        700: "#AD0077",
        800: "#85005B",
        900: "#5C003F",
      },
      "dark-primary": {
        25: "#2F0421",
        50: "#460632",
        100: "#751657",
        200: "#8F1A6A",
        300: "#CD1F96",
        400: "#D6249E",
        500: "#EE2CB1",
        600: "#F268C7",
        700: "#F8ABE0",
        900: "#FFDFF5",
      },
      secondary: {
        50: "#E8DEFF",
        100: "#D9C7FF",
        200: "#B999FF",
        300: "#9A6BFF",
        400: "#7A3DFF",
        500: "#5B0FFF",
        600: "#4A00EB",
        700: "#3E00C7",
        800: "#3400A3",
        900: "#28007F",
      },
      gray: {
        50: "#FAFAFA",
        100: "#F5F5F5",
        200: "#E5E5E5",
        300: "#D4D4D4",
        400: "#A3A3A3",
        500: "#737373",
        600: "#525252",
        700: "#404040",
        800: "#262626",
        900: "#171717",
      },
      "dark-gray": {
        0: "#000000",
        50: "#171717",
        100: "#262626",
        200: "#404040",
        300: "#525252",
        400: "#737373",
        500: "#A3A3A3",
        600: "#D4D4D4",
        900: "#FAFAFA",
      },
      red: {
        50: "#FFF2F2",
        100: "#FFE6E6",
        200: "#FFBFBF",
        300: "#FF9999",
        500: "#ED1414",
        600: "#CC0000",
        700: "#A30000",
      },
      "dark-red": {
        50: "#441411",
        100: "#7D221C",
        200: "#992923",
        300: "#FFB5B0",
        500: "#FF453A",
        600: "#FF7D75",
        700: "#BF342C",
      },
      orange: {
        50: "#FFFAF4",
        100: "#FFF5EA",
        200: "#FFD2A3",
        300: "#FFD5A9",
        500: "#FF9629",
        600: "#E68725",
        700: "#BF711F",
      },
      "dark-orange": {
        50: "#382301",
        100: "#7D4E05",
        200: "#FFE7C2",
        300: "#BF7708",
        500: "#FF9F0A",
        600: "#FFB94C",
        700: "#FFD99D",
      },
      green: {
        50: "#F2FBF4",
        100: "#E6F7E8",
        200: "#6FFD83",
        300: "#9AE1A4",
        500: "#02B31B",
        600: "#12BB41",
        700: "#028614",
      },
      "dark-green": {
        50: "#0B3812",
        100: "#196925",
        200: "#CCF5D2",
        300: "#26A138",
        500: "#32D74B",
        600: "#70E381",
        700: "#ADEFB7",
      },
      blue: {
        50: "#F7FBFE",
        100: "#EFF6FD",
        200: "#D6EAF9",
        300: "#BDDDF5",
        500: "#5AA9E6",
        600: "#5198CF",
        700: "#3A6C92",
        800: "#2048AE",
      },
      "dark-blue": {
        50: "#0B1C26",
        100: "#132E40",
        200: "#1B4059",
        300: "#5398C6",
        500: "#4CB8FF",
        600: "#9ED6FA",
        700: "#CBE9FD",
      },
    },
  },
};