دليل Tailwind CSS الشامل للمبتدئين

Tailwind CSS غيّر طريقة كتابة الواجهات لدى عدد كبير من المطورين، وأثار في الوقت نفسه اعتراضاً متكرراً: «هذا يعيدنا إلى الأنماط المضمّنة». هذا الدليل يشرح الفكرة، ولماذا الاعتراض ليس دقيقاً، وكيف تستخدمها عملياً.

ما معنى utility-first؟

في CSS التقليدي تكتب صنفاً يصف ما هو العنصر ثم تعرّفه في ملف منفصل:

<div class="card">…</div>

.card {
  padding: 1.5rem;
  border-radius: 1rem;
  background: white;
}

وفي Tailwind تركّب المظهر من أصناف صغيرة كل واحد منها يفعل شيئاً واحداً:

<div class="p-6 rounded-2xl bg-white">…</div>

الفارق عن الأنماط المضمّنة جوهري: p-6 ليست قيمة حرة، بل مدخل في نظام مسافات محدود. لا يمكنك كتابة 13 بكسل عرضاً، وهذا هو المقصود — القيد نفسه هو ما ينتج تناسقاً بصرياً.

نظام المسافات

الوحدة الأساسية 0.25rem أي 4 بكسل في الإعداد الافتراضي، والرقم في الصنف مضاعف لها:

• p-1 = 4 بكسل
• p-2 = 8 بكسل
• p-4 = 16 بكسل
• p-6 = 24 بكسل
• p-8 = 32 بكسل

القاعدة نفسها تنطبق على m- للهوامش وgap- للفراغات بين عناصر Flexbox وGrid. حين يستخدم كل عنصر في الصفحة نفس السلّم، ينشأ إيقاع بصري لا يتحقق بالقيم العشوائية.

الاستجابة لأحجام الشاشات

Tailwind يعمل بمنطق mobile-first: الصنف بلا بادئة ينطبق على كل الأحجام، والبادئة تعني «من هذا العرض فصاعداً».

<h1 class="text-2xl md:text-4xl lg:text-5xl">عنوان</h1>

هذا يعني: 2xl على الجوال، و4xl من 768 بكسل، و5xl من 1024 بكسل. نقاط التوقف الخمس:

• sm — 640 بكسل
• md — 768 بكسل
• lg — 1024 بكسل
• xl — 1280 بكسل
• 2xl — 1536 بكسل

خطأ شائع: كتابة sm: ظناً أنها «للجوال». هي ليست كذلك — الجوال هو الحالة الافتراضية بلا بادئة، وsm: تبدأ من 640 بكسل صعوداً.

العربية واتجاه RTL: الجزء الأهم

هذه النقطة تُغفل في معظم الأدلة الأجنبية وهي الأكثر أثراً في المواقع العربية. لا تستخدم الاتجاهات الثابتة:

<!-- ❌ ينكسر في RTL -->
<div class="ml-4 text-left border-l">…</div>

<!-- ✅ يتبع اتجاه الصفحة -->
<div class="ms-4 text-start border-s">…</div>

الأصناف المنطقية تستبدل left/right بـ start/end، فتنقلب تلقائياً مع dir="rtl":

• ml- وmr- ← ms- وme-
• pl- وpr- ← ps- وpe-
• text-left وtext-right ← text-start وtext-end
• border-l وborder-r ← border-s وborder-e
• rounded-tl- ← rounded-ss- وهكذا

استثناء واحد يجب الانتباه له: الكود والأرقام الإنجليزية والمصطلحات التقنية تبقى LTR داخل صفحة RTL. أحطها بـ dir="ltr" صراحةً وإلا انقلبت علامات الترقيم في آخر السطر.

الحالات التفاعلية

أي صنف يمكن تقييده بحالة عبر بادئة:

<button class="bg-indigo-600 hover:bg-indigo-700 focus-visible:ring-2 disabled:opacity-50">
  إرسال
</button>

لا تحذف حلقة التركيز focus من أجل الشكل — هي الطريقة الوحيدة التي يعرف بها من يتنقل بلوحة المفاتيح أين هو. إن أزعجك ظهورها بالفأرة استخدم focus-visible التي تظهر لمستخدم لوحة المفاتيح فقط.

الوضع الداكن

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">…</div>

نصيحة عملية: عرّف الألوان مرة واحدة كمتغيّرات دلالية (خلفية، نص، حدود) بدل تكرار dark: على كل عنصر. عشرة عناصر بأربعة أصناف داكنة لكل منها تصبح أربعين موضعاً يجب تعديلها عند تغيير اللون.

متى تتوقف عن التكرار

الاعتراض الوجيه الوحيد على Tailwind هو طول قائمة الأصناف. الحل ليس @apply بل استخراج مكوّن:

function Button({ children }) {
  return (
    <button className="px-6 py-3 rounded-xl bg-indigo-600 text-white
                       hover:bg-indigo-700 transition-colors">
      {children}
    </button>
  );
}

المكوّن يوحّد المظهر والسلوك وإمكانية الوصول معاً، بينما @apply يوحّد المظهر فقط ويعيدك تدريجياً إلى ملف CSS منفصل — أي إلى ما جئت من أجل تجنّبه.

لماذا لا يكبر حجم الملف

Tailwind يفحص ملفاتك ويولّد الأصناف المستخدمة فعلاً فقط. النتيجة عادة بضعة كيلوبايتات مضغوطة مهما كبر المشروع. شرط واحد: لا تبنِ أسماء الأصناف بالتركيب النصي، لأن الماسح لن يراها.

// ❌ لن يُولَّد
const cls = `text-${color}-600`;

// ✅ أسماء كاملة يراها الماسح
const cls = color === "red" ? "text-red-600" : "text-blue-600";

خلاصة

ابدأ بنظام المسافات، والتزم بالأصناف المنطقية من اليوم الأول إن كنت تكتب بالعربية، واستخرج مكوّناً حين يتكرر النمط ثلاث مرات. في مُبَرمِج يأتي Tailwind مهيّأً في كل مشروع بدعم RTL مضبوطاً مسبقاً.