Tailwind CSS چیست؟ راهنمای ساده برای سازندگان اپ

Tailwind CSS یک ابزار برای استایل‌دهی به وب‌سایت‌هاست. به جای نوشتن قوانین استایل جدا در یک فایل مستقل، به هر عنصر نام کلاس‌های کوتاه و آماده می‌دهید — bg-white برای پس‌زمینه‌ی سفید، p-4 برای فاصله‌ی داخلی، text-lg برای متن بزرگ‌تر، rounded-xl برای گوشه‌های گرد — و Tailwind CSSی را که مرورگر لازم دارد تولید می‌کند. این ابزار رایگان و متن‌باز است و یکی از رایج‌ترین روش‌های استایل‌دهی اپ‌های وب مدرن است.

چرا وقتی با هوش مصنوعی می‌سازید Tailwind مهم است

اگر یک اپ وب را با یک سازنده‌ی اپ مبتنی بر هوش مصنوعی می‌سازید، احتمال زیادی وجود دارد که اپ‌تان با Tailwind استایل داده شده باشد. برای مثال، Mythex پروژه‌های جدید را روی Vite + React + TypeScript + Tailwind شروع می‌کند، مگر اینکه چیز دیگری بخواهید (نحوه‌ی انتخاب فناوری).

این موضوع به سه شکل به شما مربوط است:

• تغییر طراحی ارزان است. چون استایل دقیقاً کنار هر دکمه، کارت و عنوان قرار دارد، هوش مصنوعی می‌تواند با ویرایش چند نام کلاس در یک جا، درخواست «کارت‌ها را کمتر شلوغ کن» را انجام دهد.
• می‌توانید آن را بخوانید. کلاس‌های Tailwind به انگلیسی ساده نزدیک‌اند. text-center font-bold text-2xl رمزگشایی سختی ندارد، حتی اگر هرگز کد ننوشته باشید.
• ظاهر یکدست می‌ماند. Tailwind یک مقیاس ثابت از اندازه‌ها، فاصله‌ها و رنگ‌ها دارد. این مانع می‌شود اپ به ۱۴ خاکستری کمی متفاوت برسد.

یک تشبیه روزمره

رنگ‌کاری خانه را تصور کنید.

CSS ساده مثل این است که برای هر دیوار رنگ خودتان را مخلوط کنید. آزادی کامل دارید، اما بعد از مدتی اتاق نشیمن «سفید گرم» است، راهرو «سفید کمی گرم‌تر» و کسی یادش نیست چرا.

Tailwind مثل جدول رنگ یک رنگ‌فروشی به‌همراه برچسب‌های نام‌دار است. هر دیوار یک برچسب دارد — «سفید، مات، دو لایه» — و جدول فقط مجموعه‌ای منتخب از رنگ‌ها را ارائه می‌دهد. کمی آزادی از دست می‌دهید، اما همه‌ی افراد روی کار فقط با خواندن برچسب دقیقاً می‌دانند هر دیوار باید چطور باشد.

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

یک صفحه‌ی وب از HTML (محتوا و ساختار) و CSS (ظاهر) ساخته می‌شود. معمولاً CSS در یک فایل جدا با قوانینی مثل این نوشته می‌شود:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

با Tailwind آن قانون را نمی‌نویسید و کلاس‌های utility را مستقیم روی عنصر قرار می‌دهید:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

هر کلاس یک کار کوچک انجام می‌دهد. وقتی اپ ساخته می‌شود، Tailwind فایل‌های شما را می‌خواند، کلاس‌هایی را که واقعاً استفاده کرده‌اید پیدا می‌کند و فقط CSS همان‌ها را تولید می‌کند. این باعث می‌شود استایل‌شیت نهایی کوچک بماند.

نسخه‌ی ۴ Tailwind، نسخه‌ی اصلی فعلی، با پیکربندی بسیار کم راه‌اندازی می‌شود: آن را نصب می‌کنید، افزونه‌اش را به ابزار build اضافه می‌کنید و @import "tailwindcss"; را بالای فایل CSS قرار می‌دهید. سفارشی‌سازی‌هایی مثل رنگ‌های برند و فونت‌ها به‌صورت توکن طراحی در خود CSS تعریف می‌شوند، نه در یک فایل پیکربندی بزرگ JavaScript مثل نسخه‌های قدیمی‌تر. اگر آموزش قدیمی‌ای با tailwind.config.js دیدید، به همین دلیل است.

یک مثال کامل: یک کارت قیمت

فرض کنید از سازنده‌ی هوش مصنوعی‌تان صفحه‌ی قیمت خواسته‌اید و می‌خواهید کارت «Pro» به چشم بیاید. کد کارت ممکن است این شکل باشد (در یک کامپوننت React، class به‌صورت className نوشته می‌شود):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

