How to Use Color Object Syntax in Tailwind?

Tailwind is a well-known CSS framework that permits users to create responsive websites with minimal code. One of the features of Tailwind is the color object syntax, which allows users to customize the colors of elements easily. It can be useful for grouping numerous shades of the same color in the palette.

This article will explain the procedure of using color object syntax in Tailwind.

How to Use Color Object Syntax in Tailwind?

Color Object Syntax is a way of defining custom colors in Tailwind CSS using objects instead of strings. An object is a group of key-value pairs that can store different properties of a color. The syntax is provided below:

Syntax

colors: {
'custom-color': '#66bbfa'
}

To use the color object syntax in Tailwind, first, define the color object in the “tailwind.config.js” file using the nested or DEFAULT key. Then, use the custom color objects in the HTML program and view the web page for verification.

Step 1: Define Color Object Using Nested and DEFAULT Key

In the “tailwind.config.js” file, define the color object using the nested or DEFAULT key. Here, we have defined the color “sky” with DEFAULT keys and their values (Hex code of colors):

module.exports = {
theme: {
colors: {
'sky':{
100: '#9fd6e3',
200: '#5fa8ba',
300: '#28778a',
400: '#058dad',
500: '#0c5566',

light: '#9ce6f7',
DEFAULT: '#31a8c4',
dark: '#024657',
}
},
},
}

Step 2: Use Color Objects in HTML Program

Now, utilize the specified color objects in the HTML program according to need:

<body>
<h1 class="text-3xl text-sky-500 text-center">
Linux Hint!
</h1>
<h2 class="text-2xl text-sky-200 text-center">
Welcome to this Tutorial
</h2>
<h3 class="text-2xl text-sky-100 text-center">
Tailwind CSS
</h3>
<br>
<p class="text-sky-dark text-center">
This is dark color.
</p>
<p class="text-sky text-center">
This is default color.
</p>
<p class="text-sky-light text-center">
This is light color.
</p>
</body>

Step 3: View HTML Web Page

Run the HTML program with a live server to ensure that the defined color objects are working properly:

It can be seen that all the specified color objects are working properly.

Conclusion

To use the color object syntax in Tailwind, it is required to define the color object in the “tailwind.config.js” file using the nested or DEFAULT key. Then, use the defined color objects in the HTML program. Finally, run the code with the live server extension for verification. This article has described the method to use color object syntax in Tailwind.

How to Use Color Object Syntax in Tailwind?