Tailwind چیست؟ مزایا، کاربردها+ آموزش تیلویند از صفر تا صد با 12 درس

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

با Tailwind CSS، می ‌توانید ویژگی هایی که گفته شد را در برنامه‌ تان بگنجانید. Tailwind CSS فریمورکی است که برای ساخت سریع و سفارشی ‌سازی برنامه ‌ها بدون نوشتن CSS سفارشی استفاده می ‌شود.

برای درک این که چرا بیش از 200000 وب سایت فعال در اینترنت از تیلویند استفاده می‌ کنند، باید بدانیم:

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

Tailwind CSS چیست؟

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

در کنار این مطلب دانلود کنید: scss چیست؟ آموزش به زبان ساده

به طور مثال فرض کنید می‌ خواهید دکمه ‌ای ایجاد کنید که ارتفاع ثابت، لایه افقی، رنگ پس ‌زمینه مشکی، لبه ‌های گرد و فونت سفید و نیمه پر رنگ داشته باشد . کد HTML شما به این صورت خواهد بود:

<button class=”h-10 px-6 font-semibold rounded-md bg-black text-white” type=”submit”>Buy now</button>

HTML‌ شامل شش کلاس کاربردی است. هر کدام از آن ها به این صورت تعریف می ‌شوند:

• h-10: این کلاس دکمه را روی ارتفاع ثابت 10 واحد تنظیم می ‌کند.
• px-6: این کلاس حاشیه ‌بندی افقی دکمه را روی 6 واحد تنظیم می ‌‌کند .
• font-semibold : این کلاس وزن یا سیاهی فونت دکمه را بر روی نیمه بولد قرار می ‌دهد.
• rounded-md: این کلاس شعاع حاشیه دکمه را طوری تنظیم می ‌کند که گوشه‌ های گرد داشته‌‌ باشند.
• bg-black: این کلاس رنگ پس ‌زمینه دکمه را سیاه می ‌کند.
• text-white : این کلاس رنگ متن دکمه را سفید می ‌کند.

همان طور که ممکن است حدس زده باشید، هنگام استفاده از تیلویند در درجه اول باید با کلاس‌ های کاربردی آن آشنا شوید. اما هنگامی که این کار را انجام دادید، می ‌توانید به سرعت و به طور مداوم کامپوننت سفارشی مثل دکمه زیر ایجاد کنید.

حالا که فریمورک تیلویند را بهتر درک کردید، اجازه بدهید برخی از مزایای استفاده از آن را هم بررسی کنیم.

از دست ندهید: دانلود آموزش همه زبانهای برنامه نویسی (رایگان)

مزایای Tailwind CSS

استفاده از فریمورک CSS مثل تیلویند مزایای زیادی دارد. در ادامه اکثر آن ها توضیح داده شده ‌اند:

• کم تر لازم است که شما CSS سفارشی بنویسید. با تیلویند، عناصر را با اعمال کلاس ‌های از قبل موجود مستقیما در‌HTML تان استایل‌ دهی می ‌کنید. با استفاده از کلاس ‌های کاربردی در این روش، می ‌توانید طرح‌ های سفارشی را بدون نوشتن CSS بسازید.
• شما فایل ‌های CSS را کوچک نگه می ‌دارید. بدون فریمورکی مثل تیلویند، باید هم زمان با افزودن ویژگی ‌ها و مؤلفه‌ های جدید، به نوشتن CSS ادامه بدهید. در نتیجه، فایل ‌های CSS شما سنگین ‌تر می‌ شوند. با استفاده از ابزار هایی مثل نرم ‌افزار Tailwind’s flexbox و ابزار های حاشیه ‌بندی، بیشتر استایل ها قابل استفاده مجدد هستند، بنابراین به ندرت نیاز به نوشتن CSS جدید خواهید داشت .
• شما مجبور نیستید از خودتان نام کلاس تعریف کنید. با تیلویند شما کلاس ‌ها را از یک سیستم طراحی از پیش تعریف ‌شده انتخاب می ‌کنید. یعنی این که برای انتخاب نام‌ های کلاس خوب برای سبک ‌ها و کامپوننت های خاص به دردسر نمی ‌افتید و لازم نیست موارد پیچیده را به خاطر بسپارید.
• شما می‌ توانید تغییرات ایمن ‌تری ایجاد کنید. در روش سنتی ، اگر تغییراتی در CSS ایجاد کنید، ممکن است چیزی را در سایت تان دچار مشکل شود. برخلافCSS ، کلاس ‌های ابزار در HTML شما محلی هستند. این یعنی این که می ‌توانید بدون نگرانی در مورد ایجاد تغییر در چیز دیگری در سایت تان، آن ها را تغییر بدهید.

حتما بخوانید: طراحی سایت با CSS با 4 درس آموزشی

چرا Tailwind CSS؟

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

تیلویند به همین دلیل، انعطاف ‌پذیری و کنترل بسیار بیشتری را بر روی ظاهر برنامه شما نسبت به سایر فریمورک ‌های CSS فراهم می ‌کند. این فریمورک می ‌تواند شما را قادر کند تا یک سایت منحصر به فردتر ایجاد نمایید .

