How to use Tailwind CSS with esbuild ?
Last Updated :
24 Apr, 2025
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 facilitating to development of an easy-to-use modern bundler. Combining these tools can provide an efficient development experience.
In this article, we will learn how to use Tailwind CSS with esbuild, along with understanding their basic implementation through the examples. In order to use Tailwind CSS with esbuild, we need to follow the below steps.
Steps for installing the tailwind CSS with the esbuild
Follow the below steps to set up a tailwind CSS with the esbuild bundler:
Step 1: Setup a new project by creating a new directory
mkdir tailwind-esbuild
cd tailwind-esbuild
Step 2: Initialize the package.json file
npm init -y
Step 3: Install the tailwind-esbuild dependencies
npm install tailwindcss esbuild
Step 4: Create a Tailwind CSS configuration file
npx tailwindcss init
Step 5: Create a folder inside which create styles.css and add your CSS code
CSS
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
// Rest of CSS Code
|
Project Structure
Example 1: In this example, we will use Tailwind CSS with esbuild.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="dist/styles.css">
</head>
<body>
<h1 class="text-3xl text-center">
Tailwind CSS with esbuild
</h1>
<div class="my-custom-class">
gfg is amazing
</div>
<script src="dist/bundle.js"></script>
</body>
</html>
|
CSS
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
.my-custom-class {
background-color: #f1f1f1;
color: #333;
}
|
Javascript
console.log('TailwindCSS-esbuild');
|
- Step to run: Run the following command to bundle the JavaScript file using esbuild.
npx esbuild index.js --bundle --outfile=dist/bundle.js
The above command will create a file bundle.js inside the ‘dist’ folder which contained bundled javascript.
Output:
Example 2: This is another example that illustrates the implementation of Tailwind CSS with esbuild.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Tailwind CSS with esbuild </title>
<link rel="stylesheet"
href="styles.css">
</head>
<body>
<div class="container">
<h1 class="text-3xl font-bold text-blue-500">
Welcome to Tailwind CSS
</h1>
<p class="text-gray-700">GFG</p>
<button id="btn"
class="px-4 py-2 mt-4 bg-blue-500
text-white rounded hover:bg-blue-700">
Click Me
</button>
</div>
<script src="index.js"></script>
</body>
</html>
|
CSS
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
|
Javascript
document.getElementById('btn').addEventListener('click', function() {
alert('Button clicked!');
});
|
Step 7: Run the following command to bundle the JavaScript file using esbuild.
npx esbuild index.js --bundle --outfile=dist/bundle.js
The above command will create a file bundle.js inside the ‘dist’ folder which contained bundled javascript.
Output:
Similar Reads
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 use CSS variables with TailwindCSS ?
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 entir
1 min read
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 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.
3 min read
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
2 min read
How to use calc() in Tailwind CSS?
The calc() function in CSS allows you to perform calculations for property values dynamically. While Tailwind CSS doesn’t directly support calc(), you can use it inline or with custom utilities. 1. Using Inline StylesYou can use calc() directly within the style attribute for dynamic property values.
2 min read
How to use Google Fonts in Tailwind CSS?
Google Fonts in Tailwind CSS enhances webpage design with free and easy-to-use fonts. It provides a library of 1000+ fonts served by Google servers. Add the Google Fonts API link to your HTML file's <head>.Configure tailwind.config.js to include the font under fontFamily.Tailwind comes with th
4 min read
How to use Ant Design with Tailwind CSS in a React Project ?
The integration of Ant Design and Tailwind CSS in a React project presents challenges due to their differing styling conventions. Ant Design offers a feature-rich component library with its own class names, while Tailwind CSS provides a utility-first framework for custom designs. Combining both libr
2 min read
Tailwind CSS Text Overflow
This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS text-overflow property. This class is used to specify that some text has overflown and hidden from view. The whitespace class must be set to nowrap and the overflow
2 min read
How to change the width on hover using Tailwind CSS ?
In this article, we will change the width on hover using Tailwind. There is no inbuilt method in Tailwind, so you have to customize the tailwind.config.js file. Let's discuss the whole process further in this article. By default, tailwind CSS only generates responsive variants for width utilities. T
3 min read