tailwind.config.js

module.exports = {
  content: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    screens: {
      xs: "360px",
      sm: "576px",
      md: "768px",
      lg: "976px",
      xl: "1440px",
    },
    colors: {
      primary: "#669FBA",
      secondary: "#9CC2D3",
      accent: "#ACBAC3",
      slateDark: "#23272A",
      slateLight: "#2C2F33",
      light300: "#4D5F6A",
      light200: "#ACBAC3",
      light100: "#DCE1E5",
      light000: "#F3F5F6",
      blue200: "#669FBA",
      blue100: "#9CC2D3",
      blue000: "#E3EDF2",
      red200: "#E56544",
      red100: "#EB886F",
      red000: "#FDF0ED",
      green200: "#60AF7B",
      green100: "#92C8A5",
      green000: "#F1F8F4",
      warning: "#FFD860",
      danger: "#E56544",
      dangerLight: "#FDF0ED",
      success: "#60AF7B",
      successLight: "#F1F8F4",
      info: "#669FBA",
      gray: "#8492a6",
      white: "#fff",
      black: "#212121",
      transparentDark: "#23272A99",
      transparentLight: "#DCE1E533",
      transparent: "transparent",
      transparentWhite: "#ffffff99",
    },
    fontFamily: {
      sans: ["Graphik", "sans-serif"],
      serif: ["Merriweather", "serif"],
      mono: [
        "ui - monospace",
        "SFMono - Regular",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "Courier New",
        "monospace",
      ],
    },
    extend: {
      inset: {
        "50px": "50px",
      },
      spacing: {
        128: "32rem",
        144: "36rem",
      },
      outlineWidth: {
        1: "1px",
      },
      borderWidth: {
        1: "1.5px",
      },
      height: {
        "custom-lg": "calc(100vh - 200px)",
        "custom-xl": "calc(100vh - 135px)",
        "custom-xxl": "calc(100vh - 64px)",
        "fix-400": "400px",
      },
      width: {
        "custom-m": "calc(100vw - 80px)",
        "custom-l": "calc(100vw - 156px)",
        330: "330px",
      },
      minHeight: {
        16: "4rem",
        18: "4.5rem",
        20: "5rem",
        28: "7rem",
        32: "8rem",
        96: "24rem",
        "1/4": "25%",
        "fix-400": "400px",
      },
      maxHeight: {
        28: "7rem",
        56: "14rem",
      },
      minWidth: {
        32: "8rem",
        36: "9rem",
        44: "11rem",
        72: "18rem",
        96: "24rem",
      },
      maxWidth: {
        36: "9rem",
        56: "14rem",
        72: "18rem",
      },
      zIndex: {
        100: "100",
        110: "110",
        "z-over-draggable": 5001,
      },
    },
  },
}