Colors

TailwindCSS has a robust set of color classname utilities; all colors have generated classnames for text-, bg- and border-. This will apply to any new color sets you create in your Tailwind configuration. By convention, each color has a range of hues and shades from -100 to -900.

For example, if you want to give something a light pink background, you could add the classname bg-pink-200.

Semantic colors

StackupUI defines a set of semantic color names, as an abstraction on top of the base colors. These colors simply map to existing base colors, and can easily be redefined or expanded if needed.

neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-1000
emphatic-100
emphatic-200
emphatic-300
emphatic-400
emphatic-500
emphatic-600
emphatic-700
emphatic-800
emphatic-900
emphatic-1000
success-100
success-200
success-300
success-400
success-500
success-600
success-700
success-800
success-900
success-1000
alert-100
alert-200
alert-300
alert-400
alert-500
alert-600
alert-700
alert-800
alert-900
alert-1000
problem-100
problem-200
problem-300
problem-400
problem-500
problem-600
problem-700
problem-800
problem-900
problem-1000

Here is the full range of available base colors.

black
white
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-1000
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900
pink-1000
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900
red-1000
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900
orange-1000
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900
yellow-1000
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900
green-1000
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
teal-1000
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
blue-1000
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900
indigo-1000
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900
purple-1000

Redefining or adding colors

You can change the available colors by modifying your tailwind.config.js. Simply redefine existing colors, or add whatever color names you like. You may add single color values, or -100--900 ranges. See the TailwindCSS color documentation for more details.

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        amaranth: { ... },
        chartreuse: { ... },
        viridian: { ... },
        ...
      }
    }
  }
}

Accessibility concerns

You may notice on each of the swatches above, the text is either black or white. This color choice is designed to meet the minimum threshold for text contrast ratio to achieve WCAG 2.0 AA level accessibility. These may not seem obvious, or look "right" or "good" to your eyes. Everyone's eyes are different and these thresholds are designed to maximize the readability of text for most users.

There are many tools available for checking contrast ratios in the browser. Two notable Chrome extensions that make it very easy are the WCAG Contrast checker and Axe Web Accessibility Testing tools. Note that Chrome's built in devtools have contrast checking capabilities as well.

See more information about vision accessibility here.