tailwind.config.js

module.exports = {
  content: ["./src/**/*.js"],
  theme: {
    colors: {
      brand: "#31d7fb",
      primary: { DEFAULT: "#0282f8", hover: "#015aad", pressed: "#00407b" },
      background: "#f3f5f8",
      white: { DEFAULT: "#ffffff", hover: "#b2b2b2" },
      black: "#000000"
    },
    boxShadow: {
      DEFAULT: "0 1px 3px 0 rgba(0, 0, 0, 0.5)",
      lg: "0 2px 3px 0 rgba(0, 0, 0, 0.5)"
    },
    spacing: {
      px: "1px",
      "0": "0",
      "1": "5px",
      "2": "10px",
      "3": "15px",
      "4": "20px",
      "5": "25px",
      "6": "30px",
      "7": "35px",
      "8": "40px",
      "9": "45px",
      "10": "50px",
      "11": "55px",
      "12": "60px",
      "13": "65px",
      "15": "75px",
      "16": "80px",
      "18": "90px",
      "20": "100px",
      "52": "260px",
      "58": "290px",
      "82": "410px"
    },
    fontSize: {
      xs: "14px",
      sm: "16px",
      rg: "18px",
      lg: "22px",
      xl: "24px",
      h1: "72px",
      h2: "48px",
      h3: "32px",
      h4: "24px"
    },
    borderWidth: {
      DEFAULT: "5px"
    },
    borderRadius: {
      DEFAULT: "6px"
    }
  },
  plugins: []
};