tailwind.config.js

module.exports = {
  purge: ["./components/**/*.js", "./pages/**/*.js", "./public/*.css"],
  theme: {
    boxShadow: {
      custom: "-1px 3px 12px -8px rgba(0,0,0,1)",
      button: "inset 0 -3.25em 0 0 var(--hover)",
    },
    inset: {
      "6": "6px",
      "0": "0",
    },
    fontSize: {
      xs: ".75rem",
      sm: ".875rem",
      tiny: ".875rem",
      base: "1rem",
      lg: "1.125rem",
      xl: "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
      "6xl": "4rem",
      "7xl": "5rem",
    },
    minHeight: {
      "0": "0",
      "1/4": "25%",
      "1/2": "50%",
      "3/4": "75%",
      full: "100%",
    },
    minWidth: {
      "0": "0",
      "1/4": "25%",
      "1/2": "50%",
      "3/4": "75%",
      full: "100%",
      "320": "320px",
    },
    extend: {
      colors: {
        "green-1000": "#00875A",
        "purple-1000": "#5243AA",
        "light-blue": "#F3F8FE",
        "progress-bar": "#B79BE5",
        "progress-bar-2": "#673AB7",
        "light-black": "#172B4D",
        "light-gray-custom": "#7A869A",
        "light-gray-grade-2:": "#DFE1E5",
      },
      textColor: {
        "theme-text": "#4737FF",
      },
      spacing: {
        "72": "18rem",
        "84": "21rem",
        "96": "24rem",
        "375": "375px",
        "300": "300px",
        "30-px": "30px",
        "25-px": "25px",
        "20-px": "20px",
        "550": "550px",
        "670": "670px",
        "308": "308px",
      },
      height: {
        "(screen-16)": "calc(100vh - 4rem)",
        cd: "480px",
        cm: "450px",
        "37": "37rem",
        "drop-size": "200px",
        "icon-w": "34px",
        "icon-h": "28px",
        "35": "35%",
      },
      backgroundColor: () => ({
        "main-theme": "#EAE6FF",
      }),
    },
    maxHeight: {
      "420": "420px",
    },
  },
  variants: {},
  plugins: [],
};