Skip to content
Related Articles

Related Articles

Improve Article

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=
         "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :