Customizing Tailwind with theme.extend

theme.extend adds to the default system without removing it. theme without extend replaces it entirely — dangerous unless intentional.

Adding custom colors and fonts

// tailwind.config.js
export default {
  content: ["./src/**/*.{html,js,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        brand: {
          50:  "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a8a",
        },
      },
      fontFamily: {
        sans:    ["Inter", "system-ui", "sans-serif"],
        display: ["Cal Sans", "Inter", "sans-serif"],
        mono:    ["JetBrains Mono", "monospace"],
      },
      spacing: {
        "18":  "4.5rem",
        "128": "32rem",
      }
    }
  }
}

Using custom tokens in HTML

<div class="bg-brand-50 text-brand-900">
  <h1 class="font-display text-4xl">Custom branded heading</h1>
  <div class="mt-18 max-w-128">Custom spacing tokens</div>
</div>

Custom tokens immediately become utility classes. brand-500 generates bg-brand-500, text-brand-500, border-brand-500 — one token, all utilities generated automatically.