How to Add New Colors in Tailwind CSS ?
Last Updated :
26 May, 2023
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
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
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
},
},
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
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
colors: {
'custom-grey': '#EDF1D6',
'custom-green': '#609966',
'custom-blue': '#344D67',
},
},
},
plugins: [],
}
|
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">
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
module.exports = {
content: ["./public/**/*.{html,js}"],
theme: {
extend: {
colors: {
'custom-grey': '#EDF1D6',
'custom-green': '#609966',
'custom-blue': '#344D67',
'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:
Â
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...