tailwind.config.js

module.exports = {
  content: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    fontFamily: {
      sans: ['Calibre', /* ... */,'sans-serif']
      serif: ["'GT Alpina'", /* ... */, 'serif'],
    },
    screens: {
      xs: '384px',
      ...screens,
      '3xl': '2024px',
    },
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            a: {
              color: theme('colors.steel'),
            },
          },
        },
      }),
      container: {
        padding: {
          DEFAULT: '2rem',
          md: '3rem',
          xl: '4rem',
        },
      },
      colors: {
        blurple: '#4840bb',
        'blurple-light': '#958CF2',
        'eggplant-light': '#5a4a80',
        lavender: '#dadef1',
        lavender2: '#BDC6F5',
        peach: '#df8c5e',
        periwinkle: '#7086C9',
        caracara: '#ad6035',
        // ...
      },
      breakpoints: {
        xs: '384px',
      },

      gridTemplateColumns: {
        '60/40': '6fr 4fr',
        header: 'minmax(0, 1fr) auto minmax(0, 1fr)',
      },

      // When adding a font size, add classes for *all* breakpoints (i.e. -mobile, -xl) to reduce
      // cognitive load when using in app
      fontSize: {
        // Heading 1 styles
        h1: ['63.3px', { lineHeight: 0.9, letterSpacing: '-0.03em' }],
        'h1-alt': ['60px', { lineHeight: 0.9, letterSpacing: '-0.05em' }],
        'h1-mobile': ['42.2px', { lineHeight: 0.9, letterSpacing: '-0.03em' }],
        
        // ...
        
        // Body styles
        body: ['18px', { lineHeight: 1.2 }],
        'body-mobile': ['18px', { lineHeight: 1.2 }],
        'body-xl': ['22.5px', { lineHeight: 1.2 }],

        // Body Small styles
        'body-sm': ['16px', { lineHeight: 1.2 }],
        'body-sm-mobile': ['16px', { lineHeight: 1.2 }],
        'body-sm-xl': ['20px', { lineHeight: 1.2 }],

        // ...
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/line-clamp')],
};