درس ۱: ورود به دنیای Tailwind CSS
درس ۱: ورود به دنیای Tailwind CSS
در متدهای قدیمی طراحی وب، شما باید برای هر تغییر کوچک، یک نام کلاس دلخواه ابداع می‌کردید و در یک فایل جداگانه کدهای طولانی می‌نوشتید. اما Tailwind CSS این روال را کاملاً تغییر داده است.مفهوم Utility-First چیست؟
تیلویند مجموعه‌ای از کلاس‌های آماده و کوچک است که مستقیماً در HTML نوشته می‌شوند. به جای اینکه بنویسید.my-button { background: blue; }،
فقط کافیست کلاس
bg-blue-500
را به المان خود اضافه کنید.
مقایسه: قدرت کلاس‌های تیلویند
در اینجا می‌توانید تفاوت یک متن ساده و یک کارت طراحی شده با کلاس‌های تیلویند را مشاهده کنید:
<div class=”bg-blue-50 border-r-4 border-blue-500 p-4 rounded-lg“>
این یک متن استایل‌دهی شده است.
</div>
پیش‌نمایش خروجی:
حالت معمولی (بدون تیلویند):
این یک پیام ساده است.
حالت طراحی شده (با کلاس‌های تیلویند):
این یک پیام استایل‌دهی شده حرفه‌ای است!
چه اتفاقی افتاد؟
همانطور که می‌بینید، ما با ترکیب چند کلاس ساده (رنگ پس‌زمینه، حاشیه سمت راست، گرد کردن لبه‌ها و سایه)، یک المان ساده را به یک کامپوننت جذاب تبدیل کردیم.جمع‌بندی درس اول: تیلویند به شما اجازه می‌دهد بدون درگیری با فایل‌های CSS، تمام تمرکز خود را روی ساختار HTML و طراحی سریع بگذارید. در درس بعدی یاد می‌گیریم چطور تیلویند را برای اولین پروژه خود نصب کنیم.
دیدگاه کاربران
نظر یا تجربه خود را درباره این مطلب با دیگران به اشتراک بگذارید.