نصب و راه‌اندازی Tailwind CSS و ساخت اولین پروژه

در مقاله قبل با Tailwind CSS و مفهوم Utility-First آشنا شدیم و دیدیم که چگونه می‌توانیم با ترکیب کلاس‌های کوچک، ظاهر عناصر HTML را ایجاد کنیم. در این مقاله وارد بخش عملی می‌شویم و یاد می‌گیریم چگونه Tailwind CSS را نصب و راه‌اندازی کنیم و یک پروژه ساده ایجاد کنیم. هدف این مقاله این است که حتی اگر برای اولین بار با Tailwind کار می‌کنید، بتوانید مراحل راه‌اندازی را از ابتدا انجام دهید و در پایان یک صفحه ساده با Tailwind CSS داشته باشید.

قبل از شروع چه چیزهایی نیاز داریم؟

برای شروع کار با Tailwind CSS بهتر است موارد زیر را روی سیستم خود داشته باشید:

• آشنایی اولیه با HTML

• آشنایی مقدماتی با CSS

• نصب Node.js

• یک ویرایشگر کد مانند Visual Studio Code

• آشنایی بسیار ساده با Terminal یا Command Prompt

اگر قبلاً با پروژه‌های JavaScript یا Node.js کار کرده باشید، اجرای مراحل این مقاله برای شما ساده‌تر خواهد بود.

نکته: Tailwind CSS در طول زمان تغییر کرده است. در این دوره از روش راه‌اندازی متناسب با نسخه‌های جدید Tailwind CSS استفاده می‌کنیم.

نصب Node.js

برای استفاده از ابزارهای مورد نیاز Tailwind، ابتدا باید Node.js روی سیستم نصب باشد.

پس از نصب Node.js، Terminal یا Command Prompt را باز کنید و دستور زیر را اجرا کنید:

node -v

اگر Node.js به درستی نصب شده باشد، نسخه آن نمایش داده می‌شود.

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

npm -v

اگر هر دو دستور نسخه‌ای را نمایش دادند، محیط اولیه برای ادامه کار آماده است.

ایجاد پروژه جدید

ابتدا یک پوشه برای پروژه ایجاد کنید.

برای مثال:

mkdir tailwind-first-project

سپس وارد پوشه شوید:

cd tailwind-first-project

اکنون باید یک پروژه Node.js ایجاد کنیم:

npm init -y

پس از اجرای این دستور، فایلی با نام زیر ایجاد می‌شود:

package.json

این فایل اطلاعات اصلی پروژه و وابستگی‌های npm را نگهداری می‌کند.

ساختار فعلی پروژه تقریباً به شکل زیر خواهد بود:

tailwind-first-project/
└── package.json

نصب Tailwind CSS

در نسخه‌های جدید Tailwind CSS، روش نصب با نسخه‌های قدیمی تفاوت‌هایی دارد.

برای نصب Tailwind CSS و ابزار مورد نیاز آن، دستور زیر را اجرا کنید:

npm install tailwindcss @tailwindcss/cli

پس از نصب موفق، پوشه‌ای مانند زیر در پروژه ایجاد می‌شود:

node_modules/

همچنین اطلاعات پکیج‌های نصب‌شده در package.json و package-lock.json قرار می‌گیرد.

ساختار پروژه اکنون تقریباً به این شکل است:

tailwind-first-project/
├── node_modules/
├── package.json
└── package-lock.json

ایجاد فایل HTML

حالا یک فایل با نام زیر ایجاد کنید:

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">

    <title>اولین پروژه Tailwind CSS</title>
</head>
<body>

    <h1>
        سلام Tailwind CSS
    </h1>

</body>
</html>

در این مرحله هنوز Tailwind CSS را به صفحه متصل نکرده‌ایم.

ایجاد فایل CSS

در ریشه پروژه یک پوشه با نام src ایجاد کنید:

src/

سپس داخل آن یک فایل به نام زیر ایجاد کنید:

input.css

ساختار پروژه:

tailwind-first-project/
├── node_modules/
├── src/
│   └── input.css
├── index.html
├── package.json
└── package-lock.json

داخل فایل input.css دستور زیر را قرار دهید:

@import "tailwindcss";

این دستور Tailwind CSS را وارد پروژه می‌کند.

ساخت فایل CSS خروجی

