فصل ۱: آشنایی با مفاهیم
سلام به دنیای شگفتانگیز طراحی وب! 👋
اگر تازه مسیر برنامهنویسی وب را شروع کردهاید، احتمالاً نامهای مختلفی مثل HTML، CSS و حالا Tailwind به گوشتان خورده است. نگران نباشید! این دوره دقیقاً برای شماست.
یک مثال ساده برای درک بهتر: فرض کنید میخواهید یک خانه بسازید.
• HTML اسکلت و دیوارهای خانه است (ساختار).
• CSS رنگ آمیزی، نوع درها و دکوراسیون است (زیبایی).
• Tailwind مثل این است که به جای ساختن رنگ و درها از صفر، یک کاتالوگ کامل از قطعات پیشساخته و باکیفیت داشته باشید و فقط آنها را سر جایشان بچسبانید.
تیلوند (Tailwind) چیست و چه کمکی به ما میکند؟
۱. تفاوت روش سنتی با روش تیلوندی
در حالت عادی (CSS معمولی)، شما باید برای هر تغییر ظاهر، یک اسم انتخاب میکردید. مثلاً میگفتید: “ای کامپیوتر، هر جا کلاس .card را دیدی، رنگش را آبی کن”. این کار وقتگیر است و باعث میشود فایلهای شما بسیار شلوغ شود.
باید بین دو فایل (HTML و CSS) مدام جابجا شوید. نامگذاری کلاسها سخت است و با بزرگ شدن پروژه، مدیریت کدها غیرممکن میشود.
هر استایلی که میخواهید را مستقیماً با استفاده از کلمات کوتاه و استاندارد روی خودِ تگ اعمال میکنید. سریع، خوانا و فوقالعاده لذتبخش!
۲. کلاسهای Utility یا “ابزاری” یعنی چه؟
تیلوند به جای اینکه به شما یک “دکمه کامل” بدهد، “مواد سازنده دکمه” را میدهد. هر کلاس در تیلوند فقط و فقط یک کار خاص انجام میدهد. با کنار هم قرار دادن این ابزارهای کوچک، طرحهای بزرگ ساخته میشوند.
جدول چند ابزار (Class) پرکاربرد:
| نام کلاس (Tailwind) | تاثیر روی ظاهر سایت |
|---|---|
| text-center | متن را در وسط قرار میدهد. |
| font-bold | متن را ضخیم میکند. |
| bg-green-500 | پسزمینه را به رنگ سبز در میآورد. |
| rounded-full | گوشههای المان را کاملاً گرد (دایرهای) میکند. |
۳. کالبدشکافی یک کد واقعی (مثال کاربردی)
بیایید ببینیم چطور یک کارت “اعلان” زیبا میسازیم. به نحوه چیدمان کلاسها در بخش کد (که به صورت چپچین قرار دارد) دقت کنید:
<div class=”
bg-white // Background color white
p-6 // Padding (internal space)
rounded-xl // Extra large rounded corners
shadow-md // Soft shadow for depth
max-w-sm // Maximum width of the card
“>
<h3 class=”text-lg font-semibold“>Notification</h3>
<p class=”text-slate-500“>You have a new message!</p>
</div>
در کد بالا، ما به مرورگر گفتیم: یک باکس بساز که پسزمینهاش سفید باشد (
bg-white)، از لبهها فاصله داشته باشد (p-6)، گوشههایش نرم و گرد باشد (rounded-xl) و یک سایه قشنگ زیرش بیفتد (shadow-md). میبینید چقدر شبیه به صحبت کردن معمولی است؟