How to Add New Colors in Tailwind CSS ?
Last Updated :
24 Apr, 2025
Tailwind CSS is a popular utility-first CSS framework that offers a wide range of pre-designed styles and classes to simplify the process of styling web applications. However, the default set of colors provided by Tailwind may not always meet the requirements of your project. In such cases, you may need to add new colors to the Tailwind configuration.
In this article, we will see how to add new colors to Tailwind CSS and keep the original ones, along with covering the installation and setup process, as well as the steps required to add new colors to your Tailwind configuration.
Create a new project: To get started, we will follow the below step:
- Create a new project directory and navigate into it using the following commands in your terminal:
mkdir tailwind-colors
cd tailwind-colors
- Next, initialize a new Node.js project using the following command:
npm init -y
Install Tailwind CSS: Once we have created our new project, we need to install Tailwind CSS and create a configuration file tailwind.config.js. We can do this by running the following command:
npm i tailwindcss postcss autoprefixer
npx tailwindcss init
- Configure your template paths: Add the paths to all of your template files in your tailwind.config.js file.
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- Create files for HTML & stylesheet: Create a new public directory in the root of our project directory. In the public directory create new files styles.css and tailwind.css. In tailwind.css add the @tailwind directives for each of Tailwind’s layers:
@tailwind base;
@tailwind components;
@tailwind utilities;
- Adding new colors to Tailwind: To add new colors to Tailwind, we need to define them in our tailwind.config.js file. We can do this by adding a new colors key to the configuration object and defining our new colors as follows:
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
// Add new colors
},
},
plugins: [],
}
In the above configuration, we will add 3 new colors with custom names. Next, we will create an HTML file to test our new Tailwind colors. Inside public directory create a new file named index.html.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tailwind Colors Demo</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="bg-custom-grey p-8">
<h1 class="text-2xl font-semibold
text-custom-blue">
GFG
</h1>
<h2 class="text-3xl font-bold
text-custom-green mt-4">
Welcome to GeeksforGeeks!
</h2>
</div>
</body>
</html>
Project Structure:
- Start the Tailwind CLI build process: Run the CLI tool to scan your template files for classes and build your CSS:
npx tailwindcss -i public/tailwind.css -o public/styles.css --watch
Now, we should see our updated HTML content with our new custom colors applied.
Example 1: In this example, we have added three new colors with custom names: custom-grey, custom-green, and custom-blue, to the tailwind.config.js file. Next, we created our HTML file in order to test our new Tailwind colors.
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
// Add new colors
colors: {
'custom-grey': '#EDF1D6',
'custom-green': '#609966',
'custom-blue': '#344D67',
},
},
},
plugins: [],
}
<!DOCTYPE html>
<html>
<head>
<title>Tailwind Colors Demo</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="bg-custom-grey p-8">
<h1 class="text-2xl font-semibold
text-custom-blue">
Hello :)
</h1>
<h2 class="text-3xl font-bold
text-custom-green mt-4">
Welcome to GeeksforGeeks!
</h2>
</div>
</body>
</html>
Output:
Example 2: In this example, we are adding additional colors. To include a new color in the default palette, you can add it to the theme.extend.colors section of your configuration file i.e. tailwind.config.js
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
// Add new colors
colors: {
'custom-grey': '#EDF1D6',
'custom-green': '#609966',
'custom-blue': '#344D67',
// New color palette
'vivid-violet': {
'50': '#fcf5fe',
'100': '#f9eafd',
'200': '#f2d5f9',
'300': '#e9b4f3',
'400': '#dd87eb',
'500': '#ca58dd',
'600': '#a936b9',
'700': '#942c9f',
'800': '#7a2583',
'900': '#66246b',
},
},
},
},
plugins: [],
}
Now that we have defined our new color palette and created utility classes for them, we can apply them to our HTML elements. Let's update our index.html file to use our new color palette as follows:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tailwind Colors Demo</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="bg-vivid-violet-100 p-8">
<h1 class="text-2xl font-semibold
text-vivid-violet-600">
Hello :)
</h1>
<h2 class="text-3xl font-bold
text-vivid-violet-800 mt-4">
Welcome to GeeksforGeeks!
</h2>
</div>
</body>
</html>
Output:
Similar Reads
How to add a style on a condition in Tailwind CSS ?
In this article, we will see how to integrate conditional styling into our web projects using Tailwind CSS. There are various Tailwind CSS classes are available, although, it usually involves dynamically adding or removing classes using JavaScript. There are different approaches to implementing the
3 min read
How to Set Text Color in RGBA in Tailwind CSS ?
In this article, we will change the color of text to rgba(0, 0, 0, 0.54) which is an RGB color format with an added parameter alpha that tells the opacity of the color. In this article, we are going to learn how we can achieve the text color of rgba(0, 0, 0, 0.54) in Tailwind CSS and hence, change t
3 min read
How to change svg icon colors with Tailwind CSS ?
SVG stands for Scalable Vector Graphics and is an XML-based ( can be edited ) vector image format. SVG is commonly used for icons, animations, interactive charts, graphs, and other dynamic graphics in the browser. As it is XML-based, you can easily edit or change the SVG icon colors with Tailwind. A
3 min read
How to Add Text Shadow in Tailwind CSS?
Adding a text shadow in Tailwind CSS is useful for making text for creating visual effects like glows and embossed or debossed effects. Tailwind CSS does not provide text shadow utilities out of the box but it allows you to easily extend its functionality to add custom utilities. In this article, we
3 min read
How to Add Rounded Corners to an Image in Tailwind CSS ?
Adding rounded corners to an image in Tailwind CSS is an easy way to make your pictures look nicer. Instead of having sharp corners, you can give them smooth, rounded edges. Tailwind CSS has simple classes that let you choose how rounded the corners are, whether just a bit or completely round. Appro
3 min read
How To Add Custom Box Shadow In Tailwind CSS?
Tailwind CSS is a utility-focused CSS framework. Offers a wide range of design utilities. It does include predefined shading, however, for unique design needs, you might want a custom box shadow that goes beyond the default. in this article, you will learn how to extend Tailwind's default shadow and
3 min read
How to Style Checkboxes in Tailwind CSS ?
In Tailwind CSS, you can style checkboxes using utility classes to customize their appearance. You can use utility classes like appearance-none to remove the default browser styles from checkboxes. ApproachBegin with the basic HTML structure, including the <!DOCTYPE html> declaration, <html
3 min read
How to Change Link Color in CSS?
The default HTML links are in blue color, and when the mouse hovers they get an underline. When the link is visited, it becomes violet. Now, To change the color of a link in CSS, you can use the color property along with the <a> (anchor) tag and its various pseudo-classes like :hover, :visited
2 min read
How to Add Padding to All Sides in Tailwind CSS ?
Tailwind CSS is a utility-first CSS framework that provides a vast array of classes to design your website directly in your markup. It emphasizes speed, efficiency, and reduces the time you spend styling in CSS files. One of the most common styling tasks in web development is adding padding to eleme
3 min read
How to use calc() in Tailwind CSS?
The calc() function in CSS allows you to perform calculations for property values dynamically. While Tailwind CSS doesn’t directly support calc(), you can use it inline or with custom utilities.1. Using Inline StylesYou can use calc() directly within the style attribute for dynamic property values.H
2 min read