? Customizing Colors, Fonts, and Spacing in Tailwind CSS

Tailwind allows you to fully customize your design system using the tailwind.config.js file. You can extend or override the default color palette, font families, and spacing scale to match your brand or project needs.

? Location: tailwind.config.js

npx tailwindcss init

This creates:

// tailwind.config.jsmodule.exports = {  theme: {    extend: {      // customizations go here    }  }}

? 1. Custom Colors

You can add brand colors, additional shades, or overwrite existing ones.

module.exports = {  theme: {    extend: {      colors: {        brand: {          light: '#3AB0FF',          DEFAULT: '#0081CF',          dark: '#005082',        },        warning: '#FFB703',      }    }  }}

? Usage:

<div class="bg-brand text-white">Brand Color</div><div class="text-warning">Warning Text</div>

? 2. Custom Fonts

Add custom fonts by extending the fontFamily key.

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

? Usage:

<p class="font-handwriting text-xl">Stylish Text</p>

? 3. Custom Spacing

Tailwind’s spacing scale is used for margin, padding, gap, top, left, inset, width, height, etc.

module.exports = {  theme: {    extend: {      spacing: {        '72': '18rem',        '84': '21rem',        '96': '24rem',        '128': '32rem',      }    }  }}

? Usage:

<div class="p-128">Extra Padding</div>

?? Overriding Defaults

You can replace instead of extend:

module.exports = {  theme: {    colors: {      black: '#000',      white: '#fff',      primary: '#1e40af',    }  }}

?? This removes all default colors unless you re-add them.

? Best Practice

• ? Use extend for adding new utilities.

• ? Avoid replacing defaults unless you're building a custom framework.

• ? Keep color names semantic (primary, danger, info) for easier maintenance.

Would you like a full tailwind.config.js template for branding with fonts, colors, and spacing already set up?