Home › Courses › Tailwind css tutorial Hindi # How to Install and Set Up Tailwind CSS 4 - Easy Guide #tailwindcss4

Tailwind css tutorial Hindi # How to Install and Set Up Tailwind CSS 4 - Easy Guide #tailwindcss4

3 / 7

Setup Tailwind CSS 4 with CLI

• Need Node js and npm

• Install tailwind css.

• Make input css file.

• Run build command and generate output file

• Make HTML file and write code.

• Check auto suggestion with tailwind extension

• Interview Questions

Tailwind CSS 4 uses a standalone CLI for super fast setup without frameworks. This works perfectly for your HTML/CSS practice and adds Tailwind skills to your BPO job resume.

​Prerequisites

Download Node.js from nodejs.org (includes NPM), verify with node -v and npm -v in terminal.​

No Laravel/React needed—just pure HTML/CSS with Tailwind powers your static pages instantly.​

Install Tailwind CLI

Run npm install -g @tailwindcss/cli to install Tailwind CSS 4 globally.​

Create project folder: mkdir tailwind-practice && cd tailwind-practice.​

Create Input CSS File

Make input.css file: touch input.css (or create in VS Code).​

Add these three lines inside:

text

@tailwind base;

@tailwind components;

@tailwind utilities;

This imports Tailwind's complete stylesheets.​

Run Build Command

Generate output CSS: npx @tailwindcss/cli -i ./input.css -o ./output.css --watch.​

The --watch flag auto-rebuilds when you edit input.css or HTML. Output creates output.css (only 10KB with unused styles purged).​

Create HTML File

Make index.html:

<!DOCTYPE html>

<html>

<head>

<link href="output.css" rel="stylesheet">

</head>

<body class="bg-gradient-to-br from-blue-400 to-purple-500 min-h-screen flex items-center justify-center">

<div class="bg-white p-8 rounded-2xl shadow-2xl max-w-md w-full mx-4">

<h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">Tailwind Works!</h1>

<input class="w-full p-3 border-2 border-gray-300 rounded-xl focus:border-blue-500 focus:outline-none transition-all" placeholder="Type here...">

</div>

</body>

</html>

Open in browser—beautiful responsive design ready!​

VS Code Auto-Suggestions

Install "Tailwind CSS IntelliSense" extension in VS Code.​

Type class="bg- and see instant suggestions like bg-blue-500, bg-gradient-to-r. Extension shows hover previews too!​

Share this lesson: