Tailwind CSS - Customizing Colors

Tailwind CSS Colors allow you to specify the default color palette for your project.

Tailwind comes with a pre-made color palette to help you get started if you don't have your own specific branding in mind.

Using custom colors

You can change the default colors to your own choices by adding your custom colors directly under the 'theme.colors' section of your configuration file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
    },
  },
}

These colors are available for use in various aspects like text, borders, backgrounds, etc. You can also use "transparent" and "currentColor" for specific situations in your project.

<div class="bg-midnight text-tahiti">
  <!-- ... -->
</div>

Color object syntax

When your palette includes multiple shades of the same color, it can be convenient to group them together using nested color object syntax.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      },
      // ...
    },
  },
}

The nested keys will be combined with the parent key to form class names like bg-tahiti-400.

Use the "DEFAULT" key when you don't want to add any extra words to a value.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // ...
      'tahiti': {
        light: '#67e8f9',
        DEFAULT: '#06b6d4',
        dark: '#0e7490',
      },
      // ...
    },
  },
}

This will create classes like bg-tahiti, bg-tahiti-light, and bg-tahiti-dark.

Arbitrary values

Use arbitrary value notation to create a one-time custom color class, instead of adding it to your theme.

<button class="bg-[#1da1f2] text-white ...">
  <svg><!-- ... --></svg>
  Share on Twitter
</button>

Generating colors

Tailwind's default colors were hand-picked for the best results. For custom colors, use tools like UI Colors, Palettte, or ColorBox to help create a balanced palette.

Using the default colors

You can use Tailwind's default colors by importing "tailwindcss/colors" and selecting the ones you need.

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}

Aliasing color names

You can also rename default colors to simpler names that are easy to remember.

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.slate,
      green: colors.emerald,
      purple: colors.violet,
      yellow: colors.amber,
      pink: colors.fuchsia,
    },
  },
}

This is especially common for grays, as you typically use only one set in any given project. It's nice to be able to type bg-gray-300 instead of bg-neutral-300 for example.

Adding additional colors

If you want to add a brand new color to the default palette, add new colors to the "theme.extend.colors" section of your settings file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        brown: {
          50: '#fdf8f6',
          100: '#f2e8e5',
          200: '#eaddd7',
          300: '#e0cec7',
          400: '#d2bab0',
          500: '#bfa094',
          600: '#a18072',
          700: '#977669',
          800: '#846358',
          900: '#43302b',
        },
      }
    },
  },
}

You can also use theme.extend.colors to add additional shades to an existing color if it's needed for your design.

Disabling a default color

If you want to disable any of the default colors, the best approach is to override the default color palette and and include only the colors you want.

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,
    },
  },
}

Naming your colors

Tailwind uses simple color names and a light-to-dark scale by default, but you can customize color names to fit your project's needs, like using abstract names for multiple themes.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

You can configure those colors explicitly like we have above, or you can pull in colors from our default color palette and alias them:

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

Using CSS variables

If you want to use custom colors with opacity, define them as simple color values (like red, blue, etc.) instead of using CSS variables.

Define your CSS variables as channels with no color space function

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: 255 115 179;
    --color-secondary: 111 114 185;
    /* ... */
  }
}

Don't include the color space function, or the opacity modifiers won't work.

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: rgb(255 115 179);
    --color-secondary: rgb(111 114 185);
    /* ... */
  }
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    colors: {
      // Using modern `rgb`
      primary: 'rgb(var(--color-primary) / <alpha-value>)',
      secondary: 'rgb(var(--color-secondary) / <alpha-value>)',

      // Using modern `hsl`
      primary: 'hsl(var(--color-primary) / <alpha-value>)',
      secondary: 'hsl(var(--color-secondary) / <alpha-value>)',

      // Using legacy `rgba`
      primary: 'rgba(var(--color-primary), <alpha-value>)',
      secondary: 'rgba(var(--color-secondary), <alpha-value>)',
    }
  }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* For rgb(255 115 179 / <alpha-value>) */
    --color-primary: 255 115 179;

    /* For hsl(198deg 93% 60% / <alpha-value>) */
    --color-primary: 198deg 93% 60%;

    /* For rgba(255, 115, 179, <alpha-value>) */
    --color-primary: 255, 115, 179;
  }
}