Tailwind CSS v4: الدليل الكامل للمطوّرين 2026

يُعدّ Tailwind CSS v4 الإصدار الذي أصبح أخيرًا متناغمًا تمامًا مع منصة الويب الحديثة. لقد اختفى ملف tailwind.config.js القديم، وأُعيدت كتابة المحرّك بلغة Rust، وأصبح نظام التصميم الخاص بك يعيش حيث يجب أن يكون: داخل ملفات CSS. إن كنت تؤجّل الترقية لأن الإصدار v3 "ما زال يعمل"، فإن 2026 هو عام الانتقال. يشرح هذا الدليل ما الذي تغيّر، ولماذا يهم، وكيف تُرقّي مشروعك دون كسر عملية البناء.

لماذا v4 إعادة كتابة حقيقية وليس مجرد تحديث

العنوان الأبرز هو محرّك Oxide — وهو نواة Tailwind المُعاد بناؤها بلغة Rust مع Lightning CSS بوصفه الاعتماد الوحيد. هذه ليست شعارات تسويقية، بل الأرقام مذهلة:

• عمليات البناء الكاملة تنخفض من نحو 378 ميلي ثانية إلى ما يقارب 100 ميلي ثانية (أسرع بنحو 3.8 مرة)
• إعادة البناء التزايدية مع CSS جديد تنتقل من 44 إلى 5 ميلي ثانية (أسرع 8.8 مرة)
• إعادة البناء دون تغييرات في CSS تنتهي في نحو 192 ميكروثانية — تحسّن بمقدار 182 مرة عن v3

بالنسبة لمكتبة مكوّنات كبيرة أو مستودع أحادي، يحوّل هذا الفرق توقّف إعادة التحميل المحسوس إلى شيء تتوقّف عن الانتباه إليه. اختفى خط أنابيب PostCSS القديم؛ ويتولّى Lightning CSS التحليل وإضافة بادئات المورّدين وتجميع @import في تمريرة واحدة.

الإعداد عبر CSS أولًا مع @theme

أكبر تحوّل مفاهيمي هو انتقال الإعداد من JavaScript إلى CSS. لا يوجد ملف tailwind.config.js افتراضيًا. بدلًا من ذلك، تستورد Tailwind وتعلن رموز التصميم داخل كتلة @theme:

@import "tailwindcss";
 
@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-brand-100: oklch(0.97 0.02 250);
  --color-brand-500: oklch(0.62 0.18 250);
  --color-brand-900: oklch(0.32 0.10 250);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

كل رمز تعرّفه يصبح متغيّر CSS حقيقيًا وأداة مولّدة في آنٍ واحد. اللون أعلاه يمنحك bg-brand-500 وtext-brand-100 وborder-brand-900 وغيرها دون أي إعداد إضافي. ولأن الرموز مكشوفة أيضًا كمتغيّرات :root، يمكنك الوصول إليها من الأنماط المضمّنة أو مكتبات الحركة أو CSS العادي:

<div style="font-family: var(--font-display);">خط عرض مخصّص</div>

يزيل هذا التغيير وحده فئة كاملة من الاحتكاك. لم تعد سلسلة الألوان والخطوط ونقاط التوقّف ومنحنيات التسارع محبوسة داخل كائن JS لا تقرؤه سوى Tailwind — بل أصبحت CSS من الدرجة الأولى تفهمها المنصّة بأكملها.

وداعًا لمصفوفة content

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

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

إعداد أقل يعني أخطاء أقل من نوع "لماذا تختفي أصنافي في الإنتاج"، وهي مشكلة كانت دائمًا تقريبًا بسبب نمط content غير مضبوط في v3.

أدوات ديناميكية لم تعد تُعدّها

يولّد v4 العديد من الأدوات عند الطلب بدلًا من سلسلة ثابتة. تحتاج شبكة من 15 عمودًا أو عرضًا غير معتاد؟ اكتبه فحسب:

<div class="grid grid-cols-15 gap-4">...</div>
<div class="mt-8 w-17 pr-29">...</div>

تُشتقّ كل أدوات التباعد من متغيّر --spacing واحد باستخدام calc()، فيعمل أي مُضاعِف دون مدخل في الإعداد. ومتغيّرات سمات البيانات ديناميكية أيضًا:

<div data-current class="opacity-75 data-current:opacity-100">...</div>

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

كانت استعلامات الحاويات تحتاج إضافة سابقًا. في v4 صارت جزءًا من النواة. علّم عنصرًا كحاوية، ثم نسّق أبناءه بناءً على عرض الحاوية لا عرض نافذة العرض:

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">...</div>
</div>

كما تحصل على متغيّرات حاوية بالحد الأقصى للعرض ونطاقات متراكبة للتحكّم الدقيق:

