v3.2.

Customiz)tion Customizing Colors

Customiz)tion

Customizing Colors
Customizing the def0ult color p0lette
for your project.

T"ilwind includes "n expertly-cr"fted def"ult

color p"lette out-of-the-box th"t is " gre"t
st"rting point if you don’t h"ve your own
specific br"nding in mind.

Sl)te

50 100 200 300 &00

#f8fafc #f1f5f9 #e2e8f0 #cbd5e1 #94a3b8

500 '00 700 800 *00

#64748b #475569 #334155 #1e293b #0f172a

Gr)y

50 100 200 300 &00

#f9fafb #f3f4f6 #e5e7eb #d1d5db #9ca3af

500 '00 700 800 *00

#6b7280 #4b5563 #374151 #1f2937 #111827

Zinc

50 100 200 300 &00

#fafafa #f4f4f5 #e4e4e7 #d4d4d8 #a1a1aa

500 '00 700 800 *00

#71717a #52525b #3f3f46 #27272a #18181b

Neutr)l

50 100 200 300 &00

#fafafa #f5f5f5 #e5e5e5 #d4d4d4 #a3a3a3

500 '00 700 800 *00

#737373 #525252 #404040 #262626 #171717

Stone

50 100 200 300 &00

#fafaf9 #f5f5f4 #e7e5e4 #d6d3d1 #a8a29e

500 '00 700 800 *00

#78716c #57534e #44403c #292524 #1c1917

Red

50 100 200 300 &00

#fef2f2 #fee2e2 #fecaca #fca5a5 #f87171

500 '00 700 800 *00

#ef4444 #dc2626 #b91c1c #991b1b #7f1d1d

Or)nge

50 100 200 300 &00

#fff7ed #ffedd5 #fed7aa #fdba74 #fb923c

500 '00 700 800 *00

#f97316 #ea580c #c2410c #9a3412 #7c2d12

Amber

50 100 200 300 &00

#fffbeb #fef3c7 #fde68a #fcd34d #fbbf24

500 '00 700 800 *00

#f59e0b #d97706 #b45309 #92400e #78350f

Yellow

50 100 200 300 &00

#fefce8 #fef9c3 #fef08a #fde047 #facc15

500 '00 700 800 *00

#eab308 #ca8a04 #a16207 #854d0e #713f12

Lime

50 100 200 300 &00

#f7fee7 #ecfccb #d9f99d #bef264 #a3e635

500 '00 700 800 *00

#84cc16 #65a30d #4d7c0f #3f6212 #365314

Green

50 100 200 300 &00

#f0fdf4 #dcfce7 #bbf7d0 #86efac #4ade80

500 '00 700 800 *00

#22c55e #16a34a #15803d #166534 #14532d

Emer)ld

50 100 200 300 &00

#ecfdf5 #d1fae5 #a7f3d0 #6ee7b7 #34d399

500 '00 700 800 *00

#10b981 #059669 #047857 #065f46 #064e3b

Te)l

50 100 200 300 &00

#f0fdfa #ccfbf1 #99f6e4 #5eead4 #2dd4bf

500 '00 700 800 *00

#14b8a6 #0d9488 #0f766e #115e59 #134e4a

Cy)n

50 100 200 300 &00

#ecfeff #cffafe #a5f3fc #67e8f9 #22d3ee

500 '00 700 800 *00

#06b6d4 #0891b2 #0e7490 #155e75 #164e63

Sky

50 100 200 300 &00

#f0f9ff #e0f2fe #bae6fd #7dd3fc #38bdf8

500 '00 700 800 *00

#0ea5e9 #0284c7 #0369a1 #075985 #0c4a6e

Blue

50 100 200 300 &00

#eff6ff #dbeafe #bfdbfe #93c5fd #60a5fa

500 '00 700 800 *00

#3b82f6 #2563eb #1d4ed8 #1e40af #1e3a8a

Indigo

50 100 200 300 &00

#eef2ff #e0e7ff #c7d2fe #a5b4fc #818cf8

500 '00 700 800 *00

#6366f1 #4f46e5 #4338ca #3730a3 #312e81

Violet

50 100 200 300 &00

