استخدام Tailwind CSS v4 في بيئة الإنتاج: التغييرات والتحسينات التي أعجبتني

في الأسبوع الماضي، حاولت تحديث مشروع Laravel + Inertia.js لأحد العملاء إلى Tailwind CSS v4 أثناء النشر المباشر. تم بناء الأصول بشكل جيد، ولكن المستخدمين فجأة رأوا تحولات كبيرة في التصميم على الهاتف المحمول. تبين أن تغيير حجم الخط الافتراضي الجديد في @tailwindcss/typography يكسر نقاط التوقف المتجاوبة القديمة على الشاشات الأصغر ما لم تختر الانسحاب صراحةً. اضطررت إلى التراجع، والبحث في دليل الترحيل على GitHub، وإعادة كتابة نصف أنماط الكتابة في غضون ساعتين. كانت تلك هي اللحظة التي أدركت فيها أن v4 تبدو وكأنها بداية جديدة - وليست مجرد تحديث تدريجي.

أبرز التحولات في v4: من التهيئة إلى المخرجات

التغيير الأكثر وضوحًا هو إزالة القيم العشوائية في بيئة الإنتاج بشكل افتراضي. في السابق، كان بإمكانك كتابة text-[28px] وكان الأمر يعمل. الآن، سيفشل البناء ما لم تقم بإضافة استثناءات safelist أو تمكين corePlugins.arbitraryValues. خسر أحد عملاء الخدمات اللوجستية في دبي الزوايا المستديرة في أزرار لوحة التحكم الخاصة بهم بعد التحديث التلقائي - يا له من أمر مزعج. الجانب الإيجابي؟ PurgeCSS الآن يزيل المزيد من الأنماط غير المستخدمة.

تم تبديل معدّلات عتامة اللون من لاحقة إلى قنوات RGB.

هذه الطريقة كانت تعمل سابقًا:

html

<div class="text-blue-500 opacity-50"></div>

الآن تكتب:

html

<div class="text-blue-500/50"></div>

إنها أقل إسهابًا، لكن فريق ضمان الجودة لدينا في تواصل ليمو اكتشف بعض التحويلات المفقودة في مكونات RTL. اضطررنا إلى البحث في كل ملف .tsx و Blade لإصلاح الفئات القديمة.

إليك ما أفضّله حقًا في v4:

•دعم كامل لتداخل CSS عبر @nest
•مفاتيح السمات مثل theme.spacing.80 تتجاوز الآن 96 بكسل بدون اختراقات
•الأدوات الجديدة text-wrap تقتل أخيرًا علامات <br> في الترجمات العربية

انتظر - هل حاولت استخدام aspect-square في v3؟ في v4، يمكنك الآن كتابة aspect-[1/1] للنسب المخصصة. مما يقودني إلى:

ما أحبه حقًا في المشاريع الحقيقية

الأدوات الجديدة scroll-margin. في نظام حجز قائم على Vue لأحد فنادق الشارقة، كنا نكافح مع التمرير السلس إلى أقسام النموذج. بدلاً من كتابة CSS مخصص، نجح هذا الأمر خارج الصندوق:

html

<section class="scroll-mt-16"></section>

لا توجد إزاحات JavaScript. لا توجد اختراقات window.scrollBy(). إنها مكاسب صغيرة مثل هذه توفر ساعات.

وأنا مهووس بـ واجهة برمجة التطبيقات (API) الجديدة للمكوّن الإضافي الخاص بالكتابة. يتيح لي تحديث v4 تحديد أحجام خطوط مخصصة مع ارتفاعات أسطر وتتبع صريحين:

theme: {
  extend: {
    fontSize: {
      '2xs': ['0.625rem', { lineHeight: '1rem', letterSpacing: '0.05em' }],
    }
  }
}

تم تطبيق هذا على قوائم العقارات الخاصة بـ Reach Home Properties لإصلاح التباعد غير المتناسق في العناوين الرئيسية المختلطة باللغتين العربية والإنجليزية.

