دوره آموزش تیلویند ( TailwindCss )

تیلویند یا همان TailwindCss یکی از فریمورک‌های جدید در زمینه طراحی با css است که باتوجه به برخی ویژگی‌های ارائه شده در داخل هسته خود ، توانست تا طرفداران زیادی را به خود جذب کند و از این جهت یکی از فریمورک‌های آینده دار در زمینه فرانت‌اند است . یادگیری TailwindCss  برای دوستانی که در زمینه زبان سی اس اس پیشنیازهای لازم را دارند بسیار ساده خواهد بود . برخلاف فریمورک‌هایی همچون بوت استرپ ( Bootstrap ) و یا یوآی کیت ( Uikit ) و … کار کردن با TailwindCss در قدم اول شاید کمی دشوار به نظر برسد اما اگر طبق اصول و استانداردهای لازم برای راه اندازی آن اقدام کنید ، کارکردن و پیکربندی اولیه این فریمورک بسیار ساده خواهد بود . ( این دوره شامل 5 جلسه رایگان است )

TailwindCss چه تفاوتی با فریمورک هایی همچون Bootstrap دارد ؟

مطئمنا با ظهور فریمورک‌هایی همچون بوت استرپ ، پروسه کدنویسی بسیار ساده شده و مهم‌تر از همه ، استایل نویسی در سراسر دنیا درصورت استفاده از فریمورک بصورت استاندارد یکپارچه انجام شد ، اما در این بین مواردی نیز بودند که احساس شد می‌توانند در آینده بهتر شوند .

در فریمورک‌هایی که تاکنون شاید با آنها کار کرده‌اید ، روش کار اینگونه بود که ابتدا کتابخانه فریمورک را دانلود کرده و سپس از داخل آن یک فایل style.css را به پروژه خودتان اضافه می‌کردید و داخل این فایل ، کلاس‌ها و دستوراتی بود که از قبل به شکلی استاندارد نوشته شده بود و شما کافی بود تا از اسامی این کلاس‌های css داخل فایل پروژه و طبق Doc فریمورک مربوطه استفاده کنید که نهایتا بتوانید قالب خود را بصورتی استاندارد طراحی کنید .

کاستی که گویا این فریمورک‌ها داشتند ( البته کاستی نه ! بلکه تفاوت نگرش ) این بود که شما اگر یک پروژه کوچک داشتید و یا حتی پروژه شما بزرگ بود و به قسمت کمی از فایل Css آماده شده توسط فریمورک نیاز داشتید ، بازهم مجبور بودید تا کل فایل Css را داخل پروژه فراخوانی کنید و درنتیجه حجم زیادی از یک فایل استایل را وارد پروژه کنید .

البته امکان شخصی سازی این فایل‌ها وجود دارد اما باید توجه داشت که ویرایش کردن چند ده هزار خط کد بسیار کار دشواری است و ضمن اینکه هر پروژه فرانت‌اند با دیگری متفاوت است و لذا نمی‌توان از فایل‌های اصلاح شده برای تمامی پروژه‌ها استفاده کرد .

TailwindCss این امکان را فراهم کرده و به عبارتی حس کاستی فریمورک‌های رقیب را بهبود داد . به همین دلیل در مورد TailwindCss  اینگونه گفته می‌شود که امکان شخصی سازی در آن وجود دارد که منظور از شخصی سازی همین موضوعی است که خدمتتان توضیح داده شد .

در داخل TailwindCss  علاوه بر اینکه می‌توان فایل اصلی فریمورک را طبق نیاز پروژه ، شخصی سازی و تولید کرد ، امکان کدنویسی بصورت سریع و البته ساده نیز فراهم شده است تا جایی که حتی اگر نیاز به دستوراتی داشتید و این دستورات داخل هسته خود TailwindCss  وجود ندارند ، می‌توانید طبق الگویی که ارائه شده است خودتان نیز مواردی را اضافه کنید تا TailwindCss در فایل نهایی که خدمتتان ارائه خواهد شد ، دستورات شما را طبق اصول صحیح css ایجاد کند و مشکلی در اجرا و خروجی گرفتن از آنها نداشته باشید .

TailwindCss چگونه کار می کند ؟

