#tools #website #css #grid #tailwind

این کتابخانه به شما این امکان رو می‌ده تا به آسانی حالت‌های مختلفی مثل رنگ، سایز و ... رو در یک کامپوننت با استفاده از کلاس‌های tailwind تعریف و مدیریت کنید.

#️⃣ #WhatsThat | #libarary | #tailwind

🚀 @coolycode

راستی نکته جالبی که وجود داره اینه که میتونی کدت رو سیو کنی و با لینکی که بهت میده با بقیه به اشتراک بزاری 💥

#️⃣ #website #tailwind #css

🚀 @coolycode

#️⃣ #NEWPost #tailwind

🫶 𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

تیلویند درواقع یه فریمورک CSS‌ای سبک برای طراحی سایته که به جای نوشتن کدهای جداگانه‌ی CSS، از کلاس‌های آماده استفاده می‌کنی یا به اصطلاح همون utility ها.

مثلاً به جای اینکه توی فایل CSS بنویسی دکمه پس‌زمینه آبی و متن سفید داشته باشه، فقط توی HTML کلاس‌های bg-blue-500 و text-white رو اضافه می‌کنی.

یکی از مهم ترین قابلیت های تیلویند این مورده، چون شما میتونید کلاس‌های سفارشی، تم‌ها، و حتی پلاگین‌های اختصاصی خودتون رو بسازید.

تیلویند فقط کلاس‌هایی رو که در پروژه استفاده شده‌اند، در خروجی نهایی تولید میکنه (با استفاده از PurgeCSS). این باعث میشه که فایل‌های CSS نهایی بسیار کوچک‌تر از فریمورک‌هایی مثل Bootstrap باشن.

در مقایسه با فریمورک‌هایی که نیاز به یادگیری سیستم گرید و کامپوننت‌های از پیش ساخته‌شده دارند، یادگیری Tailwind آسون‌تره، مخصوصاً برای کسایی که با CSS آشنایی خوبی دارن، ولی خب اولش یه تایم خوبی رو ازتون میگیره تا خوب و دقیق تر باهاش آشنا بشید.

چون Tailwind کامپوننت‌های آماده (مثل دکمه، فرم، مودال) ارائه نمیده، شما باید این موارد رو خودتون بسازید و این میتونه زمانگیر باشه، مگر اینکه از یک کتابخانه‌ی مبتنی بر Tailwind مثل DaisyUI یا Flowbite استفاده کنید.

تیلویند بر خلاف برخی از لایبرری ها، یک سیستم گرید آماده نداره ولی با کلاس‌های responsive utility-first مثل sm:, md:, lg: این کار کاملاً امکان‌پذیر است، صرفا شیوه‌ اینکار متفاوت تره و خودتون باید انجامش بدید.

با وجود انعطاف‌پذیری بالا، در برخی موارد خاص، ممکنه که Tailwind قادر به پشتیبانی از برخی طراحی‌های خیلی پیچیده نباشه و شما مجبو به کدنویسی مستقیم با CSS بشید.

#CSS | #Tailwind

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

همونطور که در جریان هستین؛ تیلویند و بوت استرپ دوتا از محبوب ترین فریمورک های css هستن که خیلیا وقتی میخوان یه css فریمورک انتخاب کنن؛ واسه انتخاب یکی از این دوتا توی دوراهی میمونن.

البته که توی چند سال اخیر استفاده از تیلویند افزایش بسیار چشم گیری داشته و محبوبیت بوت‌استرپ خیلی کمتر شده و ما میخوایم توی این پست این مسئله رو به طور کامل باز کنیم و ببینیم چه مزیت ها و معایبی دارند هردوشون

مزایا ✅
➊ قابلیت کاستومایز سازی بسیار بالا
➋ فوق‌العاده سبک و بهینه، بخاطر ساختارش
➌ یادگیری نسبتاً ساده
➍  پروسه استایل‌دهی سریع‌.

معایب ❌
➊ محدودیت‌ در طراحی‌های پیچیده
➋ جدا نبودن استایل ها و HTML، که میتونه باعث شلوغ شدن کد‌ها بشه، و خب این مورد توی بوت‌استرپ کمتر دیده میشه چپن کامپوننت های از پیش اماده داره

مزایا ✅
➊ وجود کامپوننت های از پیش آماده
➋ وجود grid system برای ریپانسیو سازی

معایب ❌
➊ شباهت زیاد به بقیه سایت هایی که از بوت‌استرپ استفاده میکنند و یونیک نبودن
➋ نیاز مند تایم بیشتر برای یونیک کردن کامپوننت ها
➌ حجم بالا و تاثیر منفی بر روی پرفرمونس، به دلیل عدم وجود بهینه سازی های مناسب

البته مورد سوم توی بوت‌استرپ ۵ بهتر شده 🔺

از این مقایسه میشه نتیجه گرفت که برای توسعه پروژه هایی که دیزاین منحصر به فردی دارن و در مقیاس بزرگ تری هستن، بهتره که از Tailwind استفاده بشه؛ ولی برای پروژه هایی که تایم کمی دارن و یا دیزاین و پرفورمنس در اولویت نیست، بوت استرپ هم میتونه انتخاب خوبی باشه ✅

#framework #css #tailwind

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

‍‍‍‍‍‍‍‍‍‍<div class="group">
  هاور کن ببین چی میشه!
  <div class="opacity-0 group-hover:opacity-100 transition">
    🎉 سورپرایز!
  </div>
</div>

توی کد بالا وقتی موس روی div والد با کلاس group میره، div فرزند که به طور پیش‌فرض با opacity-0 مخفی شده، به آرامی توسط کلاس group-hover:opacity-100 نمایان میشه و محتویاتش رو نشون میده.

و برای برای ایجاد افکت نرم از transition استفاده کردیم که میتونید خودتون بیشتر راجبش بخونید. ( more )

#tips | #tricks | #tailwind

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣

شاید شما هم از خیلیا شنیده باشید که shadcn خیلی خوب و خفنه، ولی من ندیدم کسی بیاد به طور دقیق این مورد رو توضیح بده.

به زودی یه پست میزارم راجبش که ببینید چه ویژگی هایی وجود داره که انقدر shadcn رو نسبت به بقیه ui kit ها متمایز میکنه

#shadcn #tailwind #tips

𝗖𝗛𝗔𝗡𝗡𝗘𝗟  |  𝗚𝗥𝗢𝗨𝗣