Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Use CSS Variables with Tailwind CSS
Tailwind CSS is a utility-first approach that provides predefined utility classes. Sometimes developers want to use CSS variables instead of predefined classes. This article will guide you in effectively using CSS variables in Tailwind CSS.
What is CSS Variables?
CSS variables are also known as custom properties, which are used to store values in CSS that you can reuse throughout your styles. CSS variables are defined using the --variable-name syntax.
Syntax
:element {
--variable-name: value;
}
Setting Up CSS Variables
To use CSS variables in Tailwind CSS, first you have to set up your CSS file that contains custom properties to be used within Tailwind CSS. To do that, create or update your CSS file to define variables.
Example
:root {
--main-bg-color: #94a3b8;
--text-color: #fdf2f8;
}
Now, you can use these defined CSS variables in Tailwind CSS using any of the approaches mentioned below.
Approaches to Use CSS Variables
The following are the approaches that are most efficient for using CSS variables in Tailwind CSS:
Extending Tailwind Configuration
This is one of the most used approaches to using CSS variables. You can use CSS variables in the tailwind.config.js file to create custom values for colours, spacing, and font sizes. For example:
tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
background: 'var(--main-bg-color)',
text: 'var(--text-color)',
},
},
},
};
Example
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--main-bg-color: #94a3b8;
--text-color: #fdf2f8;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-background text-text
flex justify-center items-center
h-screen flex-col">
<h2 class="text-4xl font-bold">
Tutorialspoint
</h2>
<p class="text-lg">
This is a div styled with CSS variables and Tailwind.
</p>
</body>
</html>
Output
Using Arbitary Values
This is another simple way of using CSS variables in Tailwind CSS. Perfect for quick setup without changing the tailwind.config.js, and it's flexible and lightweight for small projects.
Syntax
<div class="bg-[var(--main-bg)] text-[var(--text-color)]"> --- </div>
Example
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--main-bg-color: #94a3b8;
--text-color: #fdf2f8;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center items-center
flex-col h-screen bg-slate-600">
<div class="bg-[--main-bg-color] text-[--text-color]
text-center p-6">
<h2 class="text-4xl font-bold">
Tutorialspoint
</h2>
<p class="text-lg">
This is a div styled with CSS variables and Tailwind.
<br>(Arbitary values)
</p>
</div>
</body>
</html>
Output
73 Views
