Tailwind is one of the most popular CSS frameworks, providing utility classes to simplify styles

and layouts. Colors are a crucial concept when using Tailwind, as the color of a website can

improve the experience for visitors.

In this article, we will explore Tailwind’s built-in color palettes and how to use them, as well as

how to personalize Tailwind colors to match your brand.

What is Tailwind CSS Color?

Tailwind colors are thoughtfully designed default color palette that comes pre-packaged with

Tailwind, serving as an excellent foundation when you don’t yet have your distinct branding

preferences in mind.

CSS TAILWIND 11 Sep 2023 7 min read

What is Tailwind CSS Color Palette?

Tailwind color palettes are a collection of colors with ranges based on color theory principles like

harmony, contrast, and balance.

The Tailwind CSS color palette is organized into a comprehensive system, providing different

shades of each color, ranging from 50 (lightest) to 900 (darkest).

In Tailwind version 3.3.3, this range has been extended to include a 950 shade, offering even

more depth and versatility for designers to work with.

Generation of Tailwind Color Palettes

According to the Tailwind CSS team, the process of creating the Tailwind CSS color palette was

a labor-intensive endeavor. Instead of relying solely on automated algorithms, the team

employed a manual selection process that involved careful visual judgment and extensive realworld

testing in various design contexts.

This hands-on approach ensured that the final color palette was not only aesthetically pleasing

but also practical and versatile, catering to the diverse needs of designers and developers alike.

Utilizing Tailwind CSS Colors in Your Projects

Using the Tailwind CSS colors is a quite straightforward process, the only difference lies in the

specific purpose you want to use the color for; Colors can generally be used as text or

background colors.

We’ll discuss how to use TailwindCSS colors for both text and background colors below.

Using Tailwind CSS Color Palette as Text Color

To apply TailwindCSS colors to your text, you simply need to add the appropriate Tailwind

typography utility class to your HTML elements.

The class names used to achieve text colors are constructed using a predefined pattern that

combines the utility name, color name and the desired shade, making it easy to choose the

perfect hue for your design.

text-color-shade

For instance, if you want to use a blue color for your text, you can select from a range of shades

by specifying the class as ‘text-blue-500’, ‘text-blue-600’, or ‘text-blue-950’, depending on the

intensity of the color you desire.

<p class="text-blue-500">text-blue-500</p>

<p class="text-blue-600">text-blue-600</p>

The output will be as follows:

Using Tailwind CSS Color Palette as Background Color

Similarly to text color, when it comes to setting background colors using Tailwind CSS, you can

effortlessly achieve the desired effect by adding the corresponding class to your HTML

elements.

bg-color-shade

The class names follow a consistent pattern, combining the utility name, color name and the

shade you wish to use.

For example, if you want to set a green background color, you can choose from various shades

by specifying the class as ‘bg-green-300’, ‘bg-green-400’, ‘bg-green-600’, or ‘bgtransparent’,

depending on the level of brightness you prefer.

<p class="bg-blue-300">bg-blue-300</p>

<p class="bg-blue-600">bg-blue-600</p>

The output will be as follows:

How to Add Custom Color in Tailwind CSS

When working with Tailwind CSS, you may want to add custom colors with or without shades

that are not available on the Tailwind color palette to your project to create a unique and

personalized design for your brand.

The process of incorporating these custom palettes involves utilizing utility class names, which

follow the same consistent pattern that combines the utility name, the custom color name and

the shade value.

To add your custom color to your Tailwind CSS project, you’ll need to follow these steps:

1. Open your Tailwind CSS configuration file, typically named tailwind.config.js.

2. Locate the theme object section, and within it, find the extend property and add a colors

property inside.

/** @type {import('tailwindcss').Config} */

export default {

theme: {

extend: {

colors: {

},

},

},

}

3. Add your custom color by providing a unique name and the corresponding customize color

code in the appropriate property. For example, you can add a new color called my-green with

the color code #32CD32 like below:

/** @type {import('tailwindcss').Config} */

export default {

theme: {

extend: {

colors: {

'my-green': '#32CD32',

},

},

},

}

