Color and Opacity

Understand how to modify text color and opacity in Tailwind.

We'll cover the following


Tailwind offers 90+ color utilities out of the box. Two of them are special., .text-transparent and .text-current. The text-transparent class makes the text transparent, meaning we can see the background color through it. We can sometimes use this class for effect, especially with bg-clip-text, which makes the background match the shape of the text. We can use .text-current as a reset if a different setting changes the color. It sets to the color of the parent element. Next, we have .text-black, which sets the color to #000000, and .text-white, which sets the color to #ffffff.

We then get combined classes: .text-{color}-{level}. Tailwind sets eight different colors by default at 10 different levels, from the lightest at 50 and then every multiple of 100 from 100 to the darkest at 900. Below are the eight default colors:

  • Blue
  • Gray
  • Green
  • Indigo
  • Pink
  • Purple
  • Red
  • Yellow

In the following playground, we’ll try different text colors:

Get hands-on with 1200+ tech skills courses.