tailwind.config.js

module.exports = {
  purge: ["./src/**/*.js"],
  theme: {
    fontFamily: {
      sans: ["IBM Plex Sans", "sans-serif"],
      mono: ["IBM Plex Mono", "monospace"],
    },
    fontSize: {
      8: ["8px", {letterSpacing: "0.02em", lineHeight: "16px"}],
      10: ["10px", {letterSpacing: "0.02m", lineHeight: "16px"}],
      12: ["12px", {letterSpacing: "0.01em", lineHeight: "16px"}],
      14: ["14px", {letterSpacing: "0.01em", lineHeight: "20px"}],
      16: ["16px", {letterSpacing: "0em", lineHeight: "24px"}],
      20: ["20px", {letterSpacing: "-0.02em", lineHeight: "32px"}],
      24: ["24px", {letterSpacing: "-0.024em", lineHeight: "32px"}],
      32: ["32px", {letterSpacing: "-0.032em", lineHeight: "40px"}],
      40: ["40px", {letterSpacing: "-0.04em", lineHeight: "56px"}],
      48: ["48px", {letterSpacing: "-0.04em", lineHeight: "64px"}],
      56: ["56px", {letterSpacing: "-0.04em", lineHeight: "64px"}],
      64: ["64px", {letterSpacing: "-0.04em", lineHeight: "80px"}],
      72: ["72px", {letterSpacing: "-0.04em", lineHeight: "80px"}],
      80: ["80px", {letterSpacing: "-0.04em", lineHeight: "80px"}],
      96: ["96px", {letterSpacing: "-0.04em", lineHeight: "96px"}],
    },
    opacity: {
      0: "0",
      "05": "0.05",
      10: "0.1",
      15: "0.15",
      20: "0.2",
      25: "0.25",
      30: "0.3",
      40: "0.4",
      50: "0.5",
      60: "0.6",
      70: "0.7",
      75: "0.75",
      80: "0.8",
      90: "0.9",
      95: "0.95",
      100: "1",
    },
    extend: {
      colors: {
        gray: {
          100: "#f6f8fa",
          200: "#edf0f2",
          300: "#d1d8e0",
          400: "#b1bbc7",
          500: "#919daf",
          600: "#627491",
          700: "#415372",
          800: "#213252",
          900: "#001133",
        },
        red: {
          100: "#fff6f6",
          200: "#ffd3d3",
          300: "#ffa0a0",
          400: "#f68484",
          500: "#ee6868",
          600: "#e54c4c",
          700: "#bc5959",
          800: "#9b2c2c",
          900: "#742a2a",
        },
        orange: {
          100: "#fffaf0",
          200: "#feebc8",
          300: "#fbd38d",
          400: "#f6ad55",
          500: "#f97850",
          600: "#e75d32",
          700: "#d1471d",
          800: "#b5360f",
          900: "#952806",
        },
        yellow: {
          100: "#fff8de",
          200: "#fff2bd",
          300: "#ffe383",
          400: "#fbd878",
          500: "#f4c222",
          600: "#e3b111",
          700: "#ce9f07",
          800: "#b48a02",
          900: "#957201",
        },
        green: {
          100: "#e0fdf5",
          200: "#97ebd3",
          300: "#4ed8b1",
          400: "#05c68f",
          500: "#25c295",
          600: "#44bd9b",
          700: "#64b9a1",
          800: "#0f936e",
          900: "#10523f",
        },
        teal: {
          100: "#effcfc",
          200: "#c5eaea",
          300: "#9ad8d8",
          400: "#33cccc",
          500: "#1eb7b7",
          600: "#109d9d",
          700: "#067d7d",
          800: "#025858",
          900: "#003333",
        },
        blue: {
          100: "#ebf8ff",
          200: "#b7e0ff",
          300: "#83c7ff",
          400: "#6caeff",
          500: "#5496ff",
          600: "#3d7dff",
          700: "#0051ff",
          800: "#0050af",
          900: "#032a76",
        },
        indigo: {
          100: "#ebf4ff",
          200: "#c3dafe",
          300: "#a3bffa",
          400: "#7f9cf5",
          500: "#667eea",
          600: "#5a67d8",
          700: "#4c51bf",
          800: "#434190",
          900: "#3c366b",
        },
        purple: {
          100: "#f7f7ff",
          200: "#dbd8ff",
          300: "#bebafe",
          400: "#a29bfe",
          500: "#7f7cf2",
          600: "#5c5ce5",
          700: "#483ebd",
          800: "#342196",
          900: "#20036e",
        },
        pink: {
          100: "#f4ecee",
          200: "#e8d9dd",
          300: "#d9b3be",
          400: "#c792a2",
          500: "#ff5a89",
          600: "#db4478",
          700: "#b82f67",
          800: "#941956",
          900: "#700345",
        },
      },
      translate: {
        "0.5": "0.125rem",
        "-0.5": "-0.125rem",
      },
      spacing: {
        80: "20rem",
        120: "30rem",
        "page-margin": "6.25%",
      },
      inset: {
        "1/2": "50%",
      },
      zIndex: {
        '1': '1',
        '2': '2',
        '3': '3',
      },
    },
  },
  variants: {
    textColor: ["responsive", "hover", "focus", "group-hover", "disabled", "active"],
    backgroundColor: ["responsive", "hover", "active"],
    visibility: ["responsive", "group-hover"],
    borderWidth: ["responsive", "focus-within", "first", "last"],
    borderStyle: ["responsive", "focus-within"],
    borderColor: ["responsive", "hover", "focus", "focus-within"],
    display: ["responsive", "group-hover"],
    opacity: ["responsive", "hover", "focus", "disabled"],
    translate: ["responsive", "hover", "focus", "group-hover"],
    textDecoration: ['responsive', 'hover'],
  },
  plugins: [
    // Add plugins to extend tailwind's capabilities
    // You can find plugins at:
    // https://www.tailwindtoolbox.com/plugins and
    // https://github.com/aniftyco/awesome-tailwindcss
    require("@tailwindcss/custom-forms"),
  ],
}