<div class="@container">
  <div class="grid grid-cols-3 @max-md:grid-cols-1">...</div>
  <div class="flex @min-md:@max-xl:hidden">...</div>
</div>

هذه هي الميزة التي تجعل المكوّنات القابلة لإعادة الاستخدام حقًا ممكنة — فالبطاقة تتكيّف مع أي مكان تحلّ فيه دون معرفة أي شيء عن تخطيط الصفحة.

التثبيت في 2026

أكثر مسارين تستخدمهما الفرق هما إضافة Vite (الأسرع) وPostCSS.

Vite — الإعداد المُوصى به لمشاريع React وVue وSvelte وSolidJS:

npm i -D tailwindcss @tailwindcss/vite

import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
 
export default defineConfig({
  plugins: [tailwindcss()],
});

PostCSS — لإعدادات البناء التي تعتمده أصلًا:

npm i tailwindcss @tailwindcss/postcss

export default {
  plugins: ["@tailwindcss/postcss"],
};

في كلتا الحالتين تصبح نقطة دخول CSS سطرًا واحدًا — لا مزيد من @tailwind base; @tailwind components; @tailwind utilities;:

@import "tailwindcss";

الترقية من v3 دون عناء

توفّر Tailwind أداة ترقية آلية تتولّى معظم العمل، بما في ذلك تحويل إعدادك القديم إلى CSS وإعادة تسمية الأدوات المهجورة:

npx @tailwindcss/upgrade

شغّلها على فرع نظيف ليسهل مراجعة الفروق. أمّا الأمور التي يجب التحقّق منها يدويًا:

• الأدوات المُعاد تسميتها. انزاحت بعض المقاييس — shadow-sm صار shadow-xs، وshadow صار shadow-sm، مع تعديلات مشابهة على أدوات blur وrounded وring. يلتقط المُحوّل معظمها، لكن افحص شيفرتك للتأكيد.
• عرض الحلقة الافتراضي تغيّر من 3px إلى 1px. إن بدت حالات التركيز أنحف من المتوقّع، أضِف ring-3 حيث اعتمدت على القيمة القديمة.
• ألوان الحدود وdivide صارت افتراضيًا currentColor بدل gray-200. حدّد لونًا صريحًا إن كنت تعتمد على الرمادي الضمني.
• الإضافات والإعدادات المسبقة. ما زال يمكن تحميل إعداد JS عبر @config "./tailwind.config.js"; خلال الانتقال، فلا تضطر إلى تحويل كل شيء دفعة واحدة.

إن كنت على إطار مثل Next.js، احتفظ بإعداد PostCSS الحالي، وبدّل الإضافة إلى @tailwindcss/postcss، واستبدل توجيهات @tailwind الثلاثة بالاستيراد الواحد. معظم التطبيقات تُبنى بنجاح من المحاولة الأولى.

هل ينبغي أن تُرقّي؟

إن كنت تبدأ مشروعًا جديدًا في 2026، فلا سبب لاستخدام v3. نموذج CSS أولًا، والاكتشاف التلقائي للمحتوى، واستعلامات الحاويات الأصلية، ومحرّك Oxide تدفع جميعها في الاتجاه نفسه: إعداد أقل، وبناء أسرع، ونظام تصميم هو CSS صرف. أمّا المشاريع القائمة، فالترقية الآلية مع مراجعة دقيقة للأدوات المُعاد تسميتها تستغرق عادةً بعد ظهيرة لا سباقًا كاملًا — ومكسب وقت البناء يردّ تكلفته فورًا لأي فريق يعيد التحميل عشرات المرات في الساعة.

إن Tailwind v4 هو ما يبدو عليه النهج المعتمِد على الأدوات حين يتوقّف عن مصارعة المتصفّح ويبدأ في استخدامه. وبالنسبة لفرق منطقة الشرق الأوسط وشمال أفريقيا التي تشحن واجهات متعدّدة اللغات وداعمة للاتجاه من اليمين إلى اليسار، فإن الإعداد الأخفّ وحلقة التغذية الراجعة الأسرع مكسب إنتاجي مباشر. الترقية واضحة، والمردود حقيقي، والنظام البيئي — بما فيه shadcn/ui ومعظم أطقم المكوّنات الكبرى — انتقل بالفعل.

تبني واجهة أمامية حديثة وتريدها على أكمل وجه؟ تساعد نقطة شركات المنطقة على شحن تطبيقات ويب سريعة وسهلة الوصول وأنيقة التصميم. تواصل معنا.

المصادر: مدوّنة Tailwind CSS الرسمية، LogRocket — دليل المطوّر لـ Tailwind CSS في 2026، DEV Community — تحليل معمّق لمحرّك Oxide