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