فصل ۲: آماده‌سازی ابزارها

چطور Tailwind را راه‌اندازی کنیم؟

در درس قبل فهمیدیم تیلوند چیست. حالا نوبت آن است که آن را روی سیستم خود داشته باشیم. برای استفاده از تیلوند سه راه اصلی وجود دارد. ما از **ساده‌ترین راه** شروع می‌کنیم تا همین حالا بتوانید اولین کدتان را تست کنید.

۱. روش سریع (Play CDN) 🚀

این روش سریع‌ترین راه برای یادگیری و تست است. نیازی به نصب هیچ چیزی ندارید! فقط کافیست یک خط کد را به فایل HTML خود اضافه کنید.

نکته برای مبتدی‌ها: این روش برای سایت‌های واقعی و بزرگ توصیه نمی‌شود (چون کمی کند است)، اما برای تمرین و یادگیری عالیست.

کافیست قطعه کد زیر را در بخش <head> فایل خود کپی کنید:

<!– Tailwind CDN –>
<script src=”https://cdn.tailwindcss.com“></script>

۲. روش حرفه‌ای (Tailwind CLI)

وقتی می‌خواهید یک پروژه واقعی بسازید، باید از این روش استفاده کنید. این روش به شما اجازه می‌دهد فایل نهایی خود را به شدت سبک کنید.

مراحل کار (قدم به قدم):

نصب Node.js: ابتدا باید Node.js را روی کامپیوترتان نصب داشته باشید.
اجرای دستور نصب: ترمینال (Terminal یا CMD) را باز کنید و دستور زیر را تایپ کنید:

npm install -D tailwindcss
npx tailwindcss init

بعد از اجرای این دستور، یک فایل به نام tailwind.config.js ساخته می‌شود که “مغز متفکر” تنظیمات قالب شما خواهد بود.

یک فایل HTML کامل برای تمرین شما

می‌توانید تمام این کد را کپی کرده و در یک فایل با پسوند .html ذخیره کنید و در مرورگر باز کنید:

<!DOCTYPE html>
<html lang=”fa” dir=”rtl”>
<head>
  <meta charset=”UTF-8″>
  <title>My First Tailwind Page</title>
  <!– CDN Link –>
  <script src=”https://cdn.tailwindcss.com”></script>
</head>
<body class=”bg-slate-100 h-screen flex items-center justify-center“>

  <div class=”bg-white p-10 rounded-2xl shadow-xl text-center“>
    <h1 class=”text-3xl font-bold text-sky-600“>تبریک!</h1>
    <p class=”mt-4 text-slate-600“>شما تیلوند را با موفقیت راه‌اندازی کردید.</p>
  </div>

</body>
</html>

درس قبلی

بازگشت به دوره

درس بعدی