4. Save the configuration file and start your project server to ensure the changes take effect.

5. Now, you can use your custom color in your HTML elements by applying the utility class

name you created. For instance, to set the background color of any element to your custom

green color, you would add the class bg-my-green to the element.

<p class="bg-my-green">bg-my-green</p>

By following these steps, you can easily add custom colors to your Tailwind CSS project,

allowing you to create a unique and personalized color design that suits your specific needs and

preferences.

Using Custom Colors with Shades in Tailwind Colors?

To add custom colors along with their various shades into your Tailwind CSS project, you will

need to make some modifications to your tailwind.config.js file.

This process involves adding the desired color and its corresponding shades in a color object

syntax. For instance, if you wanted to add a custom my-green color with different shades of 50

and 100, you would create an object like this:

export default {

theme: {

extend: {

colors: {

"my-green": {

50: '#86efac',

100: '#32CD32',

},

},

},

},

}

After updating your configuration file with the custom palette and shades, you can apply them to

your project by adding the appropriate class to the desired element.

For example, if we want to set the background color of an element to our custom my-green

color with a light shade of 50 or dark shade of 100, we’d add the class bg-my-green-X to the

element.

<p class="bg-my-green-50">bg-my-green-50</p>

<p class="bg-my-green-100">bg-my-green-100</p>

The output will be as follows:

How to Set Default Colors in Tailwind CSS

In case you want to be strict with the number of colors being used in your Tailwind CSS project,

you can remove the extend property and only add the color property in your tailwind.config.js file

as shown below.

export default {

theme: {

colors: {

'my-green': {

50: '#86efac',

100: '#32CD32',

},

},

},

}

Before configuring default colors:

When working with Tailwind CSS, your code editor’s IntelliSense feature will provide you with

suggestions for both the default color palette and any extended color options you may have

added.

These extended and default color palette suggestions can be easily incorporated into your

Tailwind CSS project, allowing for a seamless development experience.

After configuring default colors:

Once you have defined your preferred color scheme in the tailwind.config.js file, the IntelliSense

feature in your code editor will only display the colors you have specified.

This customization ensures that your Tailwind CSS project remains consistent with your chosen

color palette (default color palette or not), streamlining your use of color design process and

maintaining a cohesive visual aesthetic.

Tailwind Colors Arbitrary Values

Tailwind CSS also offers the ability to use arbitrary color values in your projects. This feature

allows you to seamlessly incorporate any custom color code that may not be part of the default

or extended color palettes into your Tailwind project.

For instance, if we want to use #32CD32 as the background color for an element in our project,

we can utilize Tailwind’s arbitrary color syntax like this:

<p class="bg-[#32CD32]">bg-[#32CD32]</p>

The output will be as follows:

By enclosing our color code in square brackets, we can utilize any custom color code such as

HEX and RGB within our Tailwind project.

This arbitrary values capability further enhances the versatility of Tailwind CSS, allowing you to

create unique and visually appealing designs with ease, providing you with even greater

flexibility and control over your design choices.

Useful Tailwind CSS Color Extensions

Figma Tailwind Color Palettes

This plugin will add Tailwind Color Styles to your Figma file, allowing designers to use the exact

colors from Tailwind Color palettes directly on Figma.

Tailwind Eye Dropper

Tailwind Eye Dropper is an open-source browser extension that allows you to pick colors from

web pages and convert them to a Tailwind preset.

Wrapping Up

In summary, Tailwind CSS colors provide an easy and effective way to improve the look of your

designs while maintaining practicality, versatility, and customized branding.

In this article, we covered how to make use of Tailwind colors, extend the existing color palette

with your own custom colors, and define arbitrary color values within your project.

By understanding TailwindCSS colors, you can maximize the potential of this powerful design

framework to create beautiful, and consistent projects that meet the needs of both designers

and developers.

If you want to learn more about personalizing your design system with Tailwind CSS, I’d

recommend you watch the video tutorial below:

For speedy development, check out Purecode AI, a large marketplace for custom components.

Generate thousands of responsive custom-styled HTML, CSS, Tailwind and JS components

with our AI assistant and customize them to match your brand.

‘Original article published here’