Part 52: Custom Color Palettes, Fonts & Spacing Scales

Embedding design tokens directly into Tailwind gives your entire team instant access to brand guidelines.

1. Adding Brand Fonts (e.g., Outfit)

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Outfit', 'sans-serif'],
        display: ['Cabinet Grotesk', 'sans-serif'],
      },
      spacing: {
        '128': '32rem', // w-128 or p-128
        '144': '36rem',
      }
    }
  }
}

Key Takeaways

• Design tokens declared in theme.extend become auto-completable utility classes instantly.

In Part 53, we will explore Arbitrary Values with Square Brackets [value]!