#f5f3ff #ede9fe #ddd6fe #c4b5fd #a78bfa

500 '00 700 800 *00

#8b5cf6 #7c3aed #6d28d9 #5b21b6 #4c1d95

Purple

50 100 200 300 &00

#faf5ff #f3e8ff #e9d5ff #d8b4fe #c084fc

500 '00 700 800 *00

#a855f7 #9333ea #7e22ce #6b21a8 #581c87

Fuchsi)

50 100 200 300 &00

#fdf4ff #fae8ff #f5d0fe #f0abfc #e879f9

500 '00 700 800 *00

#d946ef #c026d3 #a21caf #86198f #701a75

Pink

50 100 200 300 &00

#fdf2f8 #fce7f3 #fbcfe8 #f9a8d4 #f472b6

500 '00 700 800 *00

#ec4899 #db2777 #be185d #9d174d #831843

Rose

50 100 200 300 &00

#fff1f2 #ffe4e6 #fecdd3 #fda4af #fb7185

500 '00 700 800 *00

#f43f5e #e11d48 #be123c #9f1239 #881337

But when you do need to customize your

p"lette, you c"n configure your colors under
the `colors` key in the `theme` section of
your `tailwind.config.js` file:

t"ilwind.config.js

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

When it comes to building " custom color

p"lette, you c"n either configure your own
custom colors from scr"tch if you know
ex"ctly wh"t you w"nt, or cur1te your colors
from our extensive included color p"lette if
you w"nt " he"d st"rt.

Using custom colors

If you’d like to completely repl"ce the def"ult
color p"lette with your own custom colors,
"dd your colors directly under the
`theme.colors` section of your

configur"tion file:

t"ilwind.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 def"ult, these colors will be m"de

"v"il"ble everywhere in the fr"mework
where you use colors, like the text color
utilities, border color utilities, b1ckground
color utilities, "nd more.

<div class="bg-midnight text-tahiti">

<!-- ... -->
</div>

Don’t forget to include v"lues like

`transparent` "nd `currentColor` if you

w"nt to use them in your project.

Color object synt.x

When your p"lette includes multiple sh"des
of the s"me color, it c"n be convenient to
group them together using our nested color
object synt"x:

t"ilwind.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

