نصب و راه‌اندازی Tailwind CSS

1) 📌 پیش‌نیازها

قبل از شروع باید روی سیستم‌ت:

  • Node.js (آخرین نسخه LTS) نصب باشه.

  • npm یا yarn به‌عنوان مدیر پکیج‌ها داشته باشی.

می‌تونی با دستورهای زیر بررسی کنی:

node -v
npm -v

2) 📂 ایجاد پروژه

یک پوشه جدید برای پروژه بساز و واردش شو:

mkdir my-project
cd my-project

3) 📦 نصب Tailwind

یک پروژه Node جدید بساز:

npm init -y

سپس Tailwind و ابزارهای لازم رو نصب کن:

npm install -D tailwindcss postcss autoprefixer

بعدش Tailwind رو مقداردهی اولیه کن:

npx tailwindcss init -p

✅ این دستور دو فایل می‌سازه:

  • tailwind.config.js → فایل تنظیمات Tailwind

  • postcss.config.js → تنظیمات PostCSS

4) 📝 پیکربندی مسیر فایل‌ها

در فایل tailwind.config.js مسیر فایل‌های HTML و JS رو مشخص کن:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

5) 🎨 اضافه کردن Tailwind به CSS

یک فایل CSS بساز (مثلا src/input.css) و دستورات پایه Tailwind رو داخلش بذار:

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

6) ⚡ اجرای Tailwind

در package.json یک اسکریپت بساز:

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

حالا دستور زیر رو اجرا کن:

npm run build

✅ این کار باعث میشه یک فایل CSS خروجی (output.css) بسازه که شامل همه کلاس‌های Tailwind هست.

7) 🔗 استفاده در HTML

در فایل index.html این فایل CSS رو لینک بده:

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>شروع با Tailwind</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <h1 class="text-3xl font-bold text-blue-500">سلام Tailwind 🎉</h1>
</body>
</html>