The Ultimate Guide to Tailwind Colors and Personalizing Them
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’