Customization

Customizing Colors

Customizing the default color palette for your project.

Default color palette

Tailwind includes an expertly-crafted default color palette out-of-the-box that is a great starting point if you don’t have your own specific branding in mind.

Slate

50

F8FAFC

100

F1F5F9

200

E2E8F0

300

CBD5E1

400

94A3B8

500

64748B

600

475569

700

334155

800

1E293B

900

0F172A

Gray

50

F9FAFB

100

F3F4F6

200

E5E7EB

300

D1D5DB

400

9CA3AF

500

6B7280

600

4B5563

700

374151

800

1F2937

900

111827

Zinc

50

FAFAFA

100

F4F4F5

200

E4E4E7

300

D4D4D8

400

A1A1AA

500

71717A

600

52525B

700

3F3F46

800

27272A

900

18181B

Neutral

50

FAFAFA

100

F5F5F5

200

E5E5E5

300

D4D4D4

400

A3A3A3

500

737373

600

525252

700

404040

800

262626

900

171717

Stone

50

FAFAF9

100

F5F5F4

200

E7E5E4

300

D6D3D1

400

A8A29E

500

78716C

600

57534E

700

44403C

800

292524

900

1C1917

Red

50

FEF2F2

100

FEE2E2

200

FECACA

300

FCA5A5

400

F87171

500

EF4444

600

DC2626

700

B91C1C

800

991B1B

900

7F1D1D

Orange

50

FFF7ED

100

FFEDD5

200

FED7AA

300

FDBA74

400

FB923C

500

F97316

600

EA580C

700

C2410C

800

9A3412

900

7C2D12

Amber

50

FFFBEB

100

FEF3C7

200

FDE68A

300

FCD34D

400

FBBF24

500

F59E0B

600

D97706

700

B45309

800

92400E

900

78350F

Yellow

50

FEFCE8

100

FEF9C3

200

FEF08A

300

FDE047

400

FACC15

500

EAB308

600

CA8A04

700

A16207

800

854D0E

900

713F12

Lime

50

F7FEE7

100

ECFCCB

200

D9F99D

300

BEF264

400

A3E635

500

84CC16

600

65A30D

700

4D7C0F

800

3F6212

900

365314

Green

50

F0FDF4

100

DCFCE7

200

BBF7D0

300

86EFAC

400

4ADE80

500

22C55E

600

16A34A

700

15803D

800

166534

900

14532D

Emerald

50

ECFDF5

100

D1FAE5

200

A7F3D0

300

6EE7B7

400

34D399

500

10B981

600

059669

700

047857

800

065F46

900

064E3B

Teal

50

F0FDFA

100

CCFBF1

200

99F6E4

300

5EEAD4

400

2DD4BF

500

14B8A6

600

0D9488

700

0F766E

800

115E59

900

134E4A

Cyan

50

ECFEFF

100

CFFAFE

200

A5F3FC

300

67E8F9

400

22D3EE

500

06B6D4

600

0891B2

700

0E7490

800

155E75

900

164E63

Sky

50

F0F9FF

100

E0F2FE

200

BAE6FD

300

7DD3FC

400

38BDF8

500

0EA5E9

600

0284C7

700

0369A1

800

075985

900

0C4A6E

Blue

50

EFF6FF

100

DBEAFE

200

BFDBFE

300

93C5FD

400

60A5FA

500

3B82F6

600

2563EB

700

1D4ED8

800

1E40AF

900

1E3A8A

Indigo

50

EEF2FF

100

E0E7FF

200

C7D2FE

300

A5B4FC

400

818CF8

500

6366F1

600

4F46E5

700

4338CA

800

3730A3

900

312E81

Violet

50

F5F3FF

100

EDE9FE

200

DDD6FE

300

C4B5FD

400

A78BFA

500

8B5CF6

600

7C3AED

700

6D28D9

800

5B21B6

900

4C1D95

Purple

50

FAF5FF

100

F3E8FF

200

E9D5FF

300

D8B4FE

400

C084FC

500

A855F7

600

9333EA

700

7E22CE

800

6B21A8

900

581C87

Fuchsia

50

FDF4FF

100

FAE8FF

200

F5D0FE

300

F0ABFC

400

E879F9

500

D946EF

600

C026D3

700

A21CAF

800

86198F

900

701A75

Pink

50

FDF2F8

100

FCE7F3

200

FBCFE8

300

F9A8D4

400

F472B6

500

EC4899

600

DB2777

700

BE185D

800

9D174D

900

831843

Rose

50

FFF1F2

100

FFE4E6

200

FECDD3

300

FDA4AF

400

FB7185

500

F43F5E

600

E11D48

700

BE123C

800

9F1239

900

881337

But when you do need to customize your palette, you can configure your colors under the colors key in the theme section of your tailwind.config.js file:

tailwind.config.js

module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

When it comes to building a custom color palette, you can either configure your own custom colors from scratch if you know exactly what you want, or curate your colors from our extensive included color palette if you want a head start.

Using custom colors

If you’d like to completely replace the default color palette with your own custom colors, add your colors directly under the theme.colors section of your configuration file:

tailwind.config.js

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      'white': '#ffffff',
      'purple': '#3f3cbb',
      'midnight': '#121063',
      'metal': '#565584',
      'tahiti': '#3ab7bf',
      'silver': '#ecebff',
      'bubble-gum': '#ff77e9',
      'bermuda': '#78dcca',
    },
  },
}

By default, these colors will be made available everywhere in the framework where you use colors, like the text color utilities, border color utilities, background color utilities, and more.

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

Don’t forget to include values like transparent and currentColor if you want to use them in your project.

Color object syntax

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

tailwind.config.js

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.

Like many other places in Tailwind, the special DEFAULT key can be used when you want to define a value with no suffix:

tailwind.config.js

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

If you need a one-off custom color in your project, consider using Tailwind’s arbitrary value notation to generate a class for that color on-demand instead of adding it to your theme:

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

Learn more in the using arbitrary values documentation.

Generating colors

If you’re wondering how to automatically generate the 50–900 shades of your own custom colors, bad news — color is complicated and despite trying dozens of different tools, we’ve yet to find one that does a good job generating color palettes like this automatically.

We picked all of Tailwind’s default colors by hand, meticulously balancing them by eye and testing them in real designs to make sure we were happy with them.

Two useful tools we can recommend are Palettte and ColorBox — they won’t do the work for you but their interfaces are well-designed for doing this sort of work.

Using the default colors

If you don’t have a set of completely custom colors in mind for your project, you can curate your colors from our default palette by importing tailwindcss/colors in your configuration file and choosing the colors you want to use:

tailwind.config.js

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,
    },
  },
}

This can be helpful if you want to deliberately limit your color palette and reduce the number of class names suggested by IntelliSense.

Aliasing color names

You can also alias the colors in our default palette to make the names simpler and easier to remember:

tailwind.config.js

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 usually only use one set in any given project and it’s nice to be able to type bg-gray-300 instead of bg-neutral-300 for example.

Adding additional colors

If you’d like to add a brand new color to the default palette, add it in the theme.extend.colors section of your configuration file:

tailwind.config.js

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:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          950: '#17275c',
        },
      }
    },
  },
}

Disabling a default color

If you’d like to disable any of the default colors, the best approach is to override the default color palette and just include the colors you do want:

tailwind.config.js

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 literal color names (like red, green, etc.) and a numeric scale (where 50 is light and 900 is dark) by default. We think this is the best choice for most projects, and have found it easier to maintain than using abstract names like primary or danger.

That said, you can name your colors in Tailwind whatever you like, and if you’re working on a project that needs to support multiple themes for example, it might make sense to use more abstract names:

tailwind.config.js

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:

tailwind.config.js

const colors = require('tailwindcss/colors')
module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

Again, we recommend sticking to the default naming convention for most projects, and only using abstract names if you have a really good reason.

Using CSS variables

If you’d like to define your colors as CSS variables, you’ll need to define those variables as just the color channels if you want them to work with the opacity modifier syntax:

Define your CSS variables as channels with no color space function

main.css

@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 opacity modifiers won’t work

main.css

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

Then define your colors in your configuration file, being sure to include the color space you’re using, and the special <alpha-value> placeholder that Tailwind will use to inject the alpha value when using an opacity modifier:

tailwind.config.js

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>)',
    }
  }
}

When defining your colors this way, make sure that the format of your CSS variables is correct for the color function you are using. You’ll want to use spaces if using the modern space-separated syntax, and commas if using legacy functions like rgba or hsla:

main.css

@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;
  }
}