p"rent key to form cl"ss n"mes like `bg-
tahiti-400`.

Like m"ny other pl"ces in T"ilwind, the

speci"l `DEFAULT` key c"n be used when you
w"nt to define " v"lue with no suffix:

t"ilwind.config.js

module.exports = {
theme: {
colors: {
// ...
'tahiti': {
light: '#67e8f9',
DEFAULT: '#06b6d4',
dark: '#0e7490',
},
// ...
},
},
}

This will cre"te cl"sses like `bg-tahiti`,

`bg-tahiti-light`, "nd `bg-tahiti-dark`.

Arbitr.ry v.lues
If you need " one-off custom color in your
project, consider using T"ilwind’s "rbitr"ry
v"lue not"tion to gener"te " cl"ss for th"t
color on-dem"nd inste"d of "dding it to your
theme:

Sh#re on Twitter

<button class="bg-[#1da1f2] text-white .

<svg><!-- ... --></svg>
Share on Twitter
</button>

Le"rn more in the using 1rbitr1ry v1lues

document"tion.

Gener.ting colors
If you’re wondering how to "utom"tic"lly
gener"te the 50HI00 sh"des of your own
custom colors, b"d news — color is
complic"ted "nd despite trying dozens of
different tools, we’ve yet to find one th"t
does " good job gener"ting color p"lettes
like this "utom"tic"lly.

We picked "ll of T"ilwind’s def"ult colors by

h"nd, meticulously b"l"ncing them by eye
"nd testing them in re"l designs to m"ke
sure we were h"ppy with them.

Two useful tools we c"n recommend "re

P1lettte "nd ColorBox — they won’t do the
work for you but their interf"ces "re well-
designed for doing this sort of work.

Using the def2ult colors

If you don’t h"ve " set of completely custom
colors in mind for your project, you c"n
cur"te your colors from our def"ult p"lette
by importing `tailwindcss/colors` in your
configur"tion file "nd choosing the colors
you w"nt to use:

t"ilwind.config.js

const colors = require('tailwindcss/colo

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 c"n be helpful if you w"nt to

deliber"tely limit your color p"lette "nd
reduce the number of cl"ss n"mes
suggested by IntelliSense.

Ali.sing color n.mes

You c"n "lso "li"s the colors in our def"ult
p"lette to m"ke the n"mes simpler "nd
e"sier to remember:

t"ilwind.config.js

const colors = require('tailwindcss/colo

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 especi"lly common for gr"ys, "s you

usu"lly only use one set in "ny given project
"nd it’s nice to be "ble to type `bg-gray-
300` inste"d of `bg-neutral-300` for

ex"mple.

Adding .ddition.l colors

If you’d like to "dd " br"nd new color to the
def"ult p"lette, "dd it in the
`theme.extend.colors` section of your

configur"tion file:

t"ilwind.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 c"n "lso use `theme.extend.colors` to

"dd "ddition"l sh"des to "n existing color if
it’s needed for your design:

t"ilwind.config.js

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

Dis.bling . def.ult color

If you’d like to dis"ble "ny of the def"ult
colors, the best "ppro"ch is to override the
def"ult color p"lette "nd just include the
colors you do w"nt:

t"ilwind.config.js

const colors = require('tailwindcss/colo

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

N2ming your colors

T"ilwind uses liter"l color n"mes (like red,
green, etc.) "nd " numeric sc"le (where 50 is
light "nd 700 is d"rk) by def"ult. We think
this is the best choice for most projects, "nd
h"ve found it e"sier to m"int"in th"n using
"bstr"ct n"mes like `primary` or `danger`.

Th"t s"id, you c"n n"me your colors in

T"ilwind wh"tever you like, "nd if you’re
working on " project th"t needs to support
multiple themes for ex"mple, it might m"ke
sense to use more "bstr"ct n"mes:

t"ilwind.config.js

module.exports = {
theme: {
colors: {
primary: '#5c6ac4',
secondary: '#ecc94b',
// ...
}
}
}

You c"n configure those colors explicitly like

we h"ve "bove, or you c"n pull in colors
from our def"ult color p"lette "nd "li"s
them:

t"ilwind.config.js

const colors = require('tailwindcss/colo

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

Ag"in, we recommend sticking to the def"ult

n"ming convention for most projects, "nd
only using "bstr"ct n"mes if you h"ve "
re"lly good re"son.

Using CSS v2ri2bles

If you’d like to define your colors "s CSS
v"ri"bles, you’ll need to define those
v"ri"bles "s just the color ch"nnels if you
w"nt them to work with the op1city modifier
synt1x:

Define your CSS v1ri1bles 1s ch1nnels

with no color sp1ce function

m"in.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 sp1ce function

or op1city modifiers won't work

m"in.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 configur"tion

file, being sure to include the color sp"ce
you’re using, "nd the speci"l `<alpha-
value>` pl"ceholder th"t T"ilwind will use to

inject the "lph" v"lue when using "n op"city

modifier:

t"ilwind.config.js

module.exports = {
theme: {
colors: {
// Using modern `rgb`
primary: 'rgb(var(--color-primary)
secondary: 'rgb(var(--color-second

// Using modern `hsl`

primary: 'hsl(var(--color-primary)
secondary: 'hsl(var(--color-second

// Using legacy `rgba`

primary: 'rgba(var(--color-primary
secondary: 'rgba(var(--color-secon
}
}
}

When defining your colors this w"y, m"ke

sure th"t the form"t of your CSS v"ri"bles is
correct for the color function you "re using.
You’ll w"nt to use sp"ces if using the modern
sp1ce-sep1r1ted synt1x, "nd comm"s if
using leg"cy functions like `rgba` or `hsla`:

m"in.css

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

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

/* For hsl(198deg 93% 60% / <alpha-v

--color-primary: 198deg 93% 60%;

/* For rgba(255, 115, 179, <alpha-va

--color-primary: 255, 115, 179;
}
}

Screens Sp)cing

Copyright © 2023 T)ilwind L)bs Inc.

Tr)dem)rk Policy

Edit this p)ge on GitHub