One of the most popular CSS frameworks is Tailwind. But the installation of Tailwind can be tricky. The current version of Tailwind is 3.2.

I struggled with the documents offered on tailwindcss.com. Also, I've found that most of the tutorials out there on YouTube are outdated or hard to understand. In this blog, let's find out the easiest way to install Tailwind.

Prerequisites

Before installing Tailwind, you at least need these two things installed on your machine:

1. Nodejs [to install go to nodejs.com]

2. NPM [for more info go to npm website]

Installation:

First, create a folder on VS Code and create an HTML file [index.html].

Press Ctrl + ` to open the terminal. Now write "npm init" and press enter to meet all requirements.

This will run npm and create a package.json file.

npm init

To install Tailwind, write the code below in terminal,

npm install -D tailwindcss

It will download all the necessary files into our folder.

Now run this code below,

npx tailwindcss init

this will create a "tailwind.config.js" file.

Click on the "tailwind.config.js" file and you'll find a content area. Write your Html file name over there.

now create another folder named "src" and create a CSS file inside that folder and paste this code below on that CSS file,

@tailwind base;
@tailwind components;
@tailwind utilities;

In the end, open the terminal and write "npx tailwindcss -i [CSS file location] -o ./dist/output.css --watch"

for this project this code will look like this,

npx tailwindcss -i ./src/style.css -o ./dist/output.css --watch

this will create a folder named "dist" and hence you'll find a CSS file.

Done!! you are all set.

Now just write tailwind.

Note:

Using CDN is the easiest solution for this, but this is not industry standard and for production we need to install this way.

PRO Tip:

1. Install Tailwind CSS IntelliSense vscode Extension

2. For live server users, try using this for a better experience:

   extension -> extension settings -> scroll down until you find,

   Liver Server -> clik on the ⚙️ -> extension settings-> Full Reload -> enable it.