3 مهر 1402
تهران، خیابان آزادی، تقاطع قریب
برنامه نویسی وب

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

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

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

Tailwind CSS یک فریم‌ورک برای ساخت سریع و سفارشی‌سازی اپلیکیشن‌ها بدون نوشتن CSS سفارشی است. با ساختن  Tailwind CSS می‌توانید موارد فوق را هم در چک‌لیست خود تیک بزنید.

برای درک این موضوع که چرا بیش از 20.000 وب‌سایت فعال در اینترنت از  Tailwind CSS استفاده می‌کنند، با ما باشید و این پست را بخوانید.

Tailwind CSS چیست؟

Tailwind CSS یک فریم‌ورک CSS با ویژگی  utility-first است که به کاربران این امکان را می‌دهد تا اپلیکیشن‌ها را سریع‌تر و آسان‌تر ایجاد کنند. با استفاده از این فریم‌ورک، شما می‌توانید از کلاس‌های کاربردی (Utility Classes) برای کنترل layout، رنگ، فاصله‌ها، تایپوگرافی، سایه‌ها و موارد دیگر استفاده کنید. بدون این‌که HTML خود را ترک کنید یا حتی یک خط CSS سفارشی بنویسید.

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

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

این HTML شامل 6 کلاس کاربردی است. بیایید هر کدام را بررسی کنیم:

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

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

دکمه ساخته شده با Tailwind CSS

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

مزایای Tailwind CSS

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

  • CSS سفارشی کمتری می‌نویسید. با Tailwind CSS ، عناصر را با اعمال کلاس‌های از قبل موجود، مستقیماً در HTML خود style می‌کنید. با استفاده از کلاس‌های کاربردی در این روش، می‌توانید طرح‌های سفارشی خود را بدون نوشتن CSS بسازید.
  • فایل‌های CSS را کوچک نگه می‌دارید. بدون فریم‌ورکی مانند Tailwind CSS ، باید همزمان با افزودن ویژگی‌ها و مؤلفه‌های جدید، به نوشتن CSS ادامه دهید. در نتیجه، فایل‌های CSS شما همچنان به بزرگتر شدن و سنگین‌تر شدن ادامه می‌دهند. با استفاده از ابزارهایی مانند Tailwind’s flexbox و ابزارهای padding، بیشتر سبک‌ها (style ها) قابلیت استفاده مجدد دارند. بنابراین به ندرت نیاز به نوشتن CSS جدید دارید.
  • مجبور نیستید نام کلاس‌ها را اختراع کنید. در هنگام کار با Tailwind CSS ، کلاس‌ها را از یک سیستم طراحی از پیش تعریف‌شده انتخاب می‌کنید. این بدان معناست که نیازی نیست برای انتخاب نام‌های کلاس مناسب برای سبک‌ها و اجزای خاص عذاب بکشید. یا موارد پیچیده‌ای مانند sidebar-inner-wrapper را حفظ کنید.
  • می‌توانید تغییرات ایمن‌تری ایجاد کنید. با رویکرد سنتی، اگر تغییراتی در CSS ایجاد کنید، ممکن است چیز دیگر در سایتتان خراب شود. بر خلاف CSS، کلاس‌های ابزار در HTML شما محلی هستند. این بدان معناست که می‌توانید بدون نگرانی در مورد خراب شدن چیز دیگری در سایتتان، آن‌ها را تغییر دهید.

چرا از این فریم ورک استفاده کنیم؟

اکنون ممکن است این سؤال برای شما پیش آمده باشد که بین فریم‌ورک‌های CSS ، چرا از Tailwind استفاده کنیم؟ Tailwind CSS یک فریم‌ورک low-level است. به این معنی که Tailwind برخلاف سایر فریم‌ورک‌های CSS مانند فریم‌ورک Bootstrap و Materialize ،  اجزای کاملاً استایل‌شده مانند دکمه‌ها، dropdown ها و نوارهای ناوبری را ارائه نمی‌دهد. در عوض کلاس‌های کاربردی ارائه می‌دهد تا بتوانید اجزای قابل استفاده مجدد خود را ایجاد کنید.

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

نمونه‌هایی از Tailwind CSS

Tailwind CSS مؤلفه‌ها و تمپلیت‌های UI یا «نمونه‌هایی» را ارائه می‌کند تا به شما کمک کند به سرعت اپلیکیشن‌تان را بسازید. Tailwindمخزنی ایجاد کرده است که شامل نمونه‌هایی از landing page heroes ، feature sections ، فرم‌های ثبت نام در خبرنامه، جداول، پنجره‌های modal ، فرم‌های checkout ، سبد خرید و موارد دیگر است. می‌توانید کد همه یا اکثر این نمونه‌ها را با پرداخت هزینه برای یک پکیج دریافت کنید. مخزن دیگری هم وجود دارد که توسط اعضای جامعه این فریم‌ورک ایجاد شده است و اپن سورس است. ما در این مطلب بر نمونه‌هایی از این مخزن تمرکز می‌کنیم.

Tailwind CSS Form

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

Tailwind CSS Form

برای ایجاد یک فرم 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} را تغییر دهید.

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

Tailwind CSS Search Bar

برای این‌که کاربران بتوانند اپلیکیشن شما را بر اساس یک کلمه کلیدی جستجو کنند، می‌توانید از Tailwind برای ایجاد یک نوار جستجو (Search Bar) استفاده کنید.

Search Bar

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

				
					<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 Slider

به منظور ساخت اسلاید برای عناصر و تصاویر مختلف، می‌توانید از Tailwind برای ایجاد یک slider یا carousel component استفاده کنید.

CSS Slider

برای ایجاد یک slider مانند آن‌چه در بالا می‌بینید، می‌توانید از 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 ساخته شده است، اما برای فعال کردن slider به جاوااسکریپت زیر نیاز دارید:

				
					<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 را به parent div اضافه کنید و برای جلوگیری از بزرگ یا کوچک شدن آن‌ها، کلاس کاربردی flex-none را به child div ها (the slides) اضافه کنید.

Tailwind CSS Pricing Table

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

Tailwind CSS Pricing Table

برای ایجاد بخش Introاز جدول قیمت‌گذاری (Pricing Table) ، مانند آن‌چه در بالا نشان داده شده است، می‌توانید از کد زیر استفاده کنید:

				
					<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>

				
			

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

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

نتیجه‌گیری

استفاده از Tailwind CSS کدنویسی و حفظ کد برنامه را در شما سریع‌تر می‌کند. با استفاده از این فریم‌ورک utility-first ، نیازی به نوشتن CSS سفارشی برای style کردن اپلیکیشن خود ندارید. در عوض، می‌توانید از ابزارهای کاربردی استفاده کنید. این کلاس‌ها برای کنترل padding ، حاشیه، رنگ، فونت، سایه و موارد دیگر اپلیکیشن شما هستند. ممکن است یک منحنی یادگیری برای آشنایی با این کلاس‌های کاربردی وجود داشته باشد، اما وقتی از این مرحله عبور کردید، می‌توانید اپلیکیشن‌‌هایتان را سریع‌تر بسازید و بیش از هر زمان دیگری، آسان‌تر از آن‌ها نگهداری کنید.

منبع ترجمه: hubspot

Leave feedback about this

  • کیفیت
  • قیمت
  • خدمات

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video
X