اکنون باید به Tailwind بگوییم فایل CSS ورودی را پردازش کرده و یک فایل CSS خروجی ایجاد کند.

برای این کار می‌توانیم از Tailwind CLI استفاده کنیم.

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

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

قسمت‌های مختلف این دستور عبارت‌اند از:

-i ./src/input.css

فایل CSS ورودی را مشخص می‌کند.

-o ./src/output.css

محل فایل CSS خروجی را مشخص می‌کند.

--watch

باعث می‌شود Tailwind تغییرات پروژه را زیر نظر داشته باشد و هنگام تغییر فایل‌ها، خروجی CSS را به‌روزرسانی کند.

پس از اجرای دستور، فایل زیر ایجاد خواهد شد:

src/output.css

ساختار پروژه اکنون:

tailwind-first-project/
├── node_modules/
├── src/
│   ├── input.css
│   └── output.css
├── index.html
├── package.json
└── package-lock.json

اتصال Tailwind CSS به HTML

اکنون باید فایل CSS خروجی را به HTML متصل کنیم.

فایل index.html را باز کنید و در قسمت <head> این خط را اضافه کنید:

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

فایل کامل:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>اولین پروژه Tailwind CSS</title>

    <link rel="stylesheet" href="./src/output.css">
</head>
<body>

    <h1>
        سلام Tailwind CSS
    </h1>

</body>
</html>

اکنون Tailwind به صفحه متصل شده است.

اولین Utility Class

حالا می‌توانیم اولین کلاس Tailwind خود را استفاده کنیم.

کد <h1> را تغییر دهید:

<h1 class="text-4xl font-bold text-blue-600">
    سلام Tailwind CSS
</h1>

در این مثال:

• text-4xl اندازه متن را افزایش می‌دهد.

• font-bold متن را ضخیم می‌کند.

• text-blue-600 رنگ متن را آبی می‌کند.

اگر فایل HTML را در مرورگر باز کنید، باید نتیجه‌ای مشابه یک عنوان بزرگ و آبی مشاهده کنید.

ساخت اولین صفحه ساده

حالا کمی بیشتر تمرین کنیم و یک صفحه ساده بسازیم.

فایل 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">

    <title>اولین پروژه Tailwind CSS</title>

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

<body class="bg-gray-100">

    <main class="min-h-screen flex items-center justify-center p-6">

        <div class="bg-white p-8 rounded-xl shadow-md max-w-md w-full">

            <h1 class="text-3xl font-bold text-gray-800 mb-4">
                اولین پروژه Tailwind
            </h1>

            <p class="text-gray-600 mb-6">
                این اولین صفحه‌ای است که با Tailwind CSS ایجاد کرده‌ایم.
            </p>

            <button class="bg-blue-600 text-white px-6 py-3 rounded-lg">
                شروع کنید
            </button>

        </div>

    </main>

</body>
</html>

در این مثال چند Utility Class جدید را مشاهده می‌کنید.

کلاس‌های مربوط به صفحه

bg-gray-100

رنگ پس‌زمینه صفحه را تعیین می‌کند.

min-h-screen

حداقل ارتفاع عنصر را برابر با ارتفاع صفحه قرار می‌دهد.

flex

عنصر را به یک Flex Container تبدیل می‌کند.

items-center

محتوا را در راستای عمودی در مرکز قرار می‌دهد.

justify-center

محتوا را در راستای افقی در مرکز قرار می‌دهد.

p-6

برای صفحه Padding ایجاد می‌کند.

کلاس‌های مربوط به کارت

bg-white

پس‌زمینه سفید.

p-8

فاصله داخلی.

rounded-xl

گوشه‌های گرد.

shadow-md

سایه.

max-w-md

حداکثر عرض کارت.

w-full

عرض عنصر را تا حداکثر فضای در دسترس افزایش می‌دهد.

کلاس‌های مربوط به دکمه

bg-blue-600

رنگ پس‌زمینه دکمه.

text-white

رنگ متن سفید.

px-6

فاصله داخلی افقی.

py-3

فاصله داخلی عمودی.

rounded-lg

گرد کردن گوشه‌های دکمه.

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

تا اینجا پروژه ما به شکل زیر است:

