Tailwind CSS یک فریم‌ورک utility-first برای CSS است. این فریم‌ورک با سایر فریم‌ورک‌های CSS مانند Bootstrap یا Foundation متفاوت است زیرا یک UI kit نمی‌باشد. فریم‌ورک tailwind CSS کامپوننت‌های از پیش ساخته شده مانند buttonها، cardها و غیره ندارد. در عوض، کلاس‌های utility سطح پایینی را ارائه می‌کند که به ما این امکان را می‌دهد تا بتوانیم طرح‌های کاملاً سفارشی خود را، بدون این که نیاز باشد فایل HTML را ترک کنیم، بسازیم. همین ویژگی به ما کمک می‌کند تا بتوانیم طرح‌هایی را بسازیم که منحصربه‌فرد برای پروژه ما هستند.

در این مقاله قصد داریم تا یک پروژه Tailwind CSS را از ابتدا راه‌اندازی کنیم. این یک الگوی اولیه است که می‌توانیم برای هر پروژه‌ای از آن استفاده کنیم.

چندین روش برای شروع استفاده از Tailwind وجود دارد که عبارتند از:

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

ساخت یک پروژه

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

npm init -y

با این کار یک فایل package.json برای ما ایجاد می‌شود. پس از آن، باید Tailwind را نصب کنیم. به همین منظور، دستور زیر را اجرا می‌کنیم:

npm install -D tailwindcss

ما Tailwind را به عنوان یک dev dependency نصب کردیم، زیرا می‌خواهیم از آن برای ساخت فایل CSS خود استفاده نماییم.

سپس، باید یک فایل tailwind.config.js بسازیم. اینجاست که ما Tailwind CSS را پیکربندی می‌کنیم. برای این کار، دستور زیر را اجرا می‌کنیم:

npx tailwindcss init

پیکربندی مسیرهای Template

فایل tailwind.config.js خود را باز کرده و کد زیر را به آن اضافه می‌نماییم:

module.exports = {
  content: ['./*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

این کد به Tailwind می‌گوید که کجا به دنبال فایل‌های HTML ما بگردد. در این مورد، به آن می‌گوییم که هر فایل HTML را در دایرکتوری root جستجو کند. اگر فایل‌های HTML را در دایرکتوری دیگری داریم، می‌توانیم آن را برای مطابقت با تنظیمات خود تغییر دهیم.

وارد کردن CSS

در مرحله بعد، باید یک فایل CSS ایجاد کنیم که ورودی Tailwind باشد. یک فایل به نام src/input.css ایجاد کرده و دستورات زیر را در آن قرار می‌دهیم:

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

این کد به Tailwind می‌گوید که استایل‌ها، کامپوننت‌ها و utilityها را به فایل CSS ما اضافه کند.

اسکریپت‌های NPM

ما قصد داریم از Tailwind CLI برای ساخت فایل CSS خود استفاده کنیم. فایل package.json خود را باز کرده و اسکریپت‌های زیر را به آن اضافه می‌نماییم:

"scripts": {
   "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch",
   "build": "tailwindcss -i ./input.css -o ./css/style.css"
 },

اسکریپت watch فایل input.css را که فایل Tailwind CSS ما است، تماشا می‌کند و هر زمان که تغییراتی در پروژه ایجاد می‌کنیم، آن را build می‌کند. اسکریپت build یک بار فایل CSS ما را می‌سازد. وقتی که در حال توسعه پروژه خود هستیم، می‌خواهیم اسکریپت watch را اجرا کنیم. برای این که production را build کنیم لازم است که اسکریپت build را اجرا نماییم. سپس خروجی در فایل css/style.css ذخیره خواهد شد. البته در صورت تمایل می‌توانیم از اسم‌های دیگری برای نام‌گذاری فایل‌ها استفاده کنیم. ما مجبور نیستیم که پوشه css یا فایل style.css را بسازیم زیرا آن‌ها به صورت خودکار هنگام اجرای اسکریپت‌ها ایجاد می‌شوند.

فایل HTML

اکنون باید یک فایل HTML بسازیم تا تنظیمات خود را در آن آزمایش کنیم. یک فایل به نام index.html ایجاد کرده و کد زیر را به آن اضافه می‌نماییم:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Simple Tailwind Starter</title>
  </head>
  <body>
    <h1 class="text-4xl mb-4">Welcome</h1>
    <p>Start building your Tailwind project</p>
  </body>
</html>

باید به این نکته توجه داشته باشیم که ما از فایل css/style.css که در مرحله قبل ایجاد کردیم، استفاده می‌کنیم.

اکنون آماده شروع ساخت پروژه Tailwind خود هستیم. دستور زیر را برای راه‌اندازی سرور توسعه اجرا می‌کنیم:

npm run watch

این دستور باید فایل css/style.css ما را ایجاد کند. حالا index.html خود را باز می‌کنیم. پیشنهاد می‌شود که از VS Code با Live Server استفاده نماییم، زیرا با ایجاد تغییرات، مرورگر ما به‌طور خودکار لود می‌شود و ما می‌توانیم تغییرات را مشاهده کنیم.

برای متوقف کردن سرور توسعه Tailwind خود،C + CTRL را در ترمینال فشار می‌دهیم.

افزودن فایل .gitignore

اگر از Git استفاده می‌کنیم، در این بخش قصد داریم تا یک فایل .gitignore را به پروژه خود اضافه نماییم. این کار از اضافه شدن پوشه node_modules به repository ما جلوگیری می‌کند. یک فایل به نام .gitignore می‌سازیم و کد زیر را اضافه می‌کنیم:

node_modules

اکنون می‌توانیم Git repository خود را مقداردهی اولیه کنیم و پروژه خود را به GitHub اضافه نماییم و به سادگی آن را clone کرده و npm install را اجرا کنیم تا dependencyهای خود را هر زمان که می‌خواهیم یک پروژه جدید شروع کنیم، نصب نماییم.