Tailwind CSS یک چارچوب CSS کاربردی است که به توسعه دهندگان کمک می کند تا وب سایت های مدرن را سریع و کارآمد بسازند. برخلاف چارچوب‌های سنتی CSS مانند Bootstrap، Tailwind CSS با اجزای از پیش تعریف‌شده (مانند دکمه‌ها یا مدال‌ها) همراه نیست. در عوض، مجموعه‌ای از کلاس‌های کاربردی را فراهم می‌کند که می‌توانید از آنها برای استایل دادن مستقیم به عناصر HTML خود استفاده کنید.
ویژگی های کلیدی Tailwind CSS:
-
Utility-First Approach: تیلویند CSS از کلاس‌های ابزار کوچک و تک منظوره (مانند bg-red-500، text-center، flex) استفاده می‌کند که می‌توانید آنها را برای ایجاد رابط‌های کاربری واکنشگرا ترکیب کنید.
- سفارشی سازی: می توانید با پیکربندی کلاس ها و انواع ابزار در یک فایل tailwind.config.js، چارچوب را مطابق با نیازهای پروژه خود سفارشی کنید.
- طراحی واکنشگرا: Tailwind CSS شامل انواع واکنشگرا برای اندازه‌های مختلف صفحه‌نمایش است که به شما امکان می‌دهد طرح‌هایی ایجاد کنید که با دستگاه‌های مختلف سازگار شوند.
- حالت Just-In-Time (JIT): این ویژگی CSS شما را بر حسب تقاضا کامپایل می کند و در نتیجه زمان ساخت سریعتر و اندازه فایل کوچکتر می شود.
- انجمن و اکوسیستم: Tailwind CSS دارای یک انجمن و اکوسیستم بزرگ است که افزونه ها و ادغام های زیادی برای گسترش عملکرد آن در دسترس است.
مثال استفاده:
در اینجا یک مثال ساده از نحوه استفاده از Tailwind CSS برای استایل دادن به یک دکمه آورده شده است:
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded"> Click Me </button>
در این مثال، bg-blue-500 رنگ پس‌زمینه را تنظیم می‌کند، text-white رنگ متن را تنظیم می‌کند، font-bold فونت را پررنگ می‌کند، py-2 پدینگ را روی محور y (بالا و پایین) اضافه می‌کند و با px-4 پدینگ روی محور x (چپ و راست)، و با round، گوشه‌های گرد را اضافه می‌کند.
با استفاده از شبکه تحویل محتوا (CDN) می توانید از Tailwind CSS بدون هیچ گونه نصبی استفاده کنید. در اینجا نحوه تنظیم آن آمده است:
1. Tailwind CSS را از طریق CDN پیوند دهید
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> <title>Tailwind CSS Example</title> </head> <body> <div class="bg-blue-500 text-white font-bold p-4 rounded"> Hello, Tailwind CSS! </div> </body> </html>
2. از کلاس های Tailwind CSS استفاده کنید
اکنون می توانید از کلاس های ابزار Tailwind CSS به طور مستقیم در عناصر HTML خود برای استایل دادن به آنها استفاده کنید. به عنوان مثال:
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md space-y-4"> <h1 class="text-2xl font-bold">Welcome to Tailwind CSS</h1> <p class="text-gray-600">This is an example of using Tailwind CSS without any installation.</p> <button class="bg-blue-500 text-white font-semibold px-4 py-2 rounded">Click Me</button> </div>
3. مزایای استفاده از CDN
- راه اندازی سریع: بدون نیاز به نصب. می توانید بلافاصله استفاده از Tailwind CSS را شروع کنید.
- آخرین نسخه: پیوند CDN آخرین نسخه پایدار Tailwind CSS را ارائه می دهد.
- بدون ابزار ساخت: ایده آل برای پروژه های کوچک یا نمونه های اولیه سریع که نمی خواهید فرآیند ساخت را راه اندازی کنید.
ملاحظات
- محدودیت های سفارشی سازی: استفاده از Tailwind از طریق CDN امکان سفارشی سازی آسان پیکربندی Tailwind را نمی دهد.
- اندازه فایل: فایل کامل Tailwind CSS ممکن است بزرگتر از آنچه برای پروژه شما لازم است باشد، زیرا شامل تمام کلاس های ابزار است.
این روش برای آزمایش سریع با Tailwind CSS یا برای پروژه‌هایی که می‌خواهید از راه‌اندازی یک محیط ساخت اجتناب کنید، عالی است. اگر در نهایت به سفارشی سازی بیشتر یا اندازه فایل کوچکتر نیاز دارید، می توانید Tailwind CSS را به صورت محلی یا با استفاده از CLI مستقل نصب کنید.
نوار ناوبری واکنشگرا
بیایید با استفاده از کلاس های Tailwind CSS یک نوار ناوبری پاسخگو بسازیم:
<nav class="bg-gray-800 p-4"> <div class="max-w-7xl mx-auto flex items-center justify-between"> <div class="text-white text-xl font-bold"> MySite </div> <ul class="hidden md:flex space-x-6"> <li><a href="#" class="text-gray-300 hover:text-white">Home</a></li> <li><a href="#" class="text-gray-300 hover:text-white">About</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Services</a></li> <li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li> </ul> <div class="md:hidden"> <button class="text-gray-300"> Menu </button> </div> </div> </nav>
کلاس های مورد استفاده:
- bg-gray-800 p-4: رنگ پس‌زمینه و پدینگ را تنظیم می‌کند.
- max-w-7xl mx-auto flex items-center justify-between: محتوا را در مرکز قرار می دهد و از flexbox برای طرح بندی استفاده می کند.
- text-white text-xl font-bold: متن لوگو را سبک می کند.
- hidden md:flex space-x-6: منو را روی صفحه‌های کوچک پنهان می‌کند و آن را به‌صورت فلکس‌باکس با فاصله روی صفحه‌های متوسط و بزرگتر نمایش می‌دهد.
- text-grey-300 hover:text-white: به پیوندهای منو استایل می دهد و یک افکت شناور اضافه می کند.
- md:hidden: دکمه "منو" را فقط در صفحه های کوچک نمایش می دهد.
ایجاد بخش Hero
<section class="bg-cover bg-center h-screen" style="background-image: url('hero-image.jpg');">
<div class="flex items-center justify-center h-full bg-gray-900 bg-opacity-50">
<div class="text-center text-white">
<h1 class="text-4xl md:text-6xl font-bold">Welcome to MySite</h1>
<p class="mt-4 text-lg md:text-xl">Creating the future, one step at a time.</p>
<button class="mt-8 bg-blue-500 text-white px-6 py-3 rounded-lg font-semibold">Get Started</button>
</div>
</div>
</section>
کلاس های مورد استفاده:
- bg-cover bg-center h-screen: ویژگی های تصویر پس زمینه و ارتفاع بخش را تنظیم می کند.
- flex items-center justify-center h-full bg-gry-900 bg-opacity-50: محتوا را با یک پوشش نیمه شفاف در مرکز قرار می دهد.
- text-center text-white: متن را در مرکز قرار می دهد و رنگ را روی سفید قرار می دهد.
- text-4xl md:text-6xl font-bold: تیتر را با اندازه های فونت پاسخگو استایل می دهد.
- mt-4 text-lg md:text-xl: حاشیه به پاراگراف اضافه می کند و اندازه فونت پاسخگو را تنظیم می کند.
- mt-8 bg-blue-500 text-white px-6 py-3 lg-fent-semibold: دکمه را با حاشیه، رنگ پس‌زمینه، پدینگ، گوشه‌های گرد و فونت پررنگ حالت می‌دهد.
ایجاد یک طرح بندی شبکه ریسپانسیو
<section class="py-12"> <div class="max-w-7xl mx-auto px-4"> <h2 class="text-3xl font-bold text-center">Our Services</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8"> <div class="bg-white shadow-lg rounded-lg p-6"> <h3 class="text-xl font-bold mb-2">Service 1</h3> <p class="text-gray-700">Description of Service 1.</p> </div> <div class="bg-white shadow-lg rounded-lg p-6"> <h3 class="text-xl font-bold mb-2">Service 2</h3> <p class="text-gray-700">Description of Service 2.</p> </div> <div class="bg-white shadow-lg rounded-lg p-6"> <h3 class="text-xl font-bold mb-2">Service 3</h3> <p class="text-gray-700">Description of Service 3.</p> </div> </div> </div> </section>
کلاس های مورد استفاده:
- py-12: پدینگ را روی محور y اضافه می کند.
- max-w-7xl mx-auto px-4: محتویات را در مرکز قرار می دهد و پدینگ را روی محور x اضافه می کند.
- text-3xl font-bold text-center: عنوان بخش را سبک می کند.
- grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8: طرح شبکه پاسخگو را تعریف می کند.
- bg-white shadow-lg rounded-lg p-6: به کارت های خدمات فردی استایل می دهد.
ایجاد کامپوننت کارت
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> <img class="w-full h-48 object-cover" src="image.jpg" alt="Image"> <div class="p-4"> <h2 class="text-2xl font-bold">Card Title</h2> <p class="text-gray-600 mt-2">This is a description of the card content. Tailwind CSS makes styling easy and flexible.</p> <button class="mt-4 bg-blue-500 text-white font-semibold px-4 py-2 rounded">Read More</button> </div> </div>
خلاصه
با Tailwind CSS، می توانید به سرعت طراحی های وب ریسپانسیو و مدرن را با استفاده از کلاس های کاربردی بسازید. این آموزش مختصر راه اندازی Tailwind CSS از طریق CDN، ایجاد یک نوار ناوبری، یک بخش قهرمان و یک طرح شبکه پاسخگو و کامپوننت کارت را پوشش می دهد. رویکرد ابزار اول Tailwind به شما امکان می دهد بدون نوشتن CSS سفارشی روی طراحی تمرکز کنید.
