فصل 2 از 27 درس 1 از 2

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

راه‌اندازی با Tailwind CLI

بخشی از آموزش جامع Tailwind CSS

محتوای درس راه‌اندازی با Tailwind CLI

در این درس Tailwind CSS را با روش رسمی Tailwind CLI راه‌اندازی می‌کنیم. این روش برای شروع یک پروژه ساده و آشنایی با فرایند Build مناسب است. پیش از شروع مطمئن شوید Node.js و npm روی سیستم نصب هستند و فرمان‌ها را در پوشه اصلی پروژه اجرا می‌کنید.

مرحله ۱: نصب Tailwind CSS و ابزار CLI

بسته‌های tailwindcss و @tailwindcss/cli را با npm نصب کنید. اگر هنوز فایل package.json ندارید، ابتدا یک بار npm init -y را اجرا کنید.

Terminal
npm install tailwindcss @tailwindcss/cli

مرحله ۲: وارد کردن Tailwind در فایل CSS اصلی

پوشه src را بسازید و داخل آن فایل input.css را ایجاد کنید. سپس Tailwind را در این فایل Import کنید.

src/input.css
@import "tailwindcss";

مرحله ۳: شروع فرایند Build با Tailwind CLI

فرمان زیر فایل ورودی را می‌خواند، کلاس‌های Tailwind استفاده‌شده در فایل‌های پروژه را پیدا می‌کند و CSS نهایی را در src/output.css می‌نویسد.

Terminal
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
  • -i مسیر فایل CSS ورودی را مشخص می‌کند.
  • -o مسیر فایل CSS کامپایل‌شده را مشخص می‌کند.
  • --watch فرایند را باز نگه می‌دارد و بعد از هر تغییر، خروجی را دوباره می‌سازد.

تا زمانی که در حال توسعه هستید این Terminal را باز نگه دارید. بعد از اجرای موفق، فایل src/output.css به‌صورت خودکار ساخته می‌شود.

مرحله ۴: استفاده از Tailwind در HTML

فایل src/index.html را ایجاد کنید. در بخش <head> باید فایل کامپایل‌شده یعنی output.css را لینک کنید؛ فایل input.css را مستقیم به HTML متصل نکنید. سپس می‌توانید کلاس‌های Utility را روی عناصر HTML قرار دهید.

src/index.html
<!doctype html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./output.css" rel="stylesheet">
    <title>Tailwind CSS</title>
  </head>
  <body>
    <main class="grid min-h-screen place-items-center bg-slate-950">
      <h1 class="text-3xl font-bold text-cyan-400 underline">
        Hello world!
      </h1>
    </main>
  </body>
</html>

اکنون فایل src/index.html را با مرورگر یا افزونه‌ای مانند Live Server باز کنید. اگر فرایند Build هنوز در حال اجرا باشد، با تغییر کلاس‌های HTML فایل output.css نیز به‌روزرسانی می‌شود و نتیجه را بعد از Refresh صفحه می‌بینید.

ساختار نهایی پروژه

Project structure
your-project/
├── node_modules/
├── src/
│   ├── index.html
│   ├── input.css
│   └── output.css
├── package-lock.json
└── package.json

نکته: فایل output.css خروجی تولیدشده است. تغییرهای اصلی را در HTML و input.css انجام دهید و تولید مجدد خروجی را به CLI بسپارید.