أصبحت مكتبة Tailwind CSS خلال السنوات الأخيرة واحدة من أكثر أدوات تنسيق الواجهات انتشارًا بين مطوري الويب، بفضل فلسفتها القائمة على الأصناف الجاهزة الصغيرة التي تكتب مباشرة داخل HTML، بدل كتابة ملفات CSS طويلة يصعب صيانتها. ومع صدور Tailwind CSS 4 مطلع عام 2025، لم يكن التحديث مجرد إضافة ميزات جديدة، بل إعادة بناء شبه كاملة للمكتبة بمحرك جديد وطريقة إعداد مختلفة تعتمد على CSS نفسها. في هذا الموضوع نستعرض أهم ما تغير في Tailwind CSS 4، ولماذا يعد قفزة في الأداء وتجربة التطوير، وما الذي يجب أن تنتبه إليه عند نقل مشروع قائم إليه.
محرك جديد بالكامل وسرعة بناء غير مسبوقة
أبرز ما يميز Tailwind CSS 4 هو المحرك الجديد الذي أعيدت كتابته من الصفر مع التركيز على الأداء، واستعانت فيه المكتبة بأجزاء مكتوبة بلغة Rust وبأداة Lightning CSS لمعالجة الأكواد. والنتيجة أن عملية البناء الكاملة للمشروع صارت أسرع بعدة أضعاف مقارنة بالإصدار الثالث، أما عمليات البناء التدريجي أثناء التطوير، أي عندما تعدل ملفًا واحدًا وتحفظه، فقد أصبحت شبه فورية في كثير من الحالات، وهو ما يشعر به المطور مباشرة في المشاريع الكبيرة.
كما لم يعد المطور يحتاج إلى تثبيت أدوات إضافية منفصلة كما كان في السابق، فالإصدار الجديد يتولى بنفسه إضافة البادئات الخاصة بالمتصفحات، ودعم استيراد الملفات، وتحويل الأكواد الحديثة لتعمل على نطاق أوسع من المتصفحات. ويوفر أيضًا إضافة رسمية لأداة Vite تمنح أفضل أداء ممكن في المشاريع المبنية بها، إلى جانب إضافة PostCSS وأداة سطر الأوامر للمشاريع الأخرى.
الإعداد من داخل CSS بدل ملف الجافاسكربت
كان ملف
tailwind.config.js قلب أي مشروع في الإصدارات السابقة، ففيه تُعرف الألوان والخطوط والمسافات والمسارات التي تبحث فيها المكتبة عن الأصناف. أما في Tailwind CSS 4 فقد انتقل الإعداد إلى ملف CSS نفسه، فيكفي أن تكتب سطر الاستيراد @import "tailwindcss" في ملفك الرئيسي، ثم تعرف قيم التصميم الخاصة بمشروعك داخل الكتلة @theme بصيغة متغيرات CSS عادية، مثل ألوان العلامة التجارية والخطوط ونقاط التوقف الخاصة بالشاشات.وهذا التحول له فائدة مزدوجة، فمن جهة يقلل عدد الملفات والإعدادات في المشروع، ومن جهة أخرى يجعل كل قيم التصميم متاحة تلقائيًا بوصفها متغيرات CSS حقيقية يمكن استخدامها في أي مكان، حتى خارج أصناف Tailwind، كأن تستدعيها في كود جافاسكربت أو في مكتبة رسوم بيانية. ومع ذلك ما زال الإصدار الجديد يدعم ملف الإعداد القديم عبر توجيه خاص، لتسهيل الانتقال التدريجي للمشاريع الكبيرة.
ومن التحسينات العملية أيضًا الاكتشاف التلقائي لملفات المحتوى، فلم تعد مضطرًا إلى كتابة قائمة المسارات التي تحتوي على أصناف Tailwind، إذ تفحص المكتبة ملفات المشروع تلقائيًا وتتجاهل ما هو مدرج في ملف gitignore، مما يقلل الأخطاء الشائعة التي كانت تؤدي إلى اختفاء بعض الأنماط في نسخة الإنتاج.
الاعتماد على ميزات CSS الحديثة
بني Tailwind CSS 4 على ميزات CSS الحديثة التي أصبحت مدعومة في المتصفحات المعاصرة، مثل طبقات التتالي Cascade Layers التي تنظم أولوية الأنماط وتقلل التعارض بينها، وخاصية
@property لتعريف المتغيرات بأنواع محددة تسمح بتحريكها بسلاسة، ودالة color-mix لمزج الألوان والتحكم في شفافيتها. كما انتقلت لوحة الألوان الافتراضية إلى فضاء الألوان OKLCH الذي يقدم ألوانًا أكثر حيوية وتدرجات أكثر اتساقًا على الشاشات الحديثة.وأضاف الإصدار الجديد دعمًا مدمجًا لاستعلامات الحاويات Container Queries دون الحاجة إلى إضافة خارجية، مما يتيح تصميم مكونات تتكيف مع حجم الحاوية التي توضع فيها لا مع حجم الشاشة فقط، إلى جانب أدوات جديدة للتحويلات ثلاثية الأبعاد والتدرجات اللونية وتنسيق العناصر بناءً على حالات مختلفة. وكل ذلك يجعل الأصناف الجاهزة أقرب إلى إمكانيات CSS الحديثة بشكل مباشر.
كيف تنقل مشروعك إلى Tailwind CSS 4؟
وفر فريق Tailwind أداة ترقية رسمية تُشغل بالأمر
npx @tailwindcss/upgrade، تتولى تحديث الحزم ونقل الإعدادات من ملف الجافاسكربت إلى CSS، وتعديل أسماء بعض الأصناف التي تغيرت في الإصدار الجديد داخل ملفات المشروع. وينصح بتشغيلها على فرع منفصل في نظام التحكم بالإصدارات، ثم مراجعة التغييرات بعناية واختبار صفحات الموقع الرئيسية قبل الدمج.ومن أهم ما يجب الانتباه إليه أن Tailwind CSS 4 يستهدف المتصفحات الحديثة فقط، تحديدًا سفاري 16.4 وكروم 111 وفايرفوكس 128 وما بعدها، لاعتماده على ميزات CSS لم تكن متاحة قبل ذلك. فإذا كان جمهور موقعك يستخدم نسبة ملحوظة من الأجهزة أو المتصفحات القديمة، فقد يكون البقاء على الإصدار الثالث مؤقتًا هو القرار الأصح. كما تغيرت بعض القيم الافتراضية، مثل لون الحدود الافتراضي وأحجام بعض الظلال والزوايا، فراجع مظهر المكونات بعد الترقية.
أما للمشاريع الجديدة فالبدء بالإصدار الرابع هو الخيار الطبيعي، إذ يكفي تثبيت الحزمة وإضافة سطر الاستيراد في ملف CSS لتبدأ العمل فورًا دون ملفات إعداد إضافية، وهو ما يجعل تجربة البداية أبسط بكثير مما كانت عليه سابقًا، خاصة للمبتدئين.
الخلاصة
يمثل Tailwind CSS 4 نضجًا واضحًا للمكتبة، فهو أسرع بشكل ملحوظ، وأبسط في الإعداد، وأقرب إلى معايير CSS الحديثة من أي إصدار سابق. والانتقال إليه يستحق العناء لأغلب المشاريع، بشرط مراجعة توافق المتصفحات واختبار المظهر بعد الترقية. فهل بدأتم استخدام Tailwind CSS 4 في مشاريعكم؟ وما أكثر ميزة أعجبتكم فيه؟ شاركونا آراءكم وتجاربكم.
