نصائح Tailwind CSS v4

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

ما الذي تغيّر في v4؟

الفرق الجوهري هو أن Tailwind v4 تخلّى تماماً عن ملف الإعداد tailwind.config.js وانتقل إلى نظام CSS-first بالكامل. كل الإعداد الآن يتم داخل ملف CSS الخاص بك باستخدام @theme.

الطريقة القديمة (v3)

في v3 كنت تكتب في tailwind.config.js:

theme: { 
     extend: { 
colors: { brand: "#1E40AF" } } }

الطريقة الجديدة (v4)

في v4 تكتب مباشرة في ملف CSS:

@import "tailwindcss"; @theme { --color-brand: #1E40AF; }

هذا يعني أن القيم أصبحت CSS variables حقيقية يمكنك استخدامها في أي مكان، في JavaScript أو في CSS العادي أو حتى في المتصفح عبر DevTools.

أسرع بـ 10 مرات: محرك Oxide

أحد أبرز التغييرات هو الانتقال إلى محرك Oxide المكتوب بـ Rust. النتيجة:

Full builds أسرع بـ 5x من v3

Incremental builds أسرع بـ 100x وتقريباً فورية

لا حاجة لـ PostCSS plugin منفصل في معظم الأدوات الحديثة

إذا كنت تعمل على مشروع كبير وكانت عملية البناء بطيئة، هذا وحده كافٍ للترقية.

Automatic Content Detection

في v3 كنت مضطراً لتحديد content paths يدوياً:

content: ['./src/**/*.{html,js,tsx}']

في v4 لا تحتاج لهذا. Tailwind يكتشف الملفات تلقائياً بناءً على .gitignore وبنية المشروع. أقل إعداداً وأقل أخطاء.

CSS Variables كـ Design Tokens

هذه من أقوى الميزات العملية. كل قيمة في @theme تصبح CSS variable تلقائياً:

@theme { --color-primary: #1E40AF; --spacing-section: 5rem; --font-display: "Inter", sans-serif; }

الآن يمكنك استخدامها في JavaScript:

const primary = getComputedStyle(document.documentElement).getPropertyValue('--color-primary');

وفي CSS العادي:

.hero { background: var(--color-primary); }

Dynamic Utility Values

في v3 كنت محصوراً بالقيم المحددة مسبقاً أو مضطراً لاستخدام [] للقيم الاعتباطية. في v4 يمكنك كتابة أي قيمة مباشرة:

<div class="mt-17 w-23 text-15">

هذا يعمل الآن دون أي إعداد إضافي. Tailwind v4 يولّد الـ utility ديناميكياً من scale الخاص به.

نصائح عملية للترقية

إذا كنت تفكر بالترقية من v3، إليك ما يجب أن تعرفه:

1. استخدم أداة الترحيل الرسمية: npx @tailwindcss/upgrade وستحوّل ملف الإعداد القديم تلقائياً.

2. راجع الـ utilities المُزالة، فبعض الاختصارات القديمة مثل shadow-sm تغيّرت قيمها الافتراضية.

3. PostCSS لا يزال مدعوماً لكن لم تعد بحاجة لـ postcss-import منفصل.

4. Vite وNext.js وAstro لديهم دعم مباشر ولا حاجة لـ PostCSS plugin في أغلب الحالات.

هل تستحق الترقية الآن؟

للمشاريع الجديدة: نعم بالتأكيد. ابدأ بـ v4 مباشرة، الإعداد أبسط والأداء أفضل والنظام أكثر اتساقاً.

للمشاريع القائمة: قيّم حجم التغييرات المطلوبة. إذا كنت تستخدم إعدادات theme معقدة أو plugins كثيرة، الترقية ستحتاج وقتاً. لكن إذا كانت هذه مشكلة أداء قائمة فالمكسب يستحق.

Tailwind v4 يمثّل نضج حقيقي للأداة، من framework يعتمد على JS config إلى نظام CSS أصيل يعمل بشكل أكثر طبيعية مع بقية الويب.