پروژه نهایی: ساخت یک صفحه وب کامل با Tailwind CSS
بهنام نوبخت · ۱۴۰۵/۷/۱۳
در مقالههای قبلی دوره Tailwind CSS از مفاهیم پایه مانند رنگها، Typography، Spacing و Borderها شروع کردیم و سپس به Flexbox، Grid، Position، Responsive Design، Hover و Focus، Transition و Animation، Dark Mode و در نهایت Componentهای قابل استفاده مجدد رسیدیم. در این مقاله قصد داریم همه این مفاهیم را در قالب یک پروژه عملی و واقعی کنار هم قرار دهیم. پروژه ما یک صفحه معرفی محصول و فروشگاه ساده است که شامل Header، Hero، دستهبندیها، کارتهای محصول، بخش ویژگیها، Call To Action و Footer خواهد بود. در طول ساخت پروژه، علاوه بر طراحی ظاهری، روی Responsive بودن صفحه، Dark Mode، States، Transition، Grid، Flexbox و ساختار قابل نگهداری کد نیز تمرکز میکنیم.
پروژهای که میسازیم
صفحه نهایی ما تقریباً چنین ساختاری خواهد داشت:
Website
│
├── Header
│ ├── Logo
│ ├── Navigation
│ └── Menu Button
│
├── Hero
│ ├── Title
│ ├── Description
│ └── CTA Buttons
│
├── Categories
│
├── Products
│ └── Product Cards
│
├── Features
│
├── CTA
│
└── Footerهدف این پروژه فقط ساخت یک صفحه زیبا نیست.
میخواهیم ببینیم چگونه میتوانیم ابزارهایی را که در طول دوره یاد گرفتیم، در یک پروژه واقعی استفاده کنیم.
مرحله اول — ساختار اولیه HTML
ابتدا فایل 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>فروشگاه مدرن</title>
<link rel="stylesheet" href="./src/output.css">
</head>
<body class="bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-white">
</body>
</html>در اینجا چند نکته مهم داریم.
dir="rtl"
چون محتوای پروژه فارسی است، جهت صفحه را RTL قرار دادهایم:
<html lang="fa" dir="rtl">Responsive Viewport
این Meta Tag برای نمایش صحیح صفحه در دستگاههای مختلف ضروری است:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>Dark Mode
در Body دو حالت تعریف کردهایم:
class="
bg-gray-50
text-gray-900
dark:bg-gray-950
dark:text-white
"در حالت عادی:
Background → Gray
Text → Darkو در Dark Mode:
Background → Dark
Text → Whiteمرحله دوم — ساخت Header
Header یکی از مهمترین قسمتهای هر سایت است.
<header
class="border-b border-gray-200
bg-white
dark:border-gray-800
dark:bg-gray-900"
>
<div
class="container mx-auto
flex items-center justify-between
px-4 py-4"
>
<a
href="#"
class="text-xl font-bold text-blue-600"
>
فروشگاه
</a>
<nav class="hidden items-center gap-6 md:flex">
<a
href="#"
class="text-gray-700
transition-colors
hover:text-blue-600
dark:text-gray-300
dark:hover:text-blue-400"
>
خانه
</a>
<a
href="#products"
class="text-gray-700
transition-colors
hover:text-blue-600
dark:text-gray-300
dark:hover:text-blue-400"
>
محصولات
</a>
<a
href="#features"
class="text-gray-700
transition-colors
hover:text-blue-600
dark:text-gray-300
dark:hover:text-blue-400"
>
ویژگیها
</a>
</nav>
<button
class="rounded-lg
bg-blue-600
px-4 py-2
font-medium
text-white
transition-colors
hover:bg-blue-700"
>
ورود
</button>
</div>
</header>بررسی Header
در این بخش چند مفهوم مهم Tailwind را همزمان استفاده کردهایم.
Container
container mx-autoمحتوا را در یک عرض مناسب قرار میدهد.
Flexbox
flex
items-center
justify-betweenبرای قرار دادن Logo، Navigation و Button در کنار یکدیگر استفاده شده است.
Responsive Display
hidden md:flexیعنی Navigation در صفحه کوچک مخفی باشد و از اندازه md به بعد نمایش داده شود.
Hover
hover:text-blue-600رنگ لینک هنگام Hover تغییر میکند.
مرحله سوم — ساخت Hero
اکنون بخش اصلی صفحه را ایجاد میکنیم.
<section
class="relative overflow-hidden
bg-white
dark:bg-gray-950"
>
<div
class="container mx-auto
px-4 py-20
md:py-28"
>
<div class="mx-auto max-w-3xl text-center">
<span
class="inline-block
rounded-full
bg-blue-100
px-4 py-2
text-sm
font-medium
text-blue-700
dark:bg-blue-950
dark:text-blue-300"
>
فروشگاه آنلاین مدرن
</span>
<h1
class="mt-6
text-4xl
font-bold
leading-tight
md:text-5xl
lg:text-6xl"
>
محصولات مورد نیاز خود را
<span class="text-blue-600">
سادهتر پیدا کنید
</span>
</h1>
<p
class="mx-auto mt-6
max-w-2xl
text-lg
leading-8
text-gray-600
dark:text-gray-400"
>
مجموعهای از محصولات باکیفیت را در یک محیط
ساده، سریع و مدرن مشاهده و انتخاب کنید.
</p>
<div
class="mt-8
flex flex-col
justify-center
gap-4
sm:flex-row"
>
<a
href="#products"
class="rounded-lg
bg-blue-600
px-6 py-3
font-semibold
text-white
transition-all
hover:-translate-y-1
hover:bg-blue-700
hover:shadow-lg"
>
مشاهده محصولات
</a>
<a
href="#features"
class="rounded-lg
border
border-gray-300
px-6 py-3
font-semibold
transition-colors
hover:bg-gray-100
dark:border-gray-700
dark:hover:bg-gray-800"
>
درباره ما
</a>
</div>
</div>
</div>
</section>در Hero چند مفهوم مختلف را ترکیب کردهایم.
Responsive Typography
+
Flexbox
+
Spacing
+
Hover
+
Transition
+
Dark ModeResponsive Typography
عنوان در اندازههای مختلف تغییر میکند:
text-4xl
md:text-5xl
lg:text-6xlیعنی در موبایل کوچکتر و در نمایشگرهای بزرگتر، بزرگتر خواهد بود.
مرحله چهارم — دستهبندیها
اکنون بخش دستهبندیها را ایجاد میکنیم.
<section class="bg-gray-50 py-16 dark:bg-gray-900">
<div class="container mx-auto px-4">
<div class="mb-10 text-center">
<h2 class="text-3xl font-bold">
دستهبندی محصولات
</h2>
<p class="mt-3 text-gray-600 dark:text-gray-400">
دستهبندی مورد نظر خود را انتخاب کنید.
</p>
</div>
<div
class="grid
grid-cols-2
gap-4
md:grid-cols-4"
>
<a
href="#"
class="rounded-xl
border
border-gray-200
bg-white
p-6
text-center
transition-all
hover:-translate-y-1
hover:shadow-lg
dark:border-gray-800
dark:bg-gray-950"
>
<div class="text-3xl">
💻
</div>
<h3 class="mt-4 font-bold">
لپتاپ
</h3>
</a>
<a
href="#"
class="rounded-xl
border
border-gray-200
bg-white
p-6
text-center
transition-all
hover:-translate-y-1
hover:shadow-lg
dark:border-gray-800
dark:bg-gray-950"
>
<div class="text-3xl">
📱
</div>
<h3 class="mt-4 font-bold">
موبایل
</h3>
</a>
<a
href="#"
class="rounded-xl
border
border-gray-200
bg-white
p-6
text-center
transition-all
hover:-translate-y-1
hover:shadow-lg
dark:border-gray-800
dark:bg-gray-950"
>
<div class="text-3xl">
🎧
</div>
<h3 class="mt-4 font-bold">
لوازم جانبی
</h3>
</a>
<a
href="#"
class="rounded-xl
border
border-gray-200
bg-white
p-6
text-center
transition-all
hover:-translate-y-1
hover:shadow-lg
dark:border-gray-800
dark:bg-gray-950"
>
<div class="text-3xl">
⌚
</div>
<h3 class="mt-4 font-bold">
ساعت هوشمند
</h3>
</a>
</div>
</div>
</section>در این قسمت از Grid استفاده کردهایم:
grid-cols-2
md:grid-cols-4بنابراین:
Mobile
┌──────┬──────┐
│ │ │
├──────┼──────┤
│ │ │
└──────┴──────┘
Desktop
┌────┬────┬────┬────┐
│ │ │ │ │
└────┴────┴────┴────┘مرحله پنجم — Product Grid
اکنون بخش اصلی فروشگاه را ایجاد میکنیم.
<section
id="products"
class="bg-white py-20 dark:bg-gray-950"
>
<div class="container mx-auto px-4">
<div
class="mb-10
flex flex-col
gap-4
md:flex-row
md:items-end
md:justify-between"
>
<div>
<h2 class="text-3xl font-bold">
محصولات جدید
</h2>
<p class="mt-3 text-gray-600 dark:text-gray-400">
جدیدترین محصولات فروشگاه
</p>
</div>
<a
href="#"
class="font-semibold text-blue-600
hover:text-blue-700"
>
مشاهده همه
</a>
</div>
<div
class="grid
grid-cols-1
gap-6
sm:grid-cols-2
lg:grid-cols-3"
>
<!-- Product Card -->
<article
class="group overflow-hidden
rounded-2xl
border
border-gray-200
bg-white
shadow-sm
transition-all
duration-300
hover:-translate-y-1
hover:shadow-xl
dark:border-gray-800
dark:bg-gray-900"
>
<div class="overflow-hidden">
<img
src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853"
alt="Laptop"
class="h-64 w-full
object-cover
transition-transform
duration-500
group-hover:scale-105"
>
</div>
<div class="p-6">
<span
class="rounded-full
bg-green-100
px-3 py-1
text-xs
font-medium
text-green-700
dark:bg-green-950
dark:text-green-300"
>
موجود
</span>
<h3 class="mt-4 text-xl font-bold">
لپتاپ حرفهای
</h3>
<p
class="mt-3
text-gray-600
dark:text-gray-400"
>
لپتاپ قدرتمند برای کارهای روزمره
و حرفهای.
</p>
<div
class="mt-6
flex items-center
justify-between"
>
<span class="text-xl font-bold">
۴۵,۰۰۰,۰۰۰ تومان
</span>
<button
class="rounded-lg
bg-blue-600
px-4 py-2
font-medium
text-white
transition-colors
hover:bg-blue-700"
>
خرید
</button>
</div>
</div>
</article>
</div>
</div>
</section>نکته مهم درباره Product Card
در این Component چند تکنیک مهم را کنار هم قرار دادهایم.
Group
روی Card نوشتهایم:
groupو روی Image:
group-hover:scale-105بنابراین وقتی کاربر روی Card قرار میگیرد، تصویر نیز تغییر میکند.
Transform
group-hover:scale-105تصویر کمی بزرگ میشود.
Transition
transition-transform
duration-500تغییر اندازه به صورت نرم انجام میشود.
ایجاد چند Product Card
حالا میتوانیم Card را تکرار کنیم.
در یک پروژه واقعی بهتر است این بخش را به یک Reusable Component تبدیل کنیم؛ اما برای درک ساختار نهایی HTML میتوانیم چند Card داشته باشیم.
مثلاً:
<div
class="grid
grid-cols-1
gap-6
sm:grid-cols-2
lg:grid-cols-3"
>
<article class="...">
Product 1
</article>
<article class="...">
Product 2
</article>
<article class="...">
Product 3
</article>
</div>در React، Angular، Vue، Razor یا سایر سیستمهای Component-based، همین Card میتواند به یک Component تبدیل شود.
مرحله ششم — Features
اکنون ویژگیهای سایت را نمایش میدهیم.
<section
id="features"
class="bg-gray-50 py-20 dark:bg-gray-900"
>
<div class="container mx-auto px-4">
<div class="mx-auto mb-12 max-w-2xl text-center">
<h2 class="text-3xl font-bold">
چرا این فروشگاه؟
</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400">
تجربهای ساده و سریع برای خرید آنلاین.
</p>
</div>
<div
class="grid
grid-cols-1
gap-6
md:grid-cols-3"
>
<div
class="rounded-2xl
border
border-gray-200
bg-white
p-8
text-center
dark:border-gray-800
dark:bg-gray-950"
>
<div class="text-4xl">
🚀
</div>
<h3 class="mt-5 text-xl font-bold">
سریع
</h3>
<p
class="mt-3
leading-7
text-gray-600
dark:text-gray-400"
>
صفحات سریع و تجربه کاربری ساده.
</p>
</div>
<div
class="rounded-2xl
border
border-gray-200
bg-white
p-8
text-center
dark:border-gray-800
dark:bg-gray-950"
>
<div class="text-4xl">
🔒
</div>
<h3 class="mt-5 text-xl font-bold">
امن
</h3>
<p
class="mt-3
leading-7
text-gray-600
dark:text-gray-400"
>
امنیت اطلاعات کاربران برای ما مهم است.
</p>
</div>
<div
class="rounded-2xl
border
border-gray-200
bg-white
p-8
text-center
dark:border-gray-800
dark:bg-gray-950"
>
<div class="text-4xl">
💬
</div>
<h3 class="mt-5 text-xl font-bold">
پشتیبانی
</h3>
<p
class="mt-3
leading-7
text-gray-600
dark:text-gray-400"
>
در تمام مراحل خرید در کنار شما هستیم.
</p>
</div>
</div>
</div>
</section>مرحله هفتم — CTA
CTA یا Call To Action بخشی است که کاربر را به انجام یک کار مشخص دعوت میکند.
<section class="py-20">
<div class="container mx-auto px-4">
<div
class="overflow-hidden
rounded-3xl
bg-blue-600
px-6 py-12
text-center
text-white
md:px-12"
>
<h2 class="text-3xl font-bold md:text-4xl">
آماده شروع هستید؟
</h2>
<p class="mx-auto mt-4 max-w-2xl text-blue-100">
محصولات جدید را مشاهده کنید و خرید خود را آغاز کنید.
</p>
<a
href="#products"
class="mt-8 inline-block
rounded-lg
bg-white
px-6 py-3
font-semibold
text-blue-600
transition-all
hover:-translate-y-1
hover:shadow-lg"
>
مشاهده محصولات
</a>
</div>
</div>
</section>در این بخش از:
rounded-3xl
px-6
py-12
md:px-12
text-center
hover:-translate-y-1
hover:shadow-lgاستفاده کردهایم.
مرحله هشتم — Footer
در پایان Footer را اضافه میکنیم.
<footer
class="border-t
border-gray-200
bg-white
py-10
dark:border-gray-800
dark:bg-gray-950"
>
<div
class="container mx-auto
px-4"
>
<div
class="flex flex-col
gap-6
md:flex-row
md:items-center
md:justify-between"
>
<div>
<h3 class="text-lg font-bold">
فروشگاه
</h3>
<p
class="mt-2
text-sm
text-gray-600
dark:text-gray-400"
>
یک فروشگاه آنلاین مدرن.
</p>
</div>
<div
class="flex flex-wrap
gap-5
text-sm"
>
<a
href="#"
class="hover:text-blue-600"
>
قوانین
</a>
<a
href="#"
class="hover:text-blue-600"
>
حریم خصوصی
</a>
<a
href="#"
class="hover:text-blue-600"
>
تماس با ما
</a>
</div>
</div>
<div
class="mt-8
border-t
border-gray-200
pt-6
text-center
text-sm
text-gray-500
dark:border-gray-800"
>
© 2026 تمامی حقوق محفوظ است.
</div>
</div>
</footer>مرحله نهم — Dark Mode
اکنون صفحه ما Classهای Dark Mode را دارد، اما برای تغییر حالت باید یک مکانیزم برای فعال و غیرفعال کردن Dark Mode داشته باشیم.
در Tailwind میتوانیم با قرار دادن کلاس dark روی عنصر ریشه، حالت تاریک را فعال کنیم.
مثلاً:
<html
lang="fa"
dir="rtl"
class="dark"
>با این کار Classهایی مانند:
dark:bg-gray-950
dark:text-whiteفعال میشوند.
برای یک پروژه واقعی میتوانیم یک Toggle Button و JavaScript ایجاد کنیم.
مثلاً:
<button
id="themeToggle"
class="rounded-lg border px-4 py-2"
>
تغییر Theme
</button>و JavaScript:
<script>
const button = document.getElementById("themeToggle");
button.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
});
</script>اکنون با کلیک روی Button، کلاس dark اضافه یا حذف میشود.
مرحله دهم — Responsive کردن صفحه
یکی از مهمترین قسمتهای پروژه بررسی Responsive بودن آن است.
ما در پروژه از Breakpointهای مختلف استفاده کردیم:
Mobile
↓
Base Classes
Tablet
↓
sm / md
Desktop
↓
lgمثلاً:
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">یعنی:
Mobile
┌───────────┐
│ Product │
├───────────┤
│ Product │
├───────────┤
│ Product │
└───────────┘
Tablet
┌───────┬───────┐
│ │ │
├───────┼───────┤
│ │ │
└───────┴───────┘
Desktop
┌─────┬─────┬─────┐
│ │ │ │
└─────┴─────┴─────┘این همان رویکرد Mobile-First است که در مقالات قبلی یاد گرفتیم.
مرحله یازدهم — بررسی Focus
نباید فقط به ظاهر Mouse Hover توجه کنیم.
کاربرانی که با Keyboard کار میکنند نیز باید بتوانند با صفحه تعامل داشته باشند.
مثلاً:
<button
class="rounded-lg
bg-blue-600
px-5 py-3
text-white
hover:bg-blue-700
focus:outline-none
focus:ring-2
focus:ring-blue-400"
>
خرید
</button>اکنون وقتی Button Focus شود، حالت مشخصی خواهد داشت.
این موضوع بخشی از Accessibility است.
مرحله دوازدهم — بررسی Transition
در پروژه از Transition برای طبیعیتر کردن تغییرات استفاده کردیم.
مثلاً:
class="
transition-all
duration-300
hover:-translate-y-1
hover:shadow-lg
"بدون Transition:
Normal → Hover
Instantبا Transition:
Normal
↓
Smooth Transition
↓
Hoverتجربه کاربری بهتر و طبیعیتر میشود.
مرحله سیزدهم — ساختار Componentها
اگر این پروژه را با یک Framework مانند React، Angular، Vue یا یک سیستم Template سمت سرور پیادهسازی کنیم، بهتر است صفحه را به Componentهای کوچکتر تقسیم کنیم.
مثلاً:
components/
│
├── Header
├── Hero
├── CategoryCard
├── ProductCard
├── FeatureCard
├── CTA
└── Footerسپس:
HomePage
│
├── Header
├── Hero
├── Categories
│ ├── CategoryCard
│ ├── CategoryCard
│ └── CategoryCard
│
├── Products
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
│
├── Features
│ ├── FeatureCard
│ ├── FeatureCard
│ └── FeatureCard
│
├── CTA
└── Footerاین همان مفهوم Reusable Components است که در مقاله ۱۴ یاد گرفتیم.
مرحله چهاردهم — بررسی Utilityها
در این پروژه تقریباً از بیشتر Utilityهای مهم Tailwind استفاده کردیم.
Spacing
p-*
px-*
py-*
mt-*
mb-*
gap-*Typography
text-*
font-*
leading-*
text-centerLayout
flex
grid
items-center
justify-between
grid-cols-*Responsive
sm:*
md:*
lg:*States
hover:*
focus:*
group-hover:*Transition
transition-*
duration-*Dark Mode
dark:*Position
relative
absoluteOverflow
overflow-hiddenBorder
border
rounded-*مرحله پانزدهم — اجرای پروژه
اگر پروژه را مطابق مقاله دوم ایجاد کرده باشید، میتوانید Tailwind را در حالت Watch اجرا کنید:
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watchسپس فایل HTML را در Browser باز کنید.
در هنگام توسعه:
HTML
↓
Tailwind Classes
↓
Tailwind CLI
↓
output.css
↓
Browserهر زمان Classهای Tailwind را تغییر دهید، فرآیند Watch فایل CSS خروجی را بهروزرسانی خواهد کرد.
مرحله شانزدهم — تست در اندازههای مختلف
پروژه را فقط روی Desktop بررسی نکنید.
حداقل این اندازهها را بررسی کنید:
Mobile
375px
Mobile Large
430px
Tablet
768px
Laptop
1024px
Desktop
1280px+موارد زیر را بررسی کنید:
آیا Navigation در موبایل مناسب است؟
آیا متن Hero بیش از حد بزرگ نیست؟
آیا Buttonها از صفحه خارج نمیشوند؟
آیا Product Cardها به درستی قرار گرفتهاند؟
آیا تصاویر باعث ایجاد Overflow نمیشوند؟
آیا Footer در موبایل مناسب است؟
آیا Dark Mode تمام بخشها را پوشش میدهد؟
آیا Focus برای عناصر تعاملی قابل مشاهده است؟
اشتباهات رایج در پروژههای Tailwind
۱. استفاده بیش از حد از Classها بدون ساختار
Tailwind به شما آزادی زیادی میدهد، اما بهتر است صفحه را به بخشهای منطقی تقسیم کنید.
۲. فراموش کردن Mobile
اول صفحه را برای Mobile طراحی کنید و سپس با Breakpointها آن را گسترش دهید.
۳. استفاده نکردن از Component
اگر یک Card یا Button بارها تکرار میشود، بهتر است آن را به Component تبدیل کنید.
۴. استفاده بیش از حد از Animation
Animation باید به تجربه کاربر کمک کند، نه اینکه باعث حواسپرتی شود.
۵. نادیده گرفتن Accessibility
فقط ظاهر مهم نیست.
کاربر باید بتواند با Keyboard و سایر روشهای ورودی نیز با سایت کار کند.
پروژه نهایی — تمرین کامل
اکنون شما میتوانید همین پروژه را از ابتدا بدون نگاه کردن به کد بالا پیادهسازی کنید.
بخش اول
یک Header بسازید که شامل موارد زیر باشد:
Logo
Navigation
Login Buttonبخش دوم
یک Hero بسازید:
Badge
Title
Description
Primary Button
Secondary Buttonبخش سوم
حداقل چهار Category ایجاد کنید.
بخش چهارم
حداقل شش Product Card ایجاد کنید.
هر Card شامل:
Image
Badge
Title
Description
Price
Buttonباشد.
بخش پنجم
سه Feature ایجاد کنید.
بخش ششم
یک CTA ایجاد کنید.
بخش هفتم
Footer ایجاد کنید.
بخش هشتم
ویژگیهای زیر را اضافه کنید:
Responsive Design
Dark Mode
Hover
Focus
Transition
Grid
Flexbox
Reusable Componentsچکلیست نهایی
قبل از پایان پروژه، این موارد را بررسی کنید:
[✓] HTML Structure
[✓] Tailwind CSS
[✓] Typography
[✓] Colors
[✓] Spacing
[✓] Borders
[✓] Shadows
[✓] Flexbox
[✓] Grid
[✓] Container
[✓] Position
[✓] Overflow
[✓] Responsive Design
[✓] Breakpoints
[✓] Hover
[✓] Focus
[✓] Transition
[✓] Animation
[✓] Dark Mode
[✓] Componentsجمعبندی دوره Tailwind CSS
در این دوره از پایه با Tailwind CSS شروع کردیم و قدمبهقدم به سمت ساخت رابطهای کاربری واقعی حرکت کردیم.
مسیر یادگیری ما به این شکل بود:
Tailwind CSS
↓
Installation
↓
Colors & Typography
↓
Spacing & Borders
↓
Utilities
↓
Flexbox
↓
Grid
↓
Position & Overflow
↓
Responsive Design
↓
States
↓
Transition & Animation
↓
Dark Mode
↓
Reusable Components
↓
Final Projectدر پایان دوره شما باید بتوانید یک رابط کاربری را از صفر ایجاد کنید و برای طراحی آن از Utilityهای Tailwind CSS استفاده کنید.
مهمتر از حفظ کردن Classها این است که بتوانید مسئله طراحی را به بخشهای کوچکتر تقسیم کنید و برای هر بخش Utilityها، Responsive behavior، Stateها و Component مناسب را انتخاب کنید.
Tailwind CSS زمانی بیشترین کاربرد را دارد که در کنار مفاهیمی مانند HTML، CSS، Responsive Design، Accessibility و Component Architecture استفاده شود.
مسیر پیشنهادی بعد از این دوره
بعد از یادگیری Tailwind CSS میتوانید آن را در پروژههای واقعی با تکنولوژیهایی مانند:
Tailwind CSS
+
React
+
Next.jsیا:
Tailwind CSS
+
Angularیا:
Tailwind CSS
+
ASP.NET Core
+
Razorبه کار ببرید.
به این ترتیب Tailwind از یک ابزار Styling ساده به بخشی از فرآیند ساخت یک رابط کاربری کامل و قابل توسعه تبدیل میشود.
نظرات
هنوز نظری ثبت نشده است.