Custom Config

Extend colors, spacing, and fonts in tailwind.config

Customize Tailwind by extending the default theme in tailwind.config.js. Add colors, spacing, fonts, and plugins.

Add brand colors to your palette. They become available as bg-brand, text-brand, etc.

Brand Palette

brand-50#fff7ed

brand-100#ffedd5

brand-500#f97316

brand-900#7c2d12

tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#fff7ed',
          100: '#ffedd5',
          500: '#f97316',
          900: '#7c2d12',
        },
      },
    },
  },
}

25 / 35