Colors in Tailwind CSS

Tailwind CSS has its own color system. At the time of writing this article, Tailwind CSS provides 22 color names, each with 10 different shades. Shade number 50 is the lightest and shade number 900 is the darkest shade of each color. So a total of 220 “expertly-crafted” colors to choose from. We can apply colors to text, backgrounds, borders, shadows, and more.

Tailwind CSS provides utility classes for colors. The naming convention for these classes is simple and easy to remember.

For example, if we want to set the text color of an element to red with the shade of 500, the class to add to the element will be text-red-500. If we want to set the background color of an element to green with the shade of 300, the class to add will be bg-green-300.

<p class="text-red-500">...</p>

<div class="bg-green-300">...</div>

We also have the colors black and white which we use without a shade number (e.g., text-black or bg-white).

Tailwind CSS Text Color

As I mentioned, the class naming convention for changing the text color is:

text-{color name}-{shade}

Let's go to the Tailwind Play website and try it there. Remove all the code in the editor section so that we get a blank screen.

Add the following 3 paragraph elements to the page. Notice that I have a random text in each one. You can insert random text by typing "lorem" and then hitting the TAB key.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat culpa alias atque est vel iusto aliquid, suscipit quos nobis laboriosam impedit quam ipsum fugit quisquam vitae nostrum, hic deserunt modi!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat minima deleniti eaque voluptatibus? Deserunt aperiam officiis architecto atque omnis eius commodi dolorem, iusto, autem maiores in numquam, tempore consequuntur. Odit!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus error optio veniam cumque veritatis dolore perspiciatis deleniti consectetur adipisci eligendi dignissimos, doloribus vero totam nisi repellendus quisquam. Nam, corrupti nostrum.</p>

Check the result, and we can see that we do not have any styles applied to the paragraphs yet.

if we add the class text-red-500 to the first paragraph, we can see that the color changes to red.

<p class="text-red-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat culpa alias atque est vel iusto aliquid, suscipit quos nobis laboriosam impedit quam ipsum fugit quisquam vitae nostrum, hic deserunt modi!</p>

Add the classes text-green-800 and text-green-300 to the second and third paragraphs and check the result. Here is how our code looks like now:

<p class="text-red-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat culpa alias atque est vel iusto aliquid, suscipit quos nobis laboriosam impedit quam ipsum fugit quisquam vitae nostrum, hic deserunt modi!</p>
<p class="text-green-800">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat minima deleniti eaque voluptatibus? Deserunt aperiam officiis architecto atque omnis eius commodi dolorem, iusto, autem maiores in numquam, tempore consequuntur. Odit!</p>
<p class="text-green-300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus error optio veniam cumque veritatis dolore perspiciatis deleniti consectetur adipisci eligendi dignissimos, doloribus vero totam nisi repellendus quisquam. Nam, corrupti nostrum.</p>

Tailwind CSS Background Color

The class naming convention for changing the background color is:

bg-{color name}-{shade}

Let's give each of our paragraphs different background colors:

<p class="text-red-500 bg-gray-900">...</p>
<p class="text-green-800 bg-green-50">...</p>
<p class="text-green-300 bg-yellow-900">...</p>

Check the result, and we can see that the background colors have changed.

Easy, right? Tailwind CSS provides a similar naming convention for other color utility classes. I will cover those in the coming posts where we need to use them.

Customizing Colors in Tailwind CSS

Before we add custom colors, I need to show you how CSS colors work. In the preview section, right click on the first paragraph and select Inspect.

This will open the Chrome DevTools. On the left side, make sure that the first <p> element is selected. On the right side under the Styles tab, look for the .text-red-500 and .bg-gray-900 classes.

You can see that the easy-to-remember class names are setting the colors in a way that the browser understands. in both text-red-500 and bg-gray-900 classes, the value of the color is applied using the rgb() color value. The RGB color value is one of the many ways that we define colors in CSS. Some of the popular ways are:

