Tailwind CSS Colors - Notus JS

We have used Tailwind CSS colors utility classes to apply colors to the background of elements, text, and borders. Includes support for styling links with hover states, too.

Here are all the colors from Tailwind. Replace the * from each of the below example with what are you interested in:

  • Background Colors: bg
  • Border Colors: border
  • Divide Colors: divide
  • Placeholder Colors: placeholder
  • Text Colors: text

Also, besides the bellow colors, you also have transparent, current, black, and white.

BlueGray

Color Color name Color class
BlueGray 100 *-blueGray-100
BlueGray 200 *-blueGray-200
BlueGray 300 *-blueGray-300
BlueGray 400 *-blueGray-400
BlueGray 500 *-blueGray-500
BlueGray 600 *-blueGray-600
BlueGray 700 *-blueGray-700
BlueGray 800 *-blueGray-800
BlueGray 900 *-blueGray-900

Red

Color Color name Color class
Red 100 *-red-100
Red 200 *-red-200
Red 300 *-red-300
Red 400 *-red-400
Red 500 *-red-500
Red 600 *-red-600
Red 700 *-red-700
Red 800 *-red-800
Red 900 *-red-900

Orange

Color Color name Color class
Orange 100 *-orange-100
Orange 200 *-orange-200
Orange 300 *-orange-300
Orange 400 *-orange-400
Orange 500 *-orange-500
Orange 600 *-orange-600
Orange 700 *-orange-700
Orange 800 *-orange-800
Orange 900 *-orange-900

Amber

Color Color name Color class
Amber 100 *-amber-100
Amber 200 *-amber-200
Amber 300 *-amber-300
Amber 400 *-amber-400
Amber 500 *-amber-500
Amber 600 *-amber-600
Amber 700 *-amber-700
Amber 800 *-amber-800
Amber 900 *-amber-900

Emerald

Color Color name Color class
Emerald 100 *-emerald-100
Emerald 200 *-emerald-200
Emerald 300 *-emerald-300
Emerald 400 *-emerald-400
Emerald 500 *-emerald-500
Emerald 600 *-emerald-600
Emerald 700 *-emerald-700
Emerald 800 *-emerald-800
Emerald 900 *-emerald-900

Teal

Color Color name Color class
Teal 100 *-teal-100
Teal 200 *-teal-200
Teal 300 *-teal-300
Teal 400 *-teal-400
Teal 500 *-teal-500
Teal 600 *-teal-600
Teal 700 *-teal-700
Teal 800 *-teal-800
Teal 900 *-teal-900

LightBlue

Color Color name Color class
LightBlue 100 *-lightBlue-100
LightBlue 200 *-lightBlue-200
LightBlue 300 *-lightBlue-300
LightBlue 400 *-lightBlue-400
LightBlue 500 *-lightBlue-500
LightBlue 600 *-lightBlue-600
LightBlue 700 *-lightBlue-700
LightBlue 800 *-lightBlue-800
LightBlue 900 *-lightBlue-900

Indigo

Color Color name Color class
Indigo 100 *-indigo-100
Indigo 200 *-indigo-200
Indigo 300 *-indigo-300
Indigo 400 *-indigo-400
Indigo 500 *-indigo-500
Indigo 600 *-indigo-600
Indigo 700 *-indigo-700
Indigo 800 *-indigo-800
Indigo 900 *-indigo-900

Purple

Color Color name Color class
Purple 100 *-purple-100
Purple 200 *-purple-200
Purple 300 *-purple-300
Purple 400 *-purple-400
Purple 500 *-purple-500
Purple 600 *-purple-600
Purple 700 *-purple-700
Purple 800 *-purple-800
Purple 900 *-purple-900

Pink

Color Color name Color class
Pink 100 *-pink-100
Pink 200 *-pink-200
Pink 300 *-pink-300
Pink 400 *-pink-400
Pink 500 *-pink-500
Pink 600 *-pink-600
Pink 700 *-pink-700
Pink 800 *-pink-800
Pink 900 *-pink-900

Social colors PRO

Color Color name Color class
Facebook bg-facebook-regular
Twitter bg-twitter-regular
Instagram bg-instagram-regular
Github bg-github-regular
Pinterest bg-pinterest-regular
Youtube bg-youtube-regular
Vimeo bg-vimeo-regular
Slack bg-slack-regular
Dribbble bg-dribbble-regular
Reddit bg-reddit-regular
Tumblr bg-tumblr-regular
Linkedin bg-linkedin-regular