نمونه ‌های Tailwind CSS

تیلویند مؤلفه‌ ها و قالب‌ های رابط کاربری یا “نمونه‌ هایی” را ارائه می ‌کند تا به شما کمک کند که برنامه‌ تان را سریع تر بسازید.

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

مخزن دیگر توسط اعضای انجمن ایجاد ‌شده و منبع ‌باز است. در ادامه بر روی نمونه‌ هایی از این مخزن تمرکز خواهیم کرد.

حتما دانلود کنید: آموزش طراحی سایت از صفر تا صد (16 درس رایگان)

فرم CSS Tailwind

برای این که کاربران بتوانند مشترک خبرنامه شما شوند، می ‌توانید از تیلویند برای ایجاد یک فرم Opt-in ایمیلی استفاده کنید.

برای ایجاد یک فرم انتخاب ایمیل ساده مثل شکل بالا، می ‌توانید از کد زیر استفاده کنید:

<div>
<form class=”m-4 flex”>
<input class=”rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white” placeholder=”your@mail.com”/>
<button class=”px-8 rounded-r-lg bg-yellow-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r”>Subscribe</button>
</form>
</div>

برای سفارشی کردن حاشیه، رنگ پس ‌زمینه، رنگ متن و سایر ویژگی ‌های این فرم، می ‌توانید کلاس ‌های ابزار border-{style}، bg-{color} و text-{color} را تغییر بدهید.

نکته: یک عدد به کلاس ‌های ابزار border-{color}، bg-{color} و text-{color} اضافه کنید تا از طیف رنگی پیش ‌فرض تیلویند استفاده کنید.

دانلود کنید: آموزش صفر تا صد اچ تی ام ال

نوار جستجوی Tailwind CSS

برای این که کاربران بتوانند برنامه شما را بر اساس یک کلمه کلیدی جستجو کنند، می‌ توانید از تیلویند برای ایجاد یک نوار جستجو استفاده کنید.

برای ایجاد یک نوار جستجو با نماد و دکمه ارسال مثل تصویر بالا، می ‌توانید از کد زیر استفاده کنید:

<div class=”max-w-2xl mx-auto”>
<form class=”flex items-center”>
<label for=”simple-search” class=”sr-only”>Search</label>
<div class=”relative w-full”>
<div class=”flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none”>
<svg class=”w-5 h-5 text-gray-500 dark:text-gray-400″ fill=”currentColor” viewBox=”0 0 20 20″ xmlns=”http://www.w3.org/2000/svg”><path fill-rule=”evenodd” d=”M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z” clip-rule=”evenodd”></path></svg>
</div>
<input type=”text” id=”simple-search” class=”bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500″ placeholder=”Search” required>
</div>
<button type=”submit” class=”p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800″><svg class=”w-5 h-5″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”><path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z”></path></svg></button>
</form>
</div>

نکته: از کلاس w-full utility استفاده کنید تا عرض فیلد جستجو روی 100% تنظیم شود.

اسلایدر Tailwind CSS

می ‌توانید از تیلویند برای ایجاد یک نوار لغزنده یا کاروسل استفاده کنید.

برای ایجاد یک اسلایدر مثل تصویر بالا، می ‌توانید از HTML زیر استفاده کنید:

<div class=”h-screen w-full overflow-hidden flex flex-nowrap text-center” id=”slider”>
<div class=”bg-blue-600 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center”>
<h2 class=”text-4xl max-w-md”>Your Big Ideia</h2>
<p class=”max-w-md”>It’s fast, flexible, and reliable — with zero-runtime.</p>
</div>
<div class=”bg-pink-400 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center”>
<h2 class=”text-4xl max-w-md”>Tailwind CSS works by scanning all of your HTML</h2>
<p class=”max-w-md”>It’s fast, flexible, and reliable — with zero-runtime.</p>
</div>
<div class=”bg-teal-500 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center”>
<h2 class=”text-4xl max-w-md”>React, Vue, and HTML</h2>
<p class=”max-w-md”>Accessible, interactive examples for React and Vue powered by Headless UI, plus vanilla HTML if you’d rather write any necessary JS yourself.</p>
</div>
</div>

توجه: این کامپوننت بدون JS Library ساخته شده است، اما برای فعال کردن اسلایدر به جاوا اسکریپت زیر نیاز دارید.

