Colors in Tailwind CSS
Tags: webdev, tailwindcss, beginners, tutorial
Published: 2022-11-30 15:00:00

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 colors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43069ho5x8v9y8ej9d1k.png)

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`.

```html
<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:

```css
text-{color name}-{shade}
```

Let's go to the [Tailwind Play](https://play.tailwindcss.com/) website and try it there. Remove all the code in the editor section so that we get a blank screen.

![Tailwind Play](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rsy4tpej4qqznzzfp4y.jpg)

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.

```html
<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.

![Paragraphs Added](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vic2osngyt6d4ahbwcbe.png)

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

```html
<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>
```

![Paragraph Text Color Change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jixvrmcksk9nc5yv0tee.png)

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:

```html
<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>
```

![Paragraph Text Color Change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in266dbdov4g5vt3ix3k.png)

## Tailwind CSS Background Color

The class naming convention for changing the background color is: 

```css
bg-{color name}-{shade}
```

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

```html
<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.

![Background Color Changed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ase5ec4mul5o1iq67kkk.png)

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`.

![Inspect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sog1r70v9xftul60sbm3.png)

This will open the [Chrome DevTools](../html-common-elements-headings-and-text-html-basics-02/#chrome-developer-tools-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.

![Color Classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8usfseln06h1m5gqhvye.png)

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: 

```css
/* 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)`.

```html
<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.

![Arbitrary Values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r6obulot88sus0auy3a.png)

### 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.

![Tailwind CSS Config File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8s6p8ndmyuw9ejm7sill.png)

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

![Adding Colors Object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epmk4pmjoiujgs6myfig.png)

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 `"`).

```js
/** @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`.

```html
<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>
```

![Sea Color Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1y4m4jsvq7gxrodbm4s.png)

### 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`.

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

![Added Warm Color to Config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9cdnftle00a88n1rrodd.png)

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

```html
<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.

![Added Warm Color to Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0igdwctgv5ybj32d3un.png)