آموزش جامع Tailwind CSS - Utility-First Framework فارسی

📚معرفی و نصب

Tailwind CSS یک framework CSS با رویکرد Utility-First است. به جای نوشتن CSS سفارشی، مستقیماً از کلاس‌های آماده درون HTML استفاده می‌کنید.

مقایسه با Bootstrap

ویژگی	Bootstrap	Tailwind CSS
رویکرد	Component-based	Utility-first
انعطاف	محدود به پیش‌فرض‌ها	کاملاً آزاد
JavaScript	دارد (dropdown، modal...)	ندارد — فقط CSS
حجم production	~30KB (gzip)	~10KB (PurgeCSS)
یادگیری	آسان‌تر	کمی بیشتر

نصب

<!-- ۱. لینک CSS در <head> -->
<link rel="stylesheet" href="tailwind.min.css">

<!-- ۲. استفاده مستقیم در HTML -->
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
  دکمه آبی
</button>

▶ دمو: همین یک خط HTML

ⓘ توجه: فایل tailwind.min.css شامل همه utility classها است (~3MB). در production با ابزار PurgeCSS فقط کلاس‌های استفاده‌شده نگه می‌دارید (~10-30KB).

✏Typography و رنگ‌ها

Tailwind سیستم typography کاملی با اندازه‌های از پیش تعریف‌شده دارد. رنگ‌ها نیز با یک پالت ۹ سطحی (100 تا 900) تعریف می‌شوند.

اندازه فونت

<!-- text-{size} -->
<p class="text-xs">text-xs — 0.75rem</p>    <!-- 12px -->
<p class="text-sm">text-sm — 0.875rem</p>  <!-- 14px -->
<p class="text-base">text-base</p>          <!-- 16px پیش‌فرض -->
<p class="text-lg">text-lg</p>            <!-- 18px -->
<p class="text-xl">text-xl</p>            <!-- 20px -->
<p class="text-2xl">text-2xl</p>          <!-- 24px -->
<p class="text-4xl font-bold">text-4xl bold</p> <!-- 36px -->

▶ دمو: اندازه‌های فونت

text-xs — 0.75rem (12px) — متن بسیار کوچک

text-sm — 0.875rem (14px) — متن کوچک

text-base — 1rem (16px) — پیش‌فرض

text-lg — 1.125rem (18px)

text-xl font-semibold — 1.25rem

text-2xl font-bold — 1.5rem

text-3xl font-extrabold — 1.875rem

پالت رنگی

<!-- رنگ متن -->
<p class="text-blue-600">متن آبی</p>
<p class="text-red-500 font-bold">متن قرمز بولد</p>

<!-- رنگ پس‌زمینه -->
<div class="bg-yellow-100 text-yellow-800">زرد کم‌رنگ</div>
<div class="bg-blue-600 text-white">آبی تیره</div>

▶ دمو: پالت رنگی Tailwind

blue-500 green-500 red-500 yellow-400 purple-600 pink-500 indigo-600 orange-500 teal-500 gray-700

100

200

300

400

500

600

700

800

900

پالت blue — از 100 (روشن) تا 900 (تیره)

کلاس	توضیح
font-thin/light/normal/medium/semibold/bold/extrabold/black	وزن فونت (100 تا 900)
italic / not-italic	فونت کج
uppercase / lowercase / capitalize	حروف بزرگ/کوچک
leading-tight/normal/relaxed/loose	فاصله خطوط
tracking-tight/normal/wide/wider	فاصله حروف
text-right / text-center / text-left	تراز متن
underline / line-through / no-underline	تزئین متن

📏Spacing و Sizing

Tailwind از یک مقیاس عددی یکسان برای padding، margin، width و height استفاده می‌کند. هر عدد معادل 0.25rem × عدد است.

Padding و Margin

<!-- p = padding, m = margin -->
<div class="p-4">padding همه طرف 1rem</div>
<div class="px-6 py-3">افقی 1.5rem | عمودی 0.75rem</div>
<div class="pt-4 pb-2 pr-6 pl-3">جهت‌های مجزا</div>
<div class="mx-auto">margin افقی خودکار — مرکز</div>
<div class="mt-8 mb-4">بالا 2rem | پایین 1rem</div>
<div class="-mt-4">margin منفی (overlap)</div>

▶ دمو: مقایسه Padding

p-1
4px

p-2
8px

p-4
16px

p-6
24px

p-8
32px

p-12
48px

Width و Height

<!-- عرض ثابت -->
<div class="w-16">4rem (64px)</div>
<div class="w-32">8rem (128px)</div>
<div class="w-64">16rem (256px)</div>

<!-- عرض نسبی -->
<div class="w-1/2">50%</div>
<div class="w-2/3">66.67%</div>
<div class="w-full">100%</div>
<div class="w-screen">100vw</div>

<!-- max-width (container) -->
<div class="max-w-sm mx-auto">max 384px centered</div>
<div class="max-w-2xl mx-auto">max 672px centered</div>

کلاس	مقدار	کلاس	مقدار
p-1 / m-1	0.25rem (4px)	p-6 / m-6	1.5rem (24px)
p-2 / m-2	0.5rem (8px)	p-8 / m-8	2rem (32px)
p-3 / m-3	0.75rem (12px)	p-12 / m-12	3rem (48px)
p-4 / m-4	1rem (16px)	p-16 / m-16	4rem (64px)
p-5 / m-5	1.25rem (20px)	p-24 / m-24	6rem (96px)

📏Flexbox

Tailwind utility classهای کامل Flexbox را پوشش می‌دهد. با ترکیب flex و کلاس‌های align/justify می‌توانید هر layout دلخواهی بسازید.

<!-- ساختار پایه -->
<div class="flex gap-4">                    <!-- ردیف با فاصله 1rem -->
<div class="flex flex-col gap-3">          <!-- ستون -->
<div class="flex justify-between">        <!-- فاصله یکسان -->
<div class="flex items-center">           <!-- وسط عمودی -->
<div class="flex justify-center items-center"> <!-- کاملاً مرکز -->
<div class="flex flex-wrap">             <!-- wrap در خط جدید -->
<div class="flex-1">                        <!-- فرزند — پر کردن فضا -->

▶ دمو: حالت‌های مختلف justify

justify-start

A

B

C

justify-center

A

B

C

justify-between

A

B

C

justify-end

A

B

C

▶ دمو: align-items و flex-1

tall

short

medium

← items-center

flex-1

بزرگ‌تر

کلاس	معادل CSS
flex	display: flex
flex-col	flex-direction: column
flex-wrap	flex-wrap: wrap
justify-start/center/end/between/around/evenly	justify-content
items-start/center/end/stretch/baseline	align-items
flex-1	flex: 1 1 0%
flex-none	flex: none
gap-{n}	gap: n×0.25rem
order-{n}	order: n

📈Grid

Tailwind utility classهای CSS Grid را با سادگی در دسترس قرار می‌دهد. از ستون‌بندی ساده تا layout‌های پیچیده.

<!-- grid پایه -->
<div class="grid grid-cols-3 gap-4">
  <div>۱</div>  <div>۲</div>  <div>۳</div>
</div>

<!-- col-span -->
<div class="grid grid-cols-4 gap-3">
  <div class="col-span-2">نصف</div>
  <div class="col-span-1">ربع</div>
  <div class="col-span-1">ربع</div>
  <div class="col-span-full">عرض کامل</div>
</div>

<!-- grid خودکار -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">

▶ دمو: Grid 4 ستونه با col-span

col-span-2

col-1

col-span-3

col-span-full (4 ستون)

▶ دمو: Dashboard Layout — Grid ترکیبی

محتوای اصلی
col-span-2

ویجت ۱

ویجت ۲

نوار پایین — col-span-full

کلاس	معادل CSS
grid	display: grid
grid-cols-{n}	grid-template-columns: repeat(n, 1fr)
grid-rows-{n}	grid-template-rows: repeat(n, ...)
col-span-{n}	grid-column: span n / span n
col-span-full	grid-column: 1 / -1
row-span-{n}	grid-row: span n / span n
gap-{n}	gap: n×0.25rem
col-start-{n} / col-end-{n}	grid-column-start/end

🧩Components

با ترکیب utility classها می‌توانید هر component UI دلخواهی بدون CSS سفارشی بسازید.

Card

▶ دمو: انواع Card

🚀

کارت ساده

bg-white rounded-xl shadow-lg p-6

✨

کارت Gradient

bg-gradient-to-br from-purple-600 to-pink-500

+

border-2 border-dashed border-gray-300

کارت افزودن آیتم

دکمه‌ها

<!-- Primary -->
<button class="bg-blue-600 text-white px-5 py-2 rounded-lg font-semibold hover:bg-blue-700 transition">Primary</button>

<!-- Outline -->
<button class="border-2 border-blue-600 text-blue-600 px-5 py-2 rounded-lg hover:bg-blue-50 transition">Outline</button>

<!-- Icon Button -->
<button class="flex items-center gap-2 bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200">
  🔍 جستجو
</button>

▶ دمو: انواع دکمه

Badge و Alert

▶ دمو: Badge و Alert

JavaScript ✓ فعال ✗ خطا ⚠ هشدار جدید Beta

✓ عملیات با موفقیت انجام شد!

✗ خطایی رخ داده است. لطفاً دوباره تلاش کنید.

⚠ این عملیات برگشت‌پذیر نیست.

ⓘ اطلاعات بیشتر در مستندات موجود است.

Form Input

▶ دمو: Input field

نام کاربری

پیام

📱Responsive Design

Tailwind از رویکرد mobile-first استفاده می‌کند. Prefix‌های breakpoint برای آن سایز و بالاتر اعمال می‌شوند.

<!-- بدون prefix = موبایل، sm: = 640px+، md: = 768px+، lg: = 1024px+ -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">

<!-- فونت واکنشگرا -->
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">عنوان</h1>

<!-- نمایش/مخفی -->
<div class="hidden md:block">فقط تبلت و بالاتر</div>
<div class="block md:hidden">فقط موبایل</div>

<!-- padding و margin واکنشگرا -->
<div class="p-4 md:p-8 lg:p-16">

Prefix	min-width	دستگاه هدف
(بدون prefix)	0px	موبایل — پیش‌فرض
sm:	640px	موبایل بزرگ / فبلت کوچک
md:	768px	تبلت
lg:	1024px	لپ‌تاپ
xl:	1280px	دسکتاپ
2xl:	1536px	دسکتاپ بزرگ

▶ دمو: Grid واکنشگرا — 1 / 2 / 4 ستون

ستون ۱

ستون ۲

ستون ۳

ستون ۴

موبایل: ۱ ستون | sm (640px+): ۲ ستون | lg (1024px+): ۴ ستون

💡 Mobile-First: همیشه ابتدا استایل موبایل (بدون prefix) بنویسید، سپس با sm:، md: و lg: برای صفحه‌های بزرگ‌تر override کنید.

💡Hover، Focus و States

Tailwind با prefix‌هایی مثل hover:، focus:، active: و disabled: استایل‌دهی به حالت‌های مختلف را آسان می‌کند.

<!-- hover -->
<button class="bg-blue-600 hover:bg-blue-700 hover:shadow-lg">

<!-- focus -->
<input class="border focus:outline-none focus:ring-2 focus:ring-blue-500">

<!-- active -->
<button class="bg-blue-600 active:bg-blue-800 active:scale-95">

<!-- group-hover — hover روی parent، تغییر child -->
<div class="group hover:bg-blue-50">
  <p class="group-hover:text-blue-600">رنگ تغییر می‌کند</p>
</div>

<!-- disabled -->
<button class="disabled:opacity-50 disabled:cursor-not-allowed" disabled>

▶ دمو: hover و group-hover — ماوس را ببرید

group-hover

این متن هم تغییر می‌کند

Variant Prefix	کاربرد
hover:	هنگام hover ماوس
focus:	هنگام focus (input/button)
focus-within:	وقتی فرزند focus دارد
active:	هنگام کلیک
disabled:	عنصر disabled
group-hover:	hover روی parent (نیاز به class="group")
first: / last:	اولین/آخرین فرزند
odd: / even:	ردیف‌های فرد/زوج

🎬Transitions و Animations

Tailwind classهای آماده‌ای برای transition، transform و animation دارد. کافیست آن‌ها را ترکیب کنید.

<!-- transition پایه -->
<button class="transition">          <!-- transition: all 150ms -->
<button class="transition-colors"> <!-- فقط رنگ -->
<button class="transition-all duration-300 ease-in-out">

<!-- transform -->
<div class="hover:scale-110 transition-transform">  <!-- بزرگ‌تر -->
<div class="hover:-translate-y-2 transition-transform"> <!-- بالا -->
<div class="hover:rotate-180 transition-transform">    <!-- چرخش -->

<!-- animations پیش‌ساخته -->
<div class="animate-spin">         <!-- چرخش دائم -->
<div class="animate-ping">         <!-- Notification pulse -->
<div class="animate-bounce">       <!-- جهش -->
<div class="animate-pulse">        <!-- Skeleton loader -->

▶ دمو: Transitions و Transforms — hover کنید

hover:scale-110

hover:-translate-y

hover:rotate-12

shadow + translate

border color

▶ دمو: Animations پیش‌ساخته

animate-spin

animate-ping

👇

animate-bounce

animate-pulse (skeleton)

کلاس	توضیح
transition / transition-all	transition روی همه property
transition-colors	فقط رنگ
transition-transform	فقط transform
duration-150/300/500/700/1000	مدت (ms)
ease-linear/in/out/in-out	timing function
scale-50/75/90/95/100/105/110/125/150	بزرگ/کوچک کردن
translate-x-{n} / -translate-y-{n}	جابجایی
rotate-{n}	چرخش درجه
skew-x-{n} / skew-y-{n}	کج‌شدن

🔥Dark Mode و چیت‌شیت

Dark Mode Toggle — نمونه عملی

▶ دمو: تغییر حالت روشن/تاریک

کارت نمونه

این کارت بین حالت روشن و تاریک سوئیچ می‌کند.

Tailwind Dark Mode

/* در tailwind.config.js — فعال‌سازی dark mode */
module.exports = {
  darkMode: 'class',  // یا 'media' برای سیستم‌عامل
}

/* HTML — استفاده از dark: prefix */
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
  <p class="text-gray-600 dark:text-gray-300">متن</p>
</div>

/* Toggle با JavaScript */
document.documentElement.classList.toggle('dark');

📄 چیت‌شیت سریع

دسته‌بندی	کلاس‌های کلیدی
رنگ متن	text-{color}-{shade} مثلاً text-blue-600
رنگ پس‌زمینه	bg-{color}-{shade} مثلاً bg-green-100
Padding	p-4 / px-6 py-3 / pt-4 pb-2
Margin	m-4 / mx-auto / mt-8 mb-4 / -mt-4
Flexbox	flex flex-col justify-center items-center gap-4
Grid	grid grid-cols-3 col-span-2 gap-4
اندازه	w-full h-16 max-w-lg min-h-screen
Border	border border-gray-300 rounded-xl ring-2
Shadow	shadow / shadow-md / shadow-xl / shadow-none
Opacity	opacity-0/25/50/75/100
Responsive	sm: md: lg: xl: 2xl: prefix
States	hover: focus: active: disabled: group-hover:
Transition	transition duration-300 ease-in-out
Transform	scale-105 rotate-12 translate-x-4 skew-y-3
Animation	animate-spin animate-pulse animate-bounce animate-ping

💡 بهترین روش: از @apply در فایل CSS برای ترکیب کلاس‌های تکراری استفاده کنید:

/* در styles.css */
.btn-primary {
  @apply bg-blue-600 text-white px-5 py-2 rounded-lg font-semibold hover:bg-blue-700 transition;
}

⚠ Production: فایل tailwind.min.css کامل حدود ~3MB است. در production حتماً PurgeCSS یا JIT Mode را فعال کنید تا فقط کلاس‌های استفاده‌شده باقی بمانند (~10-30KB).

🚀زمین بازی کد (Playground)

با کلاس‌های utility تِیل‌ویند طراحی کن و نتیجه را زنده ببین. کلاس‌ها را در تب HTML تغییر بده و ▶ اجرا را بزن. نسخهٔ ۲.۲.۱۹ آفلاین بارگذاری می‌شود.