Search⌘ K
AI Features
Home
Courses
Understanding the Basics of Tailwind CSS

Customizing Tailwind’s Theme Colors

Explore how to customize Tailwind CSS theme colors by adding unique shades or replacing the default palette. Understand how to integrate brand colors and use custom names to enhance your web design workflow.

We'll cover the following...

In this lesson, we’ll explore how we can customize Tailwind theme colors to use them on our web pages.

Adding specific colors

Tailwind offers a precisely selected color palette that will be enough in many scenarios. However, in some cases, we might want to add some specific colors or shades to it—such as our brand colors. In this case, we can extend the default colors as follows:

Javascript (babel-node)
module.exports = {
  theme: {
    extend: {
      colors: {
        maroon: {
          50: '#e46464',
          100: '#d05050',
          200: '#bc3c3c',
          300: '#a82828',
          400: '#941414',
          500: '#800000',
          600: '#6c0000',
          700: '#580000',
          800: '#440000',
          900: '#300000'
        }, indigo: {
          950: '#1d1a6d'
        }
      }
    }
  }
}

Lines ...