<script>
document.addEventListener(‘DOMContentLoaded’, () => {
const slider = document.querySelector(‘#slider’);
setTimeout(function moveSlide() {
const max = slider.scrollWidth – slider.clientWidth;
const left = slider.clientWidth;

if (max === slider.scrollLeft) {
slider.scrollTo({left: 0, behavior: ‘smooth’})
} else {
slider.scrollBy({left, behavior: ‘smooth’})
}

setTimeout(moveSlide, 2000)
}, 2000)

})
</script>

نکته: کلاس نرم ‌افزار flex-nowrap را به div والد اضافه کنید تا از بسته شدن آن جلوگیری کنید و کلاس کاربردی flex-none را به‌div های فرزند (اسلاید ها) اضافه کنید تا از بزرگ یا کوچک شدن شان جلوگیری کنید.

جدول قیمت ‌گذاری Tailwind

برای نشان دادن چندین طرح ممتاز با ویژگی ‌ها و قیمت ‌های مختلف به مشتریان، می ‌توانید از Tailwind CSS کمک بگیرید و جدول قیمت ‌گذاری ایجاد کنید.

برای ایجاد بخش “Intro” از جدول قیمت‌ گذاری مثل آنچه در بالا نشان داده شده است، می ‌توانید از کد زیر استفاده کنید:

<section class=”bg-white dark:bg-gray-800″>
<div class=”container px-6 py-8 mx-auto”>

<div class=”grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4″>
<div class=”px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700″>
<p class=”text-lg font-medium text-gray-800 dark:text-gray-100″>Intro</p>
<h4 class=”mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100″>$19 <span class=”text-base font-normal text-gray-600 dark:text-gray-400″>/ Month</span></h4>
<p class=”mt-4 text-gray-500 dark:text-gray-300″>For most businesses that want to optimaize web queries.</p>

<div class=”mt-8 space-y-8″>
<div class=”flex items-center”>
<svg xmlns=”http://www.w3.org/2000/svg” class=”w-5 h-5 text-blue-500″ viewBox=”0 0 20 20″ fill=”currentColor”>
<path fill-rule=”evenodd” d=”M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z” clip-rule=”evenodd” />
</svg>

<span class=”mx-4 text-gray-700 dark:text-gray-300″>All limited links</span>
</div>

<div class=”flex items-center”>
<svg xmlns=”http://www.w3.org/2000/svg” class=”w-5 h-5 text-blue-500″ viewBox=”0 0 20 20″ fill=”currentColor”>
<path fill-rule=”evenodd” d=”M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z” clip-rule=”evenodd” />
</svg>

<span class=”mx-4 text-gray-700 dark:text-gray-300″>Own analytics platform</span>
</div>

<div class=”flex items-center”>
<svg xmlns=”http://www.w3.org/2000/svg” class=”w-5 h-5 text-blue-500″ viewBox=”0 0 20 20″ fill=”currentColor”>
<path fill-rule=”evenodd” d=”M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z” clip-rule=”evenodd” />
</svg>

<span class=”mx-4 text-gray-700 dark:text-gray-300″>Chat support</span>
</div>

<div class=”flex items-center”>
<svg xmlns=”http://www.w3.org/2000/svg” class=”w-5 h-5 text-blue-500″ viewBox=”0 0 20 20″ fill=”currentColor”>
<path fill-rule=”evenodd” d=”M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z” clip-rule=”evenodd” />
</svg>

<span class=”mx-4 text-gray-700 dark:text-gray-300″>Optimize hashtags</span>
</div>

<div class=”flex items-center”>
<svg xmlns=”http://www.w3.org/2000/svg” class=”w-5 h-5 text-blue-500″ viewBox=”0 0 20 20″ fill=”currentColor”>
<path fill-rule=”evenodd” d=”M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z” clip-rule=”evenodd” />
</svg>

<span class=”mx-4 text-gray-700 dark:text-gray-300″>Unlimited users</span>
</div>
</div>

<button class=”w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600″>
Choose plan
</button>
</div>

</div>
</div>
</section>

توجه: این کد فقط اولین کانتینر را برای طرح “Intro” ایجاد می ‌کند. برای ایجاد کانتینر هایی مخصوص طرح ‌های “Base”، “Popular” و “Enterprise”، باید این کد را تکرار کنید، نام و قیمت هر طرح را در متن جایگزین کنید.

نکته : قبل از نام کلاسی مثل bg-gray-200، اصلاح‌ کننده “hover:” را اضافه کنید تا آن کلاس کاربردی به ‌صورت مشروط اعمال شود (یعنی کانتینر فقط زمانی که کاربر نشانگر را روی آن نگه می ‌دارد، رنگ پس ‌زمینه را تغییر بدهد.)

یاد بگیرید: کارهایی که با css می توان انجام داد+ مزایا

دروس آموزشی ویدیویی Tailwind

حتما دانلود کنید: آموزش صفر تا صد سی اس اس با 20 درس رایگان 

استفاده از Tailwind CSS برای تسریع کد نویسی

تیلویند نوشتن کد برنامه شما را سریع تر می‌ کند. با استفاده از این فریمورک utility-first، نیازی به نوشتن CSS سفارشی برای استایل دادن به برنامه ‌تان ندارید. در عوض، می ‌توانید از کلاس‌ های کاربردی برای کنترل حاشیه‌ گذاری، رنگ، فونت، سایه و موارد دیگر از برنامه استفاده کنید.

ممکن است آشنایی با این کلاس ‌های کاربردی ابتدا برای تان سخت باشد، اما وقتی این کار را انجام دادید، می‌ توانید سریع ‌تر از همیشه برنامه‌ ها را بسازید.