tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        // Same as what we have in colors.scss, but accessible via tailwind
        "purple200": "#1b0b3b",
        "purple140": "#5028c0",
        "purple100": "#7856ff",
        "purple50": "#9075ff",
        "purple40": "#b094ff",
        "purple20": "#e8ddff",
      
        "lava200": "#5b0137",
        "lava140": "#cc332b",
        "lava100": "#ff7558",
        "lava40": "#ffb0a3",
        "lava20": "#ffe1d6",
      
        "mint200": "#112e29",
        "mint140": "#09b096",
        "mint100": "#80e1d9",
        "mint40": "#bcf0f0",
        "mint20": "#e0fafa",
      
        "mustard200": "#a33c16",
        "mustard140": "#da6b15",
        "mustard100": "#f8bc3b",
        "mustard40": "#fede9b",
        "mustard20": "#ffefdb",
      
        "base120": "#eae6e7",
        "base100": "#f5f2f2",
        "base80": "#fbf9f9",
      
        "black": "#000",
        "grey100": "#201f24",
        "grey80": "#626266",
        "grey50": "#9b9b9b",
        "grey30": "#c0c0c0",
        "grey10": "#e9e9e9",
        "white": "#fff"
      }
    },
  },
  plugins: [],
}