tailwind-first-project/
│
├── node_modules/
│
├── src/
│   ├── input.css
│   └── output.css
│
├── index.html
├── package.json
└── package-lock.json

این ساختار برای اولین پروژه آموزشی ما کافی است.

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

اضافه کردن Script به package.json

به جای اینکه هر بار دستور طولانی CLI را به صورت دستی اجرا کنیم، بهتر است یک Script در package.json ایجاد کنیم.

فایل package.json را باز کنید.

بخش scripts را به شکل زیر تنظیم کنید:

{
    "scripts": {
        "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch"
    }
}

تنظیمات فایل package.json پس از افزودن کدهای فوق به شکل زیر خواهد بود:

{
  "name": "tailwind-first-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "dependencies": {
    "@tailwindcss/cli": "^4.3.3",
    "tailwindcss": "^4.3.3"
  }
}

حالا به جای اجرای دستور طولانی، می‌توانیم فقط بنویسیم:

npm run dev

Tailwind شروع به کار می‌کند و تغییرات فایل‌ها را زیر نظر می‌گیرد.

نکته: ترمینالی که دستور npm run dev در آن اجرا شده است باید باز بماند، زیرا حالت --watch در حال بررسی تغییرات پروژه است.

چرا از حالت Watch استفاده می‌کنیم؟

فرض کنید کلاس زیر را به HTML اضافه کنیم:

<h1 class="text-5xl font-bold">
    Tailwind CSS
</h1>

اگر Tailwind در حالت Watch اجرا شده باشد، تغییرات فایل را شناسایی می‌کند و CSS خروجی را به‌روزرسانی خواهد کرد.

بنابراین نیازی نیست بعد از هر تغییر، فرایند Build را از ابتدا اجرا کنیم.

این موضوع در زمان توسعه پروژه بسیار کاربردی است.

یک تمرین ساده

حالا بدون اینکه کد بالا را کپی کنید، سعی کنید کارت خودتان را ایجاد کنید.

برای مثال یک کارت معرفی شخصی بسازید که شامل موارد زیر باشد:

Profile Card
 ├── Name
 ├── Description
 └── Button

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

bg-white
p-6
rounded-xl
shadow-md
text-2xl
font-bold
text-gray-600
mt-4
px-5
py-2

هدف تمرین این نیست که همه کلاس‌ها را حفظ کنید.

هدف این است که متوجه شوید چگونه Utility Classها را کنار یکدیگر قرار می‌دهیم تا یک رابط کاربری ایجاد کنیم.

خطاهای رایج هنگام راه‌اندازی

هنگام شروع کار ممکن است با چند مشکل ساده مواجه شوید.

دستور npm اجرا نمی‌شود

ابتدا بررسی کنید Node.js نصب شده باشد:

node -v

سپس:

npm -v

اگر این دستورات شناخته نشدند، باید Node.js را نصب یا PATH سیستم را بررسی کنید.

تغییرات در صفحه نمایش داده نمی‌شود

اگر کلاس جدیدی اضافه کردید اما ظاهر صفحه تغییر نکرد، بررسی کنید که Tailwind CLI در حال اجرا باشد:

npm run dev

همچنین مطمئن شوید فایل CSS خروجی در HTML به درستی لینک شده است:

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

فایل output.css وجود ندارد

مطمئن شوید دستور Build را اجرا کرده‌اید:

npm run dev

یا:

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

جمع‌بندی

در این مقاله اولین پروژه Tailwind CSS خود را از صفر ایجاد کردیم. ابتدا یک پروژه Node.js ساختیم، سپس Tailwind CSS و CLI آن را نصب کردیم. بعد فایل CSS ورودی را ایجاد کردیم و با اجرای Tailwind CLI، فایل CSS خروجی را ساختیم.

در ادامه فایل CSS خروجی را به HTML متصل کردیم و اولین Utility Classهای خود را به کار بردیم. در پایان نیز یک کارت ساده ساختیم تا با نحوه ترکیب Utility Classها در یک پروژه واقعی‌تر آشنا شویم.

مهم‌ترین نکته‌ای که باید از این مقاله به خاطر داشته باشید این است که در Tailwind قرار نیست نام صدها کلاس را از ابتدا حفظ کنید. کافی است مفهوم هر Utility را یاد بگیرید و به مرور با استفاده از آن‌ها سرعت عمل پیدا کنید.