درس ۱: ورود به دنیای Tailwind CSS

در متدهای قدیمی طراحی وب، شما باید برای هر تغییر کوچک، یک نام کلاس دلخواه ابداع می‌کردید و در یک فایل جداگانه کدهای طولانی می‌نوشتید. اما
Tailwind CSS
این روال را کاملاً تغییر داده است.

مفهوم Utility-First چیست؟

تیلویند مجموعه‌ای از کلاس‌های آماده و کوچک است که مستقیماً در HTML نوشته می‌شوند. به جای اینکه بنویسید
.my-button { background: blue; }،
فقط کافیست کلاس
bg-blue-500
را به المان خود اضافه کنید.

مقایسه: قدرت کلاس‌های تیلویند

در اینجا می‌توانید تفاوت یک متن ساده و یک کارت طراحی شده با کلاس‌های تیلویند را مشاهده کنید:

چه اتفاقی افتاد؟

همانطور که می‌بینید، ما با ترکیب چند کلاس ساده (رنگ پس‌زمینه، حاشیه سمت راست، گرد کردن لبه‌ها و سایه)، یک المان ساده را به یک کامپوننت جذاب تبدیل کردیم.