tailwindcss چیست ؟
Tailwind CSS یکی از فریمورکهای CSS محبوب است که به کاربران امکان می‌دهد بدون نیاز به خروج از سند HTML، برنامه‌های خود را سریع‌تر و آسان‌تر ایجاد کنند. با استفاده از کلاس‌های Tailwind، می‌توانید رنگ‌ها، بخش‌بندی صفحات، تایپوگرافی و سایر عناصر وب را به صورت منحصر به فرد و سفارشی برای وب‌سایت خود ایجاد کنید.
این دوره در کانال یوتیوب topdemy قرار دارد. برای مشاهده کامل ویدیوها و محتوای آموزشی، به کانال ما سر بزنید!
برای دانلود فایل‌های پیوست ، به کانال تلگرام مراجعه کنید
فریمورک چیست ؟
فریمورکها ابزارهایی هستند که به ما امکان می‌دهند به سرعت یک رابط کاربری را ایجاد کنیم. علاوه بر راحتی در کدنویسی، با استفاده از ویژگی‌های آن‌ها، می‌توانیم کدهای بهینه‌تری را ایجاد کنیم.
چرا بهتر است از Tailwind به جای سایر فریمورکهای CSS استفاده کنیم؟
Tailwind CSS یک چارچوب سطح پایین است که در مقایسه با فریمورکهای CSS دیگر مانند Bootstrap و Materialize، اجزای آماده‌ای مانند دکمه‌ها و منوها را ارائه نمی‌دهد.
به جای آن، این فریمورک از کلاس‌های کاربردی تشکیل شده است که امکان ایجاد بخش‌های مختلف یک وب‌سایت با سفارشی‌سازی شخصی را فراهم میکند. Tailwind در PostCSS نوشته شده و در جاوا اسکریپت پیکربندی شده است، به این معنی که شما قدرت کامل یک زبان برنامه‌نویسی واقعی را در اختیار دارید.
برخی از مزایای Tailwind CSS
استفاده از Tailwind باعث کاهش نیاز به استفاده از کدهای 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 نداریم و همین امر باعث افزایش سرعت کد نویسی می شود.