الأجزاء المزعجة (لكنك تستطيع إصلاحها)

تحذيرات توافق Firefox أثناء الإنشاء. بشكل افتراضي، يستخدم Tailwind v4 position: sticky في بعض فئات الأدوات المساعدة. تلقى أحد عملائي في أبو ظبي (تطبيق لتوصيل الطعام) أخطاء في وحدة التحكم في المتصفح على Firefox 91. سترغب في استبعاد الأدوات المساعدة الإشكالية إذا كنت تدعم المتصفحات القديمة:

corePlugins: {
  'position-sticky': false,
}

ليست نهاية العالم، ولكنها بالتأكيد خطوة إضافية لم أكن أتوقعها.

ثم هناك ترحيل متغيرات dark:. لقد قاموا بتغيير الطريقة التي يتفاعل بها الوضع الداكن مع المحددات الزائفة مثل hover:. كان علينا إعادة ترتيب أكثر من 30 فئة زر في مشروع الشبكة الداخلية لـ DAS Holding لمنع ظهور نص غير مرئي عند التمرير.

مكاسب خاصة بدولة الإمارات العربية المتحدة: تبسيط التصميم ثنائي اللغة

الأدوات المساعدة الجديدة text-direction سهلت تعديلات التخطيط باللغة العربية في مشروع Next.js حديث. لا مزيد من كتابة أنماط div[dir="rtl"] يدويًا في كل مكان. على سبيل المثال:

html

<div class="text-left rtl:text-right"></div>

بالاشتراك مع المحدد :lang(ar) في tailwind.config.js، قلل هذا من تجاوزات RTL بنسبة 40٪ في واجهة المستخدم الخاصة بالعناية بالنباتات في Greeny Corner.

الأسئلة الشائعة

هل يجب عليّ ترقية Tailwind v3 إلى v4 في مشروع قديم كبير؟

افعل ذلك إذا كنت بحاجة إلى عناصر التحكم الجديدة في الكتابة أو تحسين تطهير CSS. ولكن خصص ما لا يقل عن 2-3 أيام للمراجعة/الاختبار، خاصةً إذا كنت تستخدم مكونات PostCSS الإضافية مثل autoprefixer.

هل يعمل محرك JIT الافتراضي بشكل أفضل في v4؟

نعم، ولكنه أكثر صرامة. تتطلب مصفوفة content الجديدة مسارات كاملة في مشاريع Next.js:

content: [
  './src/**/*.{js,ts,jsx,tsx}',
  { relative: 'src', path: '../components/**/*.{js,ts}' }
]

لقد تعلمت هذا بالطريقة الصعبة في تدفق الحجز الخاص بـ تواصل ليمو.

هل قام Tailwind v4 بإصلاح الفجوة الافتراضية البالغة 15 بكسل في الشبكات؟

ليس بالضبط، ولكن الفئة الجديدة grid-auto-columns تجعل الحلول البديلة أبسط:

html

<div class="grid grid-auto-[minmax(200px,1fr)] gap-4"></div>

هذا أكثر مرونة من grid-cols-3 الثابت في v3.

كيف أقوم باختبار تغييرات Tailwind في بيئة الإنتاج بدون أخطاء؟

استخدم @import للمكونات التي تعتمد على الأدوات المساعدة أولاً، ثم قم بتشغيل npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify. قارن كلا الإصدارين في نافذة التصفح المتخفي - لا تتخط هذه الخطوة بعد كارثة طرح الموقع التجاري الإلكتروني في دبي التي مررت بها العام الماضي.

إذا كنت تفكر في ترقية مجموعتك أو البدء من جديد باستخدام Tailwind CSS v4، تواصل معي. لقد مررت بأكثر من 40 مشروعًا من هذا القبيل في أبو ظبي ودول مجلس التعاون الخليجي، ويمكنني مساعدتك في تجنب المطبات التي وقعت فيها حتى لا تضطر إلى ذلك.