Customization

Configuration and Theme

The tailwind.config.js file is where you customize the framework — most often by extending the theme with your brand colors, fonts and spacing.

Extending the theme

Use theme.extend to ADD to the defaults (keeping all built-in utilities). Define a color once and you instantly get bg-brand, text-brand, border-brand and more.

tailwind.config.js — add a brand color and font

module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: { DEFAULT: '#2563eb', dark: '#1e3a8a' },
      },
      fontFamily: {
        display: ['Poppins', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

Using the custom color (works after a build with this config)

Example

<button class="bg-brand hover:bg-brand-dark text-white px-4 py-2 rounded-lg">Brand button</button>

⚠️

The content array is important: Tailwind scans those files and only generates the classes it finds. If a class is missing in production, check that its file is listed here.

Configuration and Theme

Extending the theme

Related Tailwind Topics