How to use CSS variables with TailwindCSS ? Last Updated : 17 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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> <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: Comment More infoAdvertise with us Next Article How to use CSS variables with TailwindCSS ? S skyridetim Follow Improve Article Tags : Web Technologies CSS Tailwind CSS Similar Reads How to setup Tailwind CSS with Vite ? Tailwind CSS is a popular CSS framework that simplifies the process of designing user interfaces with its utility-first approach. Vite is a build tool that provides a fast development experience for modern web projects. Together, they make front-end development efficient and enjoyable. In this artic 4 min read How to use Tailwind CSS with Django ? Tailwind CSS has gained immense popularity among developers for its utility-first approach to styling web applications. Django on the other hand is a robust and flexible web framework written in Python. Combining these two powerful tools can enhance your Django projects. In this article, we will exp 4 min read How to use Tailwind CSS with esbuild ? Tailwind CSS is a utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. An esbuild is a bundler for the web project that brings the build tool for performance enhancement, along with fa 2 min read How to use CSS Animations with Tailwind CSS ? Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind's animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs. Table of Content Tailwind CSS Animation Utility Class 3 min read How to load window width value to SCSS variable ? The task is to load the window width value to an SCSS variable and use it. Let us take a brief introduction to an SCSS. SCSS Variables can store any kind of value color, font-family, font-size, clip-path values, etc, and are mainly used to maintain the reusability of code across the stylesheets. App 2 min read Like