Summary  
This chapter explains how to apply Tailwind CSS utility classes with standardized prefixes and shade values to set background colors, text colors, and border colors on elements.  

General domain of usage  
User interface styling for web applications.

# Colors

Tailwind CSS provides a wide range of color utilities that you can apply to elements. These utilities help you quickly set background colors, text colors, and border colors.

> Note
> 
> The numbers in these classes represent different shades of the base color. These numbers range from `50` to `900`:
> - Lower numbers (e.g., `50`): Lighter shades;
> - Higher numbers (e.g., `900`): Darker shades.

## Background Colors
Use the `bg-` prefix followed by the color name and shade.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QmFzaWMgU3R5bGluZyAtIENvbG9ycyAtIEV4YW1wbGUgMTwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29tIj48L3NjcmlwdD4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJiZy1yZWQtNTAwIHAtNCI+QmFja2dyb3VuZCBDb2xvciBSZWQ8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJnLWdyZWVuLTUwMCBwLTQiPkJhY2tncm91bmQgQ29sb3IgR3JlZW48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJnLWJsdWUtNTAwIHAtNCI+QmFja2dyb3VuZCBDb2xvciBCbHVlPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

## Text Colors
Use the `text-` prefix followed by the color name and shade.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QmFzaWMgU3R5bGluZyAtIENvbG9ycyAtIEV4YW1wbGUgMjwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29tIj48L3NjcmlwdD4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cCBjbGFzcz0idGV4dC1yZWQtNTAwIj5UZXh0IENvbG9yIFJlZDwvcD4KICAgIDxwIGNsYXNzPSJ0ZXh0LWdyZWVuLTUwMCI+VGV4dCBDb2xvciBHcmVlbjwvcD4KICAgIDxwIGNsYXNzPSJ0ZXh0LWJsdWUtNTAwIj5UZXh0IENvbG9yIEJsdWU8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

## Border Colors
Use the `border-` prefix followed by the color name and shade.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QmFzaWMgU3R5bGluZyAtIENvbG9ycyAtIEV4YW1wbGUgMzwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29tIj48L3NjcmlwdD4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJib3JkZXIgYm9yZGVyLXJlZC01MDAgcC00Ij5Cb3JkZXIgQ29sb3IgUmVkPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJib3JkZXIgYm9yZGVyLWdyZWVuLTUwMCBwLTQiPkJvcmRlciBDb2xvciBHcmVlbjwvZGl2PgogICAgPGRpdiBjbGFzcz0iYm9yZGVyIGJvcmRlci1ibHVlLTUwMCBwLTQiPkJvcmRlciBDb2xvciBCbHVlPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

> Note
>
> To see all the existing colors, you can refer to the Tailwind documentation below.
> - <a href="https://tailwindcss.com/docs/background-color" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Background Colors</a>;
> - <a href="https://tailwindcss.com/docs/text-color" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Text Colors</a>;
> - <a href="https://tailwindcss.com/docs/border-color" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Border Colors</a>.

Which class would you use to set a background color to blue?

Which utility class would you use to set the text color to gray?

Learn to style websites efficiently using Tailwind CSS, a utility-first framework for rapid UI development. Discover how to set up Tailwind and apply utility classes for colors, typography, borders, and shadows. Build and style essential components like buttons, cards, and forms. Master layout techniques using spacing, flexbox, and grid utilities. Create responsive designs and customize Tailwind to match your project needs.

Meet Tailwind CSS, a utility-first framework known for its flexibility and efficiency in web styling. Discover the key benefits and the utility-first philosophy. Additionally, explore the simple installation methods using CDN or npm/yarn.

Discover the foundational elements of Tailwind CSS, including an understanding of utility classes and their application to HTML elements. Delve into essential styling techniques such as setting colors, borders, shadows, and typography utilities.

Dive into practical applications focusing on creating and styling Buttons, Forms, and Cards. Through hands-on challenges, you’ll master building these essential UI components, enhancing your skills with real-world examples.

Explore Tailwind CSS’s essential spacing utilities, covering how to apply margin and padding to your elements. You’ll also learn to utilize flexbox utilities to control layout with display settings, flex direction, and both horizontal and vertical alignment. Additionally, you’ll dive into grid utilities to create simple yet powerful grid layouts, mastering the setup of grid containers and items.

Discover how to customize Tailwind CSS to meet your project’s design requirements and create adaptable layouts for various devices.

Using Colors in Tailwind CSS

Colors

Background Colors

Text Colors

Border Colors

1. Which class would you use to set a background color to blue?

2. Which utility class would you use to set the text color to gray?