Tailwind CSS Theme Extensions: Colors, Spacing, Fonts

In Tailwind CSS, theme extensions let you add custom values (colors, spacing, fonts, etc.) without overwriting the default design system. This is done inside the extend property in your tailwind.config.js.

1. Extending Colors

Add new custom colors alongside the default palette:

module.exports = {  theme: {    extend: {      colors: {        brand: {          light: '#3ABFF8',          DEFAULT: '#0D8ED9',          dark: '#0A6CB8',        },        accent: '#FF6363',      },    },  },}

Usage in HTML:

<div class="bg-brand text-white p-4">  This div uses the custom "brand" color!</div>

2. Extending Spacing

Add custom spacing values to use with margin, padding, width, height, etc.:

module.exports = {  theme: {    extend: {      spacing: {        '72': '18rem',   // Example: mt-72, p-72        '84': '21rem',        '96': '24rem',      },    },  },}

Usage in HTML:

<div class="mt-72 p-8">  This div has a huge top margin!</div>

3. Extending Fonts

Add custom font families:

module.exports = {  theme: {    extend: {      fontFamily: {        sans: ['Inter', 'ui-sans-serif', 'system-ui'],        serif: ['Merriweather', 'serif'],        display: ['Oswald'],      },    },  },}

Usage in HTML:

<h1 class="font-display text-4xl">This heading uses the 'Oswald' font</h1><p class="font-serif">This paragraph uses 'Merriweather'.</p>

Summary Table

If you want, I can help you create a full tailwind.config.js example with your own custom theme extensions!