How to Access Tailwind Colors from JavaScript ?
Last Updated :
25 Jul, 2024
Tailwind CSS is a "Utility first CSS framework". The feature that makes Tailwind has a variety of classes and provides a huge set of predefined colors that can be used in our stylesheets without the need to define them manually. These predefined colors are categorized into different color palettes which allows easy access to these colors and can be applied directly to our desired elements just by writing some predefined conventions without the need to define them manually. These colors can be referenced from CSS as well as JavaScript. In this article, we will see how to access the Tailwind colors from JavaScript. For this, we will install & create a basic Tailwind project, along with configuring the required files.
Create a new project:
To get started, we will follow the below step:
- Use the following commands in your terminal to create a new project directory and navigate into it:
mkdir file-name
cd file-name
- Next, initialize a new Node.js project using the following command:
npm init -y
Installing Tailwind CSS:
- After creating the new project, we need to install Tailwind CSS and create a configuration file tailwind.config.js. This can be done by running the following command in the terminal:
npm install -D tailwindcss
npx tailwindcss init
- Configure your template paths: Add the paths to all of your template files in your tailwind.config.js file by adding ["./public/**/*.{html, js}"] to content:
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 a new file tailwind.css. In tailwind.css add the @tailwind directives for each of Tailwind’s layers:
@tailwind base;
@tailwind components;
@tailwind utilities;
- 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
It will create an output css file styles.css in the public folder. Now we can start using Tailwind in our HTML and JavaScript files.
Project Structure:
Example 1: In this example, we add a tailwind using the CDN. Upon clicking the "Change Color" button, the background color of the main div will change from red to green.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<script src=
"https://cdn.tailwindcss.com">
</script>
<script src="script.js"></script>
<title>
Access Tailwind Colors from JS with GFG
</title>
</head>
<body>
<div id="main"
class="bg-red-500 text-white p-4">
Hello and Welcome to GeeksforGeeks!
</div>
<button id="colorChange"
onclick="changeColor()">
Change Color
</button>
</body>
</html>
function changeColor() {
// Accessing the div
const element =
document.getElementById('main');
// Remove the current color class
element.classList.remove('bg-red-500');
// Add a new color class
element.classList.add('bg-green-500');
}
Output:
Example 2: Using the Tailwind CLI and configuring files for adding Tailwind in the project and accessing Tailwind Colors from JavaScript.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
colors: {
primary: '#ff0000',
secondary: '#00ff00',
tertiary: '#0000ff'
}
},
},
plugins: [],
}- In your project's CSS file, include the Tailwind CSS styles by using @import or @use statements.
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
- Steps to run: Run the build command to generate the CSS file with Tailwind styles:
npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watch
- Add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.
<link href="/https/www.geeksforgeeks.org/dist/output.css" rel="stylesheet">
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link href="../dist/output.css"
rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline
text-green-500">
GeeksforGeeks!
</h1>
<div id="colorBox"
class="color-box bg-primary">
ok
</div>
<script>
const colorBox =
document.getElementById('colorBox');
// Change the background color of the
// color box on click
colorBox.addEventListener('click', function () {
// Get the current color class
const currentColor = colorBox.classList[1];
// Get the next color class
const nextColor = getNextColor(currentColor);
colorBox.classList.remove(currentColor);
colorBox.classList.add(nextColor);
});
// Get the next color class based on
// the current color class
function getNextColor(currentColor) {
switch (currentColor) {
case 'bg-primary':
return 'bg-secondary';
case 'bg-secondary':
return 'bg-tertiary';
case 'bg-tertiary':
return 'bg-primary';
default:
return 'bg-primary';
}
}
</script>
</body>
</html>
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
.color-box {
width: 40px;
height: 30px;
border-radius: 8px;
cursor: pointer;
text-align: center;
}
Output:
Similar Reads
How to Get Tailwind CSS Active Breakpoint in JavaScript ? In JavaScript, a Tailwind CSS active breakpoint refers to a specific breakpoint configuration in the Tailwind CSS framework that is currently active, which allows web designers to target specific screen sizes and also consider their styles and functionalities efficiently. In this article, we will se
3 min read
How to Add New Colors in Tailwind CSS ? 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
4 min read
How to Add Colors to JavaScript Console Outputs ? To Add Colors to JavaScript Console Outputs, we have multiple approaches In this article, we will learn to Add colors to Javascript console outputs. Below are the approaches used to add Colors to JavaScript Console Outputs: Table of Content Using %CUsing ANSI escape code Approach 1: Using %CThe %c p
1 min read
How to pick a random color from an array using CSS and JavaScript ? The task is to pick a random color from an array using CSS. There is no way to do this using CSS only. CSS doesn't support logical statements because CSS is purely deterministic (there is nothing like array etc in CSS). We can use client-side JavaScript to select a random color from the array. Below
1 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 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