How to use CSS variables with TailwindCSS ?
Last Updated :
12 May, 2021
Tailwind CSS allows users to predefined classes instead of using the pure CSS properties.
We have to install the Tailwind CSS. Create the main CSS file (Global.css) which will look like the below code.
Global.css: In the following code, the entire body is wrapped into a single selector. The entire body is selected by using class root or id root.
@tailwind base;
@tailwind components;
@tailwind utilities;
.root,
#root,
#docs-root {
--primary-color: green;
--secondary-color: blue;
}
tailwind.config.js: The following code is the content for the tailwind config file with new CSS variables. We simply want to extend the config to add new values.
Javascript
module.exports = {
theme: {
extend: {
colors: {
header: "var(--header)",
primary: "var(--primary)",
secondary: "var(--secondary)",
main: "var(--main)",
background: "var(--background)",
accent: "var(--accent)",
footer: "var(--footer)"
},
},
},
};
|
HTML code: After completing the above steps, we can use CSS variables in the following HTML code.
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
<script src="tailwind.config.js">
</script>
<link href="Global.css" rel="stylesheet">
</head>
<body class="text-center">
<center>
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS flex Class</b>
<div class="flex bg-green-200 p-4 mx-16 ">
<div class="flex-1 bg-green-500 rounded-lg">1</div>
<div class="flex-1 bg-green-500 rounded-lg">2</div>
<div class="flex-1 bg-green-500 rounded-lg">3</div>
</div>
</center>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...