tailwind.config.js

module.exports = {
  theme: {
    extend: {
      spacing: {
        "80": "20rem",
        "108": "27rem"
      },
      borderWidth: {
        "14": "14px"
      }
    },
    container: {
      padding: "1rem"
    },
    colors: {
      background: {
        primary: "var(--bg-background-primary)",
        secondary: "var(--bg-background-secondary)",
        tertiary: "var(--bg-background-tertiary)",
        accent: "var(--bg-background-accent)"
      },

      copy: {
        primary: "var(--text-copy-primary)",
        secondary: "var(--text-copy-secondary)",
        accent: "var(--text-copy-accent)"
      },

      border: {
        primary: "var(--bg-background-primary)",
        secondary: "var(--bg-background-secondary)",
        accent: "var(--bg-background-accent)"
      },

      transparent: "transparent",

      black: "#000",
      white: "#fff",

      green: {
        100: "#f0fff4",
        200: "#c6f6d5",
        300: "#9ae6b4",
        400: "#68d391",
        500: "#48bb78",
        600: "#38a169",
        700: "#2f855a",
        800: "#276749",
        900: "#22543d"
      },

      gray: {
        100: "#f7fafc",
        200: "#edf2f7",
        300: "#e2e8f0",
        400: "#cbd5e0",
        500: "#a0aec0",
        600: "#718096",
        700: "#4a5568",
        800: "#2d3748",
        900: "#1a202c"
      }
    }
  },
  variants: {
    // Some useful comment
  },
  plugins: [
    // Some useful comment
  ]
}