• Hexadecimal: starts with # and has different length (e.g., white is #FFF or #FFFFFF and black is #000 or #000000)
• RGB: represents RED, GREEN, and BLUE color values. Each color value is between 0 and 255 where 255 has the most intensity (e.g., white is rgb(255,255,255) and black is rgb(0,0,0))
• RGBA: similar to RGB but with one more value at the end which is for the opacity and it is between 0 and 1 (e.g., rgba(255,0,0,0.5) is color red at 50% opacity)

As I mentioned before, Tailwind CSS has more than 220 color shades. But if you want to pick a color of your choice, Tailwind CSS provides a few different ways to do that.

Arbitrary Values

If you want to use a custom color in a few places, you can use arbitrary values. The naming convention for color classes with arbitrary values is not that different. Instead of the color and shade names, we write the CSS color value wrapped with square brackets [].

Here are a few examples:

/* change background color to #ff7947 */
bg-[#ff7947]
/* change background color to rgb(255, 99, 71) */
bg-[rgb(255,99,71)]
/* change text color to #ff7947 */
text-[#ff7947]
/* change text color to rgb(255, 99, 71) */
text-[rgb(255,99,71)]

Let's add two more paragraphs, one with text color #ff7947 and the other one with a background color of rgb(255,99,71).

<p class="text-[#ff7947]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ut itaque deserunt voluptatibus nisi quo in modi nemo ducimus culpa, corporis ipsa quisquam? Numquam ad porro rerum ipsam atque necessitatibus.</p>
<p class="bg-[rgb(255,99,71)]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consequatur commodi veritatis dignissimos explicabo enim error voluptatum corrupti, aspernatur optio voluptatem eveniet beatae esse expedita et ad. Laborum, natus ratione?</p>

Check the result and we can see that both colors are applied.

Adding Additional Colors

Tailwind CSS allows us to extend the default color palette. We can add new colors or even add colors with different shades. As you already know, Tailwind CSS has a config file called tailwind.config.js. Tailwind Play has the config file under the Config tab.

First, we need to add a new object called colors within the extend object.

Any key: value pair we add inside the colors object represents a color. Let's add a new color called sea with the value #2D7AFF. We need to add the value as a string (wrapped with ' or ").

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        sea: '#2D7AFF',
      },
    },
  },
  plugins: [],
}

So now the new color sea can be applied to our pages. If we want it for text color, we use text-sea, or if we want it for background color, we use bg-sea class. Let's change the last paragraph's text color to the color sea.

<p class="text-red-500 bg-gray-900">...</p>
<p class="text-green-800 bg-green-50">...</p>
<p class="text-green-300 bg-yellow-900">...</p>
<p class="text-[#ff7947]">...</p>
<p class="bg-[rgb(255,99,71)] text-sea">...</p>

Adding Colors With Shades

We can also add custom colors with different shades like Tailwind CSS colors. We can do that by setting the value of the color key as an object that has key: value pairs. Each of those key: value pairs will represent a color shade.

Let's say we want to add a new color called warm and it has 3 different shades. The color values for the 3 shades are #FF0000, #B80000, and #6D0000.

We can name each shade anything we like. We can name them like Tailwind CSS (numbers between 50 and 900) or we can name them with words. Let's go with the second option and name them lightest, normal, and darkest.

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        sea: '#2D7AFF',
        warm: {
          lightest: '#FF0000',
          normal: '#B80000',
          darkest: '#6D0000',
        },
      },
    },
  },
  plugins: [],
}

Now that the color warm has been added, let's use it as the background color of the fourth paragraph.

<p class="text-red-500 bg-gray-900">...</p>
<p class="text-green-800 bg-green-50">...</p>
<p class="text-green-300 bg-yellow-900">...</p>
<p class="text-[#ff7947] bg-warm-darkest">...</p>
<p class="bg-[rgb(255,99,71)] text-sea">...</p>

Check the result and we can see that the background color is changed.