Setting Up Tailwind CSS in Your Project: Installation and Configuration

🚀 Getting Started with Tailwind CSS

Tailwind CSS offers a streamlined setup process for both traditional HTML files and modern build tools.

🧰 Step-by-Step Setup (Using npm)

1️⃣ Initialize Your Project

npm init -y

2️⃣ Install Tailwind and Dependencies

npm install tailwindcss postcss autoprefixer

3️⃣ Generate Tailwind Config File

npx tailwindcss init

4️⃣ Create Your Input CSS File

📄 src/input.css

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

5️⃣ Add a Build Script to package.json

"scripts": {
  "build": "tailwindcss build src/input.css -o dist/output.css"
}

6️⃣ Run the Build

npm run build

7️⃣ Link Tailwind in Your HTML

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

⚡ Alternative: Use CDN for Quick Prototyping

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

✅ This setup gives you a foundational workflow to integrate Tailwind CSS efficiently into your project and start building modern UIs right away.