Skip to content

Courses
Tutorials
Practice
Contests

Tailwind CSS Tutorial
Tailwind Interview Questions
Tailwind Layout
Tailwind Flexbox
Tailwind Grid
Tailwind Alignment
Tailwind Spacing
Tailwind Sizing
Tailwind Typography
Tailwind Backgrounds
Tailwind Borders
Tailwind Effects
Tailwind Filters
Tailwind Tables
Tailwind Transitions and Animation
Tailwind Transforms
Tailwind Interactivity
CSS Frameworks
Web Technology

How to use Tailwind CSS with esbuild ?

How to use CSS variables with TailwindCSS ?

Last Updated : 17 Jul, 2024

Comments

Improve

Suggest changes

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:

How to use Tailwind CSS with esbuild ?

S

skyridetim

Improve

Article Tags :

Web Technologies
CSS
Tailwind CSS

Similar Reads

How to use Sass Variables with CSS3 Media Queries ?

SASS Variables: SASS Variables are very simple to understand and use. SASS Variables assign a value to a name that begins with $ sign, and then just refer to that name instead of the value. Despite this, they are one of the most useful tools SASS provides.Â SASS Variables provide the following featur

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

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

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

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

How to Set Width Transition in Tailwind CSS ?

In Tailwind CSS, setting a width transition allows for smooth animation when an element's width changes. It enhances the user experience by gradually transitioning the width over a specified duration, creating a polished effect. Tailwind's utility classes make implementing transitions simple. Approa

How to use Tailwind CSS with Next.js Image ?

Integrating Tailwind CSS with Next.js enables you to style your application efficiently using utility-first CSS. When combined with the Next.js Image component, you can create responsive and optimized images with ease and consistency. In this article, we will learn how to use Tailwind CSS with Next.

How To Use Tailwind CSS Grid?

Tailwind CSS can provide a highly customizable and low-level framework to build responsive and dynamic web layouts using the utility-first classes. One of the most powerful layout systems provided by Tailwind is CSS Grid, which allows developers to create complex and flexible grid-based layouts with

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

How to use :not() in Tailwind CSS ?

In Tailwind CSS, the :not() selector is used to exclude specific elements from a set of CSS rules. It allows you to apply styles to all elements except those that match the specified selector, providing greater control and precision in styling complex layouts. CDN link: <script src="https://cdn.t

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences