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

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.