توسعه فرانت‌اند

چیت‌شیت Tailwind CSS

راهنمای utilityها، breakpoints، stateها و توکن‌های طراحی برای ساخت رابط منسجم. Tailwind CSS 3 utilityهای کوچک را مستقیم روی markup ترکیب می‌کند. breakpoint prefixها mobile-first هستند و از عرض breakpoint به بالا اعمال می‌شوند. از مقیاس توکن‌ها برای فاصله و رنگ استفاده کنید تا رابط یکنواخت بماند؛ مقدار arbitrary را فقط برای استثنای واقعی نگه دارید. از این صفحه به‌عنوان مرجع سریع استفاده کنید و مثال‌ها و نکته‌ها را با نسخهٔ ابزار، نیاز و شرایط واقعی پروژهٔ خود تطبیق دهید.

NOVIN SKILLS / DIGITAL STUDIO

Flex و Grid

چیدمان را با utilityهای layout و فاصلهٔ مشخص تعریف کنید.

1<div class="flex items-center justify-between gap-4">2  <span>عنوان</span>3  <button>بازکردن</button>4</div>56<div class="grid grid-cols-1 gap-4 md:grid-cols-2">7  ...8</div>

Width و max-width

عرض سیال را با محدودیت حداکثر برای خوانایی ترکیب کنید.

1<main class="mx-auto w-full max-w-5xl px-4">2  محتوا3</main>

Position و overflow

والد containing block و رفتار overflow را آگاهانه مشخص کنید.

1<div class="relative overflow-hidden rounded-xl">2  <span class="absolute right-3 top-3">Badge</span>3</div>

Margin، padding و gap

utilityهای منطقی را در رابط چندجهته ترجیح دهید.

1p-4    padding2mt-2   margin top3ms-3   margin-inline-start4gap-4  spacing between children

Background و متن

رنگ متن و پس‌زمینه را با کنتراست مناسب جفت کنید.

1<article class="rounded-xl bg-white p-6 text-slate-900 shadow">2  <h2 class="text-xl font-bold">عنوان</h2>3  <p class="mt-2 text-sm text-slate-600">توضیح</p>4</article>

Typography و truncate

line-height، اندازه و محدودکردن متن را آگاهانه تنظیم کنید.

1<p class="text-base leading-7">2  متن خوانا3</p>4<p class="truncate">متن بلند در یک خط</p>

Responsive breakpoint

در مثال، دو ستون از md به بالا فعال می‌شود.

1<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">2  ...3</div>

Hover، focus و disabled

حالت صفحه‌کلید را کنار hover تعریف کنید.

1<button class="rounded-lg bg-emerald-700 px-4 py-2 text-white2  hover:bg-emerald-800 focus-visible:outline-23  focus-visible:outline-offset-2 disabled:opacity-50">4  ثبت5</button>

Dark mode

dark variant را با strategy پیکربندی‌شدهٔ پروژه هماهنگ کنید.

1<section class="bg-white text-slate-9002  dark:bg-slate-900 dark:text-white">3  محتوا4</section>

RTL و reduced motion

جهت منطقی و ترجیح کاهش حرکت را در رابط پوشش دهید.

1<div dir="rtl" class="text-start">2  متن راست‌به‌چپ3</div>45<div class="motion-reduce:transition-none">...</div>

پیکربندی content

مسیر فایل‌های template را در پیکربندی نسخهٔ 3 ثبت کنید.

1/** @type {import('tailwindcss').Config} */2export default {3  content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],4  theme: { extend: {} },5  plugins: [],6};

Class شرطی و safelist

کلاس‌های ممکن را کامل بنویسید یا مجموعهٔ محدود را safelist کنید.

1const toneClasses = {2  success: "bg-green-700",3  warning: "bg-amber-600",4  error: "bg-red-700",5};

CSS directiveها در v3

دستورهای اصلی build را با نسخهٔ نصب‌شده هماهنگ کنید.

1@tailwind base;2@tailwind components;3@tailwind utilities;

برای استفاده در پروژه

نکات کلیدی

۱
ویژگی‌های پایه را با utilityهای خوانا مثل flex، gap-4 و rounded-xl ترکیب کنید.
۲
طراحی mobile-first است؛ breakpoint را برای تغییر واقعی چیدمان اضافه کنید.
۳
حالت‌ها را با variantهایی مثل hover:، focus-visible: و disabled: تعریف کنید.
۴
برای RTL از utilityهای منطقی مانند ms-* و text-start استفاده کنید.
۵
رنگ، فاصله و radius را تا حد ممکن از توکن‌های پیکربندی‌شده بگیرید.
۶
کلاس‌های شرطی را با helper پروژه ترکیب و تعارض utilityها را کنترل کنید.
۷
برای تکرار زیاد، کامپوننت مشترک بسازید؛ رشته‌های طولانی کلاس را کپی نکنید.
۸
محتوای پویا را داخل ساخت رشته‌ای کلاس نگذارید مگر پیکربندی آن را پوشش دهد.
۹
کنتراست، focus و حالت‌های تعاملی را در تم روشن و تیره بررسی کنید.
۱۰
پس از تغییر پیکربندی، خروجی build و حذف کلاس‌های استفاده‌شده را بازبینی کنید.
۱۱
این نمونه‌ها بر Tailwind CSS 3 متکی‌اند؛ ساختار config و دستورهای CSS را با نسخهٔ نصب‌شده تطبیق دهید، چون نسخهٔ 4 تفاوت‌های مهم دارد.
۱۲
کلاس‌های پویا را از فهرست کلاس‌های کامل انتخاب کنید یا safelist محدود بنویسید تا ابزار build بتواند آن‌ها را پیدا کند.
۱۳
در Tailwind 3.4، classهای پویا را کامل و قابل اسکن بنویسید یا safelist را تنظیم کنید؛ ساختن نام کلاس در runtime قابل کشف نیست.
۱۴
توکن‌ها و افزونه‌ها را در tailwind.config تعریف کنید و قبل از استفاده از APIهای v4، تفاوت نسخه را بررسی کنید.