Colors

Explore Tailwind CSS's extensive color palette, featuring a broad array of predefined options for text and background elements. Learn to harness these colors for visually striking and cohesive web designs.

Colors play a crucial role in web design, influencing the overall look and feel of a website. Tailwind CSS simplifies the use of colors through its color palette.

Tailwind's Color Palette Classes

Tailwind CSS offers an extensive color palette with classes that follow a {color}-{shade} pattern. In this pattern, {color} signifies the color name, and {shade} represents the level of intensity or lightness.

Let's explore some of the colors available in the Tailwind color palette:

Out of the box, Tailwind provides a wide range of color classes for the following colors:

Slate, Gray, Zinc, Neutral, Stone, Red, Orange, Amber, Yellow, Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Violet, Purple, Fuchsia, Pink, Rose.

In addition to these, Tailwind also offers classes for the standard white and black colors, giving you a versatile set of options to work with in your projects.

1. Text Color

In Tailwind CSS, you can apply text colors to HTML elements using a straightforward naming convention. Text color classes are named based on the color they represent, and you can apply them to elements just like any other Tailwind class.

The general format for text color classes in Tailwind is text-{color}, where {color} is the name of the color you want to use. Here are a couple of examples:

a. In this example, 'text-red-500' sets the text color to red (based on the color palette) with an intensity of 500.

Code block

<div className="text-3xl text-red-500">
       This text is red.
</div>

b. In this example, /text-blue-500' sets the text color to blue(based on the color palette) with an intensity of 500.

Code block


<div className="text-3xl text-blue-500">
      This text is blue.
</div>

2. Background Color

In Tailwind CSS, applying background colors to HTML elements follows a consistent naming convention. You can easily set the background color of an element using classes. Here's how you can apply background colors:

To set a basic background color on an HTML element, you can use the bg-{color} class, where {color} represents the name of the color you want to apply.

Example 1: If you want to give a div element a blue background, you can use the following class:

Code block


<div className="p-4 rounded bg-blue-400">
     This div has a blue background.
</div>

Example 2: In this example, we have used a background color of cyan and set the text color to white.

Code block


<div className="p-4 rounded bg-cyan-900 text-white">
      This div has a cyan background and white text color.
</div>

Tailwind CSS provides hover, active, and focus modifiers that offer dynamic control over the colors used in your designs. These modifiers enable you to define how a color should change when a user interacts with an element.

For instance, you can alter the background color, adjust the text color, or apply transitions to create visually engaging effects when a user hovers over a button, clicks on it, or focuses on an input field. By harnessing these modifiers, you can elevate your color scheme and user interface, delivering a more engaging and interactive web experience.

Here's an illustrative example of a button, showcasing the application of different color shades using these modifiers:

Code block


<button className="bg-blue-500 hover:bg-blue-600 active:bg-blue-400 focus:bg-blue-500 text-white font-semibold py-2 px-4 rounded">
      Click Me
</button>

Color classes play a crucial role in design, and when combined with modifiers, they empower us to craft exceptional UI elements. You can observe their application across a range of controls within the knowledge-base library components.

Next lesson - Borders

Explore Tailwind CSS border classes, empowering precise control over web element borders. Customize widths, styles, radii, and colors for visually appealing designs.

All Modules