توضیحات دوره

آموزش پروژه محور TailwindCSS با هدف توسعه سریع و بهینه ui/ux ارائه شده است. پروژه دوره بر اساس ui/ux کامل انجام داده میشه.

تیلویند چیست ؟

آمارهای گیت هاب و سایت npmtrends نشان میده که بازارکار فریمورک tailwindCSS در یک مقیاس جهانی رو به پیشرفت هست. به نحوی که در یک سال گذشته از دانلود هفتگی600  هزار به 2.6 میلیون دانلود هفتگی رسیده. تیلویند (TailwindCSS) یک فریمورک برای توسعه رابط کاربری (فرانت اند) است. از جمله مزیت های تیلویند افزایش سرعت توسعه برنامه ها، قابلیت شخصی سازی بالا و هم چنین سرعت بالای سایت با کمترین حجم CSS نهایی هست که همین باعث شده از زمان انتشار (سال 2019) تا به الان (اوایل 2022) طرفداران زیادی را پیدا کند.

سازوکار تیلویند به چه صوررت هست؟

سازوکار تیلویند با همه فریمورک های توسعه رابط کاربری که تا به الان باهاش کار کردین، کاملا متفاوت هست. چون قرار نیست تیلویند (TailwindCSS) کامپوننت های آماده ای به شما بدهد و اتفاقا این ویژگی فوق العاده تیلویند، باعث شده که تیلویند رو منحصر بفرد بکنه. تیلویند با همان مفاهیم پایه ای CSS مثل فلکس، گرید، پدینگ و... کار میکنه و در واقع مبتی بر ایده utility-first هست. به این معنی که با کلاس های آماده برای تمام ویژگی های CSS فرآیند استایل دهی را خیلی ساده تر میکند. 

نحوه استفاده از کلاس های آماده تیلویند به چه صورت هست؟

ایده اصلی تیلویند این هست که شما با خارج نشدن از فایل HTML، کلاس های آماده CSS که تیلویند در اختیار ما قرار مید هد را استفاده کنیم. در واقع تا حد خیلی زیادی ما نیاز به فایل های  CSS. در برنامه نداریم. درست حدس زدین! دیگر نیازی نیست کلی زمان و انرژی صرف نام گذاری کلاس های CSS بکنید. مثلا قبل مجبور بودیم بر اساس قانون BEM اسم کلاس هایی شبیه  btn btn—primary و... ایجاد بکنیم. اما دیگر نیازی به کلاس های این مدلی نخواهیم داشت! حتی برای ایجاد مدیا کوئری ها، حالت های hover, focus, active شما در همان فایل HTML میتوانید کد مدنظرتان را بنویسید.

تیلویند رسپانسیو هست یا نه ؟

اتفاقا یکی از مزیت های بشدت جذاب تیلویند همینه و میتونم بگم برای همیشه از مشکلات رسپانسیو سازی خداحافظی کنید. در واقع استایل دهی بر اساس mobile-first هست. یعنی از پیاده سازی UI در سایز گوشی موبایل شروع میکنیم و با مدیا کوئری های داخلی که خود تیلویند در اختیار ما قرار میده در سایز تبلت و دسکتاپ هم، استایل و چینش جدید را ایجاد میکنیم.