از چپ به راست بخوانیدش:

اگر بگویید «کارت Pro را با حاشیه‌ی آبی و سایه‌ی ملایم برجسته کن»، هوش مصنوعی ممکن است border-gray-200 را به border-2 border-blue-600 تغییر دهد و shadow-lg اضافه کند. کل تغییر همین است.

طراحی واکنش‌گرا و حالت تاریک

Tailwind پیشوندهای کوتاهی برای اندازه‌ی صفحه و حالت‌ها دارد:

• md:grid-cols-3 — سه ستون در صفحه‌نمایش‌های متوسط و بزرگ‌تر؛ روی گوشی، ستون تکی پیش‌فرض اعمال می‌شود. Tailwind اول موبایل است: کلاس‌های بدون پیشوند همه‌جا اعمال می‌شوند و پیشوندها تغییرات را برای صفحه‌نمایش‌های بزرگ‌تر اضافه می‌کنند.
• hover:bg-gray-700 — دکمه‌ای تیره‌تر وقتی ماوس روی آن است.
• dark:bg-gray-900 — پس‌زمینه‌ی متفاوت وقتی حالت تاریک روشن است.

به همین دلیل، درخواست چیدمان واکنش‌گرای موبایل یا حالت تاریک معمولاً در یک پروژه‌ی Tailwind سریع انجام می‌شود.

اصطلاحات کلیدی

باورهای غلط رایج

• «Tailwind یک طراحی است.» نیست. Tailwind بلوک‌های سازنده می‌دهد، نه یک ظاهر. دو سایت Tailwind می‌توانند کاملاً متفاوت به نظر برسند. ظاهر کلی «اپ هوش مصنوعی» از پیش‌فرض‌ها می‌آید، نه از خود Tailwind — به سازنده‌تان جهت واقعی بدهید. طراحی یک اپ خوش‌ظاهر با هوش مصنوعی را ببینید.
• «این همان استایل‌های inline است.» دقیقاً نه. کلاس‌ها از یک مقیاس مشترک می‌آیند، از hover، حالت تاریک و breakpointها پشتیبانی می‌کنند، و در زمان build به CSS معمولی تبدیل می‌شوند.
• «Tailwind صفحات را سنگین می‌کند.» build فقط کلاس‌هایی را که استفاده می‌کنید در بر می‌گیرد، پس CSSی که به بازدیدکننده می‌رسد معمولاً کوچک است.
• «فهرست طولانی کلاس یعنی کد نامرتب.» در ابتدا شلوغ به نظر می‌رسند، اما همه‌چیز درباره‌ی ظاهر یک عنصر در یک جا است. الگوهای تکراری معمولاً در کامپوننت‌ها جمع می‌شوند، مثلاً یک Button واحد.
• «اگر Tailwind استفاده کنم نمی‌توانم CSS سفارشی بنویسم.» هر زمان لازم باشد همچنان می‌توانید CSS معمولی بنویسید.

از سازنده‌ی هوش مصنوعی‌تان چه بخواهید

• «رنگ‌های برند و فونت‌هایمان را یک بار به‌عنوان توکن‌های تم تعریف کن و همه‌جا به‌جای رنگ‌های ثابت در کد از آن‌ها استفاده کن.»
• «هر کارت، دکمه و ورودی را گوشه‌ی گرد و فاصله‌ی یکسان بده.»
• «چیدمان را در عرض موبایل بررسی کن و هر چیزی را که بیرون می‌زند یا برای لمس خیلی کوچک است، درست کن.»
• «حالت تاریک را با متغیر dark: در Tailwind اضافه کن و مطمئن شو کنتراست متن خوانا بماند.»
• «استایل‌های تکراری دکمه‌ها را در یک کامپوننت Button قابل‌استفاده‌ی مجدد جمع کن.»
• «کلاس‌های Tailwind این بخش را به انگلیسی ساده توضیح بده.»

Tailwind در Mythex

پروژه‌های جدید Mythex به‌صورت پیش‌فرض با Tailwind به همراه React و TypeScript کار می‌کنند، بنابراین می‌توانید تغییرات بصری را با کلمات ساده درخواست کنید و نتیجه را در Preview زنده ببینید. اگر کد را ترجیح می‌دهید، ویرایشگر کد همه‌ی کلاس‌ها را نشان می‌دهد (در نسخه‌ی Free فقط خواندنی، در Pro قابل ویرایش). اگر CSS ساده یا راه‌اندازی دیگری ترجیح می‌دهید، این را در اولین پرامپت بگویید — مستندات توضیح می‌دهند پشته‌ی فناوری چطور انتخاب می‌شود.

پرسش‌ها