Extending Tailwind: Colors, Fonts & Breakpoints

1. Add Custom Colors

In your tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3AB0FF',
          DEFAULT: '#0084FF',
          dark: '#0057B8'
        }
      }
    }
  }
}
            

Now you can use classes like bg-brand or text-brand-dark in your HTML.

2. Add Custom Fonts

Include a Google Font or local font, then add it to your config:

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Inter"', 'sans-serif'],
        heading: ['"Poppins"', 'sans-serif']
      }
    }
  }
}
            

Then apply with class="font-heading" or font-sans.

3. Add or Override Breakpoints

Define custom screens (breakpoints) to control responsiveness:

module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '475px',
        '3xl': '1600px'
      }
    }
  }
}
            

Use like xs:text-sm or 3xl:container.

4. Tips & Best Practices

• Always use extend to avoid overwriting the default theme.
• Use descriptive names for your custom utilities.
• Consider extracting large themes into a separate file for cleaner config.

Conclusion

Extending Tailwind empowers you to create a design system that reflects your brand and layout preferences — while maintaining the utility-first workflow.