آموزش برنامه نویسی - تاپ دمی
آموزش پروژه محور tailwindcss
وضعیت دوره درحال برگزاری
نوع دوره نقدی
مدت زمان دوره 04:30:27
تعداد جلسات 38
آخرین آپدیت 16 بهمن، 1401
مدرس دوره علی موسوی
قیمت دوره
150000
20٪
120000
تومان
ابتدا وارد سایت شوید

آموزش پروژه محور tailwindcss

در این دوره از سطح ابتدایی تا پیشرفته ی tailwindcss را قدم به قدم به همراه یک پروژه ی ابتدایی و یک پروژه ی نهایی آموزش خواهید دید.

علی موسوی
مدرس دوره

توضیحات

tailwindcss چیست ؟

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

چرا بهتر است از Tailwind به جای سایر فریمورک‌های CSS استفاده کنیم؟

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

پیش نیاز های tailwindcss چیست ؟

برای شروع به کار با tailwind علاوه بر html لازم است درک کامل و عمیقی از css داشته باشید.

این دوره در چه سطحی آموزش داده می شود ؟

این دوره آموزشی سطح مبتدی تا پیشرفته ی tailwindcss ، به همراه یک پروژه تمرینی در طول دوره و یک پروژه ی اصلی در انتهای دوره را شامل می شود.

برخی از مزایای Tailwind CSS

با استفاده از Tailwind شما نیاز بسیار کمتری به خارج شدن از سند html و نوشتن کد های css دارید و به راحتی درون کد های html خود استایل خود را ایجاد می کنید.

به کمک Tailwind فایل خروجی شما بسیار حجم کمتری نسبت به سایر فریم ورک ها دارد و همین کاهش حجم هنگام لود شدن سایت و در مبحث seo بسیار کاربردی است.

به کمک Tailwind به راحتی می توانید در بخش مربوطه تغییراتی را لحاظ کنید بدون اینکه به بخش های دیگر تداخل ایجاد شود برای مثال دکمه ی زیر را در نظر بگیرید :

<button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">click me</button>

استایل بالا شامل شش کلاس است که باهم بررسی می کنیم :

h-10 : این کلاس دکمه را روی ارتفاع 10 واحد که در اینجا واحد ما (rem) است تنظیم می کند.

px-6 : این کلاس padding در محور x را تنظیم میکند.

font-semibold : این کلاس وزن فونت دکمه را بر روی semibold تنظیم می کند.

rounded-md : این کلاس گوشه های دکمه ی را گرد میکند.

bg-black : این کلاس رنگ پس زمینه دکمه را مشکی می کند.

text-white : این کلاس رنگ متن دکمه را سفید می کند.

در این مثال به راحتی و بدون تغییر در سایر button های موجود می توان در سند خود همین دکمه را به هر شکلی که لازم است تغییر دهید.

بسیار راحت تر از گذشته و فریم ورک های دیگر می توان صفحات وب را ریسپانسیو کرد.

نیازی به انتخاب اسم کلاس های مختلف در فایل css نداریم و همین امر باعث افزایش سرعت کد نویسی می شود.