TailwindCSS | Mojtaba Pourkhanlar

TailwindCSS? and why Utility-First?

خب Tailwind یک فریم‌ورک CSS Utility-First هست؛ یعنی به‌جای ساختن کلاس‌های معنایی مثل .card یا .btn، کلاس‌های کوچک و هدفمند در اختیار کاربر می‌گذاره:

مثل p-4, text-lg, flex, mt-2.

این باعث میشه:

افزایش سرعت توسعه
کاهش نیاز به نوشتن CSS سفارشی
یکدست شدن طراحی (Design Consistency)
کاهش context switching بین HTML و CSS

Tailwind Vs Bootstrap

Bootstrap

دارای کامپوننت‌های آماده (Button, Modal, Navbar)
طراحی نسبتاً ثابت
مناسب برای پروژه‌های سریع و ساده

Tailwind

کاملاً Utility-based
بدون کامپوننت آماده (اما قابل ساخت)
انعطاف‌پذیری بسیار بالا
مناسب برای طراحی سفارشی

Purge Or Content

در نسخه‌های جدید Tailwind، به جای purge از content استفاده می‌شود.

وظیفه:

فقط کلاس‌هایی که در پروژه استفاده شده‌اند در خروجی CSS نگه داشته می‌شوند.

نتیجه:

کاهش حجم CSS (از MB به KB)
بهبود Performance

content: ["./src/**/*.{js,ts,jsx,tsx}"]
,

Customization Theme

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#4f46e5",
      },
      spacing: {
        72: "18rem",
      },
      fontFamily: {
        sans: ["IRANSans", "sans-serif"]
,
      },
    },
  },
};

Responsive Design in Tailwind

خب Tailwind به صورت Mobile-First طراحی شده.

موبایل: کوچک
تبلت (≥768px): بزرگ‌تر
دسکتاپ: بزرگ‌تر

<p class="text-sm md:text-lg lg:text-xl"></p>

JIT Mode (Just-In-Time)

در نسخه‌های جدید به‌صورت پیش‌فرض فعال است.

ویژگی‌ها:

تولید کلاس‌ها در لحظه
کاهش حجم CSS
امکان استفاده از مقادیر دلخواه:

<div class="bg-[#12ab34]
 w-[350px]
"></div>

Creating reusable components

روش 1: استفاده مستقیم از Utility
بهترین روش در Tailwind
روش 2: استفاده از @apply

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700;
}

@apply Vs Utility

@apply:

مناسب برای abstraction
افزایش خوانایی
مناسب برای:
- دکمه‌ها
- فرم‌ها
- و pattern های تکراری

نکته مهم:

استفاده بیش از حد از @apply = از دست دادن فلسفه Tailwind

Dark Mode

darkMode: "class"; // یا "media"

حالت class:

<html class="dark"></html>

حالت media:

بر اساس تنظیمات سیستم کاربر

Style Duplication

اگر بیش از حد:

از @apply استفاده شود
کلاس‌های مشابه تکرار شوند

مشکلات:

افزایش حجم CSS
سخت شدن نگهداری

راه‌حل:

استفاده صحیح از utilityها
پرهیز از abstraction بی‌مورد
استفاده از componentهای reusable در React

Tailwind vs CSS-in-JS

شباهت:

نزدیک بودن style به component

مزایای Tailwind:

بدون runtime
performance بهتر
bundle size کمتر

معایب:

شلوغ شدن HTML
یادگیری اولیه سخت‌تر

ساخت Plugin سفارشی

plugins: [
  function ({ addUtilities }) {
    addUtilities({
      ".rotate-y-180": {
        transform: "rotateY(180deg)",
      },
    });
  },
];

جمع‌بندی

در نهایت TailwindCSS یک ابزار قدرتمند برای توسعه سریع و scalable UI است، اما استفاده درست از آن نیازمند:

درک فلسفه Utility-First
رعایت اصول طراحی
مدیریت صحیح کلاس‌ها