Tailwind-css چیست؟
اگر شما عزیزان جزو برنامه نویسان فرانت-اند باشید ، حتما نام فریمورک Tailwind-css به گوشتون خورده. فریمورکی از Css که به ما این امکان را میدهد تا کوچکترین المان های وبسایتمان را شخصی سازی کرده و از طراحی های تکراری دیگر فریمورک ها مانند Bootstrap نجات پیدا کنیم ! در این مقاله از شرکت برنامه نویسی وارنا به معرفی این فریمورک جذاب و پیشرفته میپردازیم. با ما همراه باشید.
تاریخچه Tailwind-css
این فریمورک برای اولین بار در نوامبر سال 2017 عرضه شد. هدف این فریمورک ، تنوع بخشیدن به طراحی های کامپوننت های مختلف به وسیله کلاس های از پیش تعریف شده بود. جذابیت Tailwind اینجاست که ظاهر کلی وبسایت شما را تعیین نمیکند بلکه کلاس های پیش فرض از قطعه کد های کوچک Css را دراختیار شما قرار میدهد و این خود شما هستید که میتوانید طراحی و دیزاین UI متفاوتی به وبسایت خودتون ببخشید.
کلاس های پیش فرض در Tailwind-css
اکثر دستورات مهم در Css به صورت کلاس های پیش فرض در Tailwind-css موجود است و شما میتوانید بدون نوشتن کد Css و تنها نوشتن نام آن کلاس در کد HTML خود ، استایل مورد نظر را به المان خود بدهید. مثلا برای padding از کلاس P و یا برای تعیین عرض از W استفاده میشود. شما میتوانید در سایت مرجع Tailwind-css لیستی از تمامی کلاس های پیش فرض موجود و مقادیر آنها را مشاهده کنید.
دوره ی آموزش Tailwind وارنا
ما در گروه برنامه نویسی وارنا ، دوره ی آموزشی مخصوص تیلویند آماده کردیم که ازصفر تا صد اون و تموم فوت و فن های استفاده از کلاس هایش رو بهت آموزش میدیم .اگر میخوای تیلویند رو کامل یاد بگیری ، این دوره ی آموزشی رو از دست نده.
تفاوت Tailwind-css و Bootstrap
یکی از محبوب ترین و پرکاربردترین فریمورک های Css در دنیا و به خصوص ایران ، فریمورک بوت استرپ (Bootstrap) میباشد. این فریمورک در بحث واکنشگرایی وبسایت یا اپلیکیشن های موبایل عملکرد خیلی خوبی دارد . در ادامه به مقایسه این دو فریمورک پر طرفدار میپردازیم.
ویژگی های Tailwind-css
-
محبوب ترین و کاربردی ترین فریمورک CSS برای بحث شخصی سازی وبسایت ها
از کلاس های کوچک Css پیش فرض استفاده میکند.
-
نسبت به دیگر فریمورک ها جدیدتر است و همچنان در حال رشد و بهینه شدن میباشد.
-
حجم فایل Css شده توسط آن کوچک بوده که به افزایش سرعت وبسایت کمک ویژه ای میکند.
ویژگی های Bootstrap
-
محبوب ترین و کاربردی ترین فریمورک Css برای بحث ریسپانسیو سازی آسان و سریع
از کامپوننت ها و قالب های آماده و محدود استفاده میکند.
-
وبسایت ها و اپلیکیشن های طراحی شده توسط Bootstrap قابل تشخیص هستند چرا که از هسته و پایه یکسانی استفاده میکنند و متنوع نیستند.
-
بسیار قدیمی میباشد و هدف اصلی آن صرفه جویی در زمان توسعه دهندگان فرانت اند با ریسپانسیو سریع میباشد.
-
5- حجم فایل Css سنگینی تولید میکند چرا که تمام کامپوننت های موجود در این فریمورک باید در فایل Css نهایی موجود باشد حتی اگر شما از آنها استفاده نکرده باشید و این باعث میشود که سرعت وبسایت در سریعترین حالت ممکن نباشد.
کامپوننت های Tailwind-css
همانطور که توضیح دادیم در Tailwind-css این کلاس های کوچک و تکه تکه شده ی CSS هستند که در نهایت یک کامپوننت بزرگ مانند جدول و یا هدر و فوتر را تشکیل میدهند. در مقاله ی دیگری از شرکت برنامه نویسی وارنا به معرفی بهترین کتابخانه های Tailwind-css پرداختیم که شما میتوانید کامپوننت های مختلف از پیش کد زده شده را از این کتابخانه ها بردارید و به وبسایت خودتان اضافه نمایید.
طراحی Header با Tailwind-css
در ادامه با استفاده از کلاس های Tailwind یک هدر زیبا و در عین حال ساده طراحی کرده ایم:
<div class="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32">
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&crop=focalpoint&fp-y=.8&w=2830&h=1500&q=80&blend=111827&sat=-100&exp=15&blend-mode=multiply" alt="" class="absolute inset-0 -z-10 h-full w-full object-cover object-right md:object-center">
<div class="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl" aria-hidden="true">
<div class="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu" aria-hidden="true">
<div class="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)"></div>
</div>
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:mx-0">
<h2 class="text-4xl font-bold tracking-tight text-white sm:text-6xl">Work with us</h2>
<p class="mt-6 text-lg leading-8 text-gray-300">Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.</p>
</div>
<div class="mx-auto mt-10 max-w-2xl lg:mx-0 lg:max-w-none">
<div class="grid grid-cols-1 gap-x-8 gap-y-6 text-base font-semibold leading-7 text-white sm:grid-cols-2 md:flex lg:gap-x-10">
<a href="#">Open roles <span aria-hidden="true">→</span></a>
<a href="#">Internship program <span aria-hidden="true">→</span></a>
<a href="#">Our values <span aria-hidden="true">→</span></a>
<a href="#">Meet our leadership <span aria-hidden="true">→</span></a>
</div>
<dl class="mt-16 grid grid-cols-1 gap-8 sm:mt-20 sm:grid-cols-2 lg:grid-cols-4">
<div class="flex flex-col-reverse">
<dt class="text-base leading-7 text-gray-300">Offices worldwide</dt>
<dd class="text-2xl font-bold leading-9 tracking-tight text-white">12</dd>
</div>
<div class="flex flex-col-reverse">
<dt class="text-base leading-7 text-gray-300">Full-time colleagues</dt>
<dd class="text-2xl font-bold leading-9 tracking-tight text-white">300+</dd>
</div>
<div class="flex flex-col-reverse">
<dt class="text-base leading-7 text-gray-300">Hours per week</dt>
<dd class="text-2xl font-bold leading-9 tracking-tight text-white">40</dd>
</div>
<div class="flex flex-col-reverse">
<dt class="text-base leading-7 text-gray-300">Paid time off</dt>
<dd class="text-2xl font-bold leading-9 tracking-tight text-white">Unlimited</dd>
</div>
</dl>
</div>
</div>
</div>
آموزش و استخدام در وارنا
آیا میدانستید که شما میتوانید این Tailwind جذاب و دوست داشتنی رو از صفر تا صد با دوره ی آموزشی که گروه برنامه نویسی وارنا تدارک دیده ، یاد بگیری ؟ خبر خوب همینجا به پایان نمیرسه. شما میتوانید پس از پایان دوره و کسب نمره ی قابل قبول ، با شرکت وارنا همکاری کنی و پروژه ی طراحی قالب UI دریافت کنی. همین حالا در دوره ی آموزش Tailwind-css و sass وارنا ثبت نام کن . فرصت رو از دست نده !
سخن پایانی
مهم ترین وظیفه ی هر برنامه نویس ، به روز بودن و استفاده از جدیدترین امکانات برای بالابردن کیفیت پروژهایش میباشد. اگر شما نیز توسعه ی دهنده فرانت-اند هستید بهتون توصیه میکنیم برای بخش UI وبسایت یا اپلیکیشن پروژتون از Tailwind-css استفاده کنید تا یک نتیجه ی خاص و متفاوت نسبت به نمونه های تکراری موجود ارائه کنید.