🌀 Setting Up Tailwind CSS in a Project

📦 Step 1: Initialize Your Project
First, create a new project folder and initialize it with npm:

bash
Copy
Edit
npm init -y
🔧 Step 2: Install Tailwind CSS
Use npm to install Tailwind and its peer dependencies:

bash
Copy
Edit
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
This creates two config files: tailwind.config.js and postcss.config.js.

📁 Step 3: Configure Template Paths
In your tailwind.config.js, define the paths to all your HTML, JS, or JSX files:

js
Copy
Edit
content: ["./src/*/.{html,js,jsx}"]
**🎨 Step 4: Add Tailwind Directives
**In your main CSS file (e.g., index.css), add the Tailwind directives:

css
Copy
Edit
@tailwind base;
@tailwind components;
@tailwind utilities;
**🚀 Step 5: Build Your CSS
**Use the Tailwind CLI to build your CSS:

bash
Copy
Edit
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
**✅ Step 6: Link Output CSS
**Finally, link the generated output.css in your HTML file:

html
Copy
Edit

🧠 That’s it!
You're all set to start using Tailwind utility classes in your project.