فریمورک TailwindCss کمی متفاوت است ! شما برای اینکه توسط این فریمورک بتوانید کار کنید ، ابتدا باید توسط npm و نصب کننده پکیج ، این فریمورک را داخل پروژه خودتان منتقل کرده و سپس پیکربندی آن را انجام داده و طبق دستوراتی که جهت اجرا در ترمینال هستند ، پروژه را مدام در حالت اجرا نگهدای کنید . شما در TailwindCss دو فایل اصلی برای استایل نویسی خواهید داشت که در حالت پیشفرض نام یکی از آنها input.css و نام دیگری output.css است و در حقیقت نیز این فایل‌ها یکی برای ورودی و دیگری برای خروجی استایل است . داخل فایل input.css دستوراتی به شکل زیر وجود دارد :

@tailwind base;
@tailwind components;
@tailwind utilities;

زمانی که شما داخل فایل‌های html اسامی کلاس‌های Tailwind را استفاده کرده و پس از ذخیره سازی ، دستوری را در ترمینال اجرا می‌کنید که بصورت زیر است :

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

دستورات لازم برای کلاس‌هایی که توسط شما استفاده شده است ، در فایل output.css به شکل خودکار ایجاد خواهند شد و درنتیجه شما تنها به میزان کلاس‌هایی که حین پروژه استفاده می‌کنید ، داخل فایل output.css کدهای فریمورک را خواهید داشت و نتیجه آن یک فایل استایل سبک است .

شما در تمامی مراحل پروژه این فایل را خواهید داشت و براساس پیشرفت و افزایش تعداد اسامی کلاس‌های داخل فایل‌های html ، فایل نهایی شما نیز شروع به رشد خواهد نمود . درحقیقت اینگونه تصور کنید که شما داخل فایل input.css کدهای اصلی Tailwind را فراخوانی کرده‌اید و اکنون طبق هسته کاری خود Tailwind ، با هربار استفاده از اسامی کلاس‌ها و سپس اجرای دستور ذخیره‌سازی داخل ترمینال ، داخل فایل output.css تنها دستوراتی از فایل input.css منتقل خواهند شد که اسم کلاس آنها در فایل های html پروژه استفاده شده است ، به همین سادگی !

<div class="top-[117px]">
  <!-- ... -->
</div>

<div class="top-[117px] lg:top-[344px]">
  <!-- ... -->
</div>

<div class="bg-[#bada55] text-[22px] before:content-['Festivus']">
  <!-- ... -->
</div>

نمونه بالا یکی از مثال‌هایی است که می‌توان توسط تیلویند در داخل فایل های html استفاده کرده و سپس خروجی صحیح آن را داخل فایل Css دریافت کنیم . البته که تمامی این موارد در داکیومنت تیلویند توضیح داده شده است و روش صحیح استفاده از آن مهم است .

همانطور که مشاهده کردید این فریمورک حتی امکان استفاده از دستوراتی همچون after و before را نیز در داخل فایل های html به شما خواهد داد لذا از این جهت شما حداقل نیاز ممکن را به یک فایل style.css شخصی خواهید داشت .

اما در رابطه با دوره آموزش تیلویند خودمان صحبت کنیم !

در این دوره آموزشی ، طبق اکثر دوره‌هایی که در زمینه فرانت‌اند و بک‌اند توسط مجموعه ما منتشر شده است ، از قدم صفره صفر شروع به تدریس مباحث نموده و گام به گام طبق Doc خود سایت Tailwind شروع به آموزش سرفصل های لازم و البته تمامی سرفصل ها نمودیم . البته که قبل از هرچیزی به این دلیل که بسیاری از علاقمندان به دلیل سختی های ابتدای راه در نصب Tailwind از ادامه راه دلسرد می‌شوند ، سعی کردیم تا به شکل صحیح درمورد نصب این فریمورک توضیحات لازم را ارائه کنیم تا بدون مشکل پروسه نصب و راه اندازی را همواره به راحتی انجام دهید .

برخی از قالب های دوره

این دوره شامل چندین فصل مختلف است که البته فصل اول مربوط به آموزش صفرتاصد تمامی کلاس‌ها و دستورات ارائه شده در داخل هسته این فریمورک است . البته که تمامی این کلاس و دستورات درحین آموزش به شکل کامل و دقیق با روش استفاده و دلایل استفاده از آنها تشریح شده است .

در ادامه دوره ، سعی کردیم تا در قالب مینی پروژه‌های مختلف ، از تمامی دستورات و کلاس‌های لازم به درستی و البته در قالب نمونه‌های واقعی ( نه نمونه‌های بدردنخور و ساده ) استفاده کنیم . نهایتا پس از بررسی و طی کردن تمامی این پله‌ها ، به سراغ پروژه های عملی خواهیم رفت . در این دوره آموزشی تعداد زیادی پروژه عملی وجود دارد که البته داخل هرکدام سعی داریم تا سرفصل‌های خاصی را پوشش دهیم .

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