الفرق بين Tailwind CSS v3 و v4 بالعربي

من أكبر التغييرات التي مرّت على Tailwind CSS منذ نشأته: الانتقال من v3 إلى v4. الفرق ليس مجرّد ترقيم إصدار — تغيّر أسلوب الإعداد نفسه من ملف جافاسكربت إلى CSS خالص، وانضمّت ميزات كانت تحتاج إضافات خارجية إلى القلب مباشرة.

الإعداد: من JS إلى CSS

في v3، كل تخصيص (ألوان، خطوط، نقاط توقّف) يعيش في tailwind.config.js:

// v3
export default {
  theme: {
    extend: {
      colors: { brand: "#b026ff" }
    }
  }
}

في v4، نفس التخصيص يعيش داخل ملف CSS الرئيسي عبر @theme:

/* v4 */
@import "tailwindcss";
@theme {
  --color-brand: #b026ff;
}

ملف الإعداد الفارغ لم يعد ضروريًّا أصلًا لمعظم المشاريع — الإعداد الافتراضي يعمل بلا أي ملف تكوين. حتى ملف CSS الرئيسي نفسه أصبح أبسط: سطر واحد @import "tailwindcss"; بدل ثلاثة أسطر @tailwind base; @tailwind components; @tailwind utilities;.

اكتشاف الملفات (content)

v3 يتطلّب تعداد المسارات التي تحتوي أصنافك يدويًّا في content: [...] داخل ملف الإعداد. v4 يكتشف هذه الملفات تلقائيًّا في أغلب المشاريع، ويتيح استثناء أو إضافة مسارات صراحة عبر توجيه @source عند الحاجة فقط.

استعلامات الحاوية مدمجة

في v3 كانت استعلامات الحاوية (تصميم مكوّن يتكيّف مع عرض أبيه لا الشاشة) تحتاج إضافة رسمية منفصلة (@tailwindcss/container-queries). في v4 أصبحت جزءًا أساسيًّا من الإطار بلا أي تثبيت إضافي:

<div class="@container">
  <div class="flex flex-col @lg:flex-row">...</div>
</div>

توسيع الإطار: من plugin() إلى توجيهات CSS

v3 يوسَّع عبر دالّة plugin() بجافاسكربت لإضافة أصناف أو محدّدات مخصّصة. v4 يستبدلها بتوجيهين داخل CSS: @utility لأصناف جديدة، و@custom-variant لمحدّدات جديدة — بلا حاجة لكتابة جافاسكربت على الإطلاق لأغلب حالات التخصيص الشائعة.

الأداء ومتطلّبات المتصفح

v4 يعتمد محرّكًا جديدًا مبنيًّا على Rust يسرّع أوقات البناء بشكل ملحوظ، خصوصًا في المشاريع الكبيرة. الثمن المقابل: يعتمد على ميزات CSS حديثة نسبيًّا (مثل @property وcolor-mix())، لذا يتطلّب رسميًّا Safari 16.4 فما فوق، وChrome 111 فما فوق، وFirefox 128 فما فوق. لو جمهور موقعك يشمل متصفحات أقدم من ذلك بشكل ملحوظ، الترقية تحتاج تقييمًا حذرًا أوّلًا.

جدول مقارنة سريع

متى تبقى على v3؟

• جمهورك يتضمّن نسبة معتبرة من متصفحات أقدم من الحدّ الأدنى المطلوب في v4.
• مشروعك يعتمد بشدّة على إضافات JS خارجية (plugins) لم تُحدَّث بعد لتدعم v4.
• لا حاجة فعلية لاستعلامات الحاوية أو تحسينات الأداء الجديدة، والترقية ليست أولوية حاليًّا.

متى تُرقّي إلى v4؟

• مشروع جديد بالكامل — ابدأ بـ v4 مباشرة، لا سبب للبدء بإصدار قديم.
• تحتاج استعلامات حاوية لمكوّنات قابلة لإعادة الاستخدام في سياقات مختلفة.
• إعداد CSS مباشر أبسط بالنسبة لفريقك من إدارة ملف جافاسكربت منفصل.

الخلاصة

v4 ليس مجرّد تحديث تجميلي — إعادة تصميم لطريقة التخصيص كاملة من جافاسكربت إلى CSS. لمشروع جديد، v4 هو الخيار الافتراضي المنطقي. لمشروع قائم على v3 يعمل بلا مشاكل ولا يحتاج ميزاته الجديدة فعليًّا، الترقية أمر يستحق التخطيط له لا القفز إليه بلا مراجعة.

ابدأ مسار Tailwind CSS الكامل بالعربي — من أوّل صنف إلى استعلامات الحاوية والتخصيص عبر CSS.