A complete step-by-step guide to install, connect, and use Tailwind CSS v4 using the official Tailwind CLI.
Before getting started, make sure you have:
- ✅ Node.js installed
- ✅ npm installed
- ✅ VS Code (Recommended)
Check your installed versions:
node -v
npm -vInstall Tailwind CSS and the official CLI package:
📌 This is the command that adds Tailwind CSS to your project.
npm install tailwindcss @tailwindcss/cliCreate a file named:
input.css
Inside the file, add:
@import "tailwindcss";This imports all Tailwind utilities, components, and core styles into your project.
Compile Tailwind CSS into a usable CSS file:
npx @tailwindcss/cli -i ./input.css -o ./output.css| Option | Description |
|---|---|
-i |
Input CSS file |
-o |
Output CSS file |
This command:
📥 Reads from:
input.css
📤 Generates:
output.css
Automatically rebuild CSS whenever you save changes.
npx @tailwindcss/cli -i ./input.css -o ./output.css --watch✅ No need to run the build command repeatedly
✅ CSS updates automatically
✅ Faster development workflow
Keep this terminal running while developing.
Link the generated CSS file inside your HTML document.
<link rel="stylesheet" href="./output.css">Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./output.css">
</head>
<body>
<h1 class="text-4xl font-bold text-cyan-500">
Hello Tailwind CSS 🚀
</h1>
</body>
</html>Add the following code:
<h1 class="text-4xl font-bold text-cyan-500">
Tailwind is Working! 🚀
</h1>✅ Large text
✅ Cyan color
✅ Tailwind classes applied
If everything looks correct, Tailwind is connected successfully.
project/
│
├── index.html
├── input.css
├── output.css
├── package.json
├── package-lock.json
│
└── assets/
├── images/
└── icons/
npm install tailwindcss @tailwindcss/cli@import "tailwindcss";npx @tailwindcss/cli -i ./input.css -o ./output.css --watch<link rel="stylesheet" href="./output.css">Use Tailwind utility classes directly in your HTML.
npm install tailwindcss @tailwindcss/clinpx @tailwindcss/cli -i ./input.css -o ./output.cssnpx @tailwindcss/cli -i ./input.css -o ./output.css --watch- Node.js Installed
- npm Installed
- Tailwind CSS Installed
- input.css Created
- @import "tailwindcss" Added
- output.css Generated
- HTML Connected to output.css
- Watch Mode Running
- Tailwind Classes Working
Your Tailwind CSS v4 environment is now fully configured and ready for development.
Build fast, create beautiful interfaces, and enjoy the power of utility-first CSS. 🚀✨
Monty Yadav
- 💻 Web Design & Development
- 🎨 Canva • AI • Creativity
- 🚀 Building in Public
- 🎬 Content • Branding • Editing
Helping small businesses build their online presence through design, websites, content, and AI.
⭐ If you found this repository helpful, consider giving it a star.
Made with ❤️ by Monty Yadav