tailwind.config.js

const fonts = ["Inter", "Helvetica Neue", "sans-serif"]

module.exports = {
  purge: ["./**/*.tsx"],
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
    },
    fontFamily: {
      display: fonts,
      body: fonts,
    },
    extend: {
      maxWidth: {
        text: "35em",
      },
      colors: {
        primary: {
          "10": "#0C008C",
          "9": "#1D0EBE",
          "8": "#3525E6",
          "7": "#4D3DF7",
          "6": "#5D55FA",
          "5": "#7069FA",
          "4": "#8888FC",
          "3": "#A2A5FC",
          "2": "#C4C6FF",
          "1": "#E6E6FF",
        },
        secondary: {
          "10": "#014D40",
          "9": "#0C6B58",
          "8": "#147D64",
          "7": "#199473",
          "6": "#27AB83",
          "5": "#3EBD93",
          "4": "#65D6AD",
          "3": "#8EEDC7",
          "2": "#C6F7E2",
          "1": "#EFFCF6",
        },
        neutral: {
          "10": "#102A43",
          "9": "#243B53",
          "8": "#334E68",
          "7": "#486581",
          "6": "#627D98",
          "5": "#829AB1",
          "4": "#9FB3C8",
          "3": "#BCCCDC",
          "2": "#D9E2EC",
          "1": "#F0F4F8",
        },
        red: {
          "10": "#610316",
          "9": "#8A041A",
          "8": "#AB091E",
          "7": "#CF1124",
          "6": "#E12D39",
          "5": "#EF4E4E",
          "4": "#F86A6A",
          "3": "#FF9B9B",
          "2": "#FFBDBD",
          "1": "#FFE3E3",
        },
        "light-blue": {
          "10": "#035388",
          "9": "#0B69A3",
          "8": "#127FBF",
          "7": "#1992D4",
          "6": "#2BB0ED",
          "5": "#40C3F7",
          "4": "#5ED0FA",
          "3": "#81DEFD",
          "2": "#B3ECFF",
          "1": "#E3F8FF",
        },
        yellow: {
          "10": "#8D2B0B",
          "9": "#B44D12",
          "8": "#CB6E17",
          "7": "#DE911D",
          "6": "#F0B429",
          "5": "#F7C948",
          "4": "#FADB5F",
          "3": "#FCE588",
          "2": "#FFF3C4",
          "1": "#FFFBEA",
        },
      },
    },
  },
  variants: {
    textColor: ["responsive", "hover", "group-hover", "focus", "disabled"],
    backgroundColor: ["responsive", "hover", "focus", "disabled"],
    borderWidth: ["responsive", "first"],
    opacity: ["responsive", "disabled"],
  },
  plugins: [],
}