my-website/tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {
      colors: {
        'black' : '#0B0C0E',
        'dark-gray' : '#3C3D3E',
        'light-gray' : '#C7D0D9',
        'off-white' : '#F4F7FA',
      },
      //in general we should use rem instead of pixels for sizes
      fontSize: {
        'heading-display' : '150px',
        'heading1' : '91px',
        'heading2' : '60px',
        'heading3' : '40px',
        'heading4' : '27px',
        'para-large' : '27px',
        'para-medium' : '18px',
        'para-small' : '14px',
      },
    },
  },
  plugins: [],
}