Skip to content
Related Articles
Open in App
Not now

Related Articles

How to use CSS variables with TailwindCSS ?

Improve Article
Save Article
  • Last Updated : 12 May, 2021
Improve Article
Save Article

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;

#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.


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. 


<!DOCTYPE html>
    <link href=
    <script src="tailwind.config.js">
   <link href="Global.css" rel="stylesheet">
<body class="text-center">
    <h1 class="text-green-600 text-5xl font-bold">
    <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>


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!