آکادمی بنو/آموزش Tailwind

پروژه نهایی: ساخت یک صفحه وب کامل با 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 Mode

Responsive 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-center

Layout

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
absolute

Overflow

overflow-hidden

Border

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 ساده به بخشی از فرآیند ساخت یک رابط کاربری کامل و قابل توسعه تبدیل می‌شود.

۰۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.