مقدمة#

النسخة الجديدة دي ركزت على حاجتين مهمين جداً: الأداء السريع والسهولة في الاستخدام.

تحسين الأداء بشكل خرافي#

واحدة من أهم المميزات الجديدة هي تحسين الأداء بشكل مش طبيعي. شوف الجدول ده:

يعني إيه الكلام ده؟ يعني لما تضيف أي كلاس جديد أو تعدل في الكود، التحديث هيحصل في أقل من ثانية واحدة!

طريقة جديدة للتخصيص (CSS-First)#

زمان كنا محتاجين نعدل في ملف tailwind.config.js علشان نخصص الكلاسات:

module.exports = {
  theme: {
    extend: {},
  },
  plugins: [],
};

دلوقتي الموضوع بقى أبسط بكتير! كل حاجة بقت في ملف الـ CSS بتاعك:

@import "tailwindcss";

@theme {
  --font-display: "Cairo", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-primary-100: oklch(0.99 0 0);
  --color-primary-200: oklch(0.98 0.04 113.22);
  --color-primary-300: oklch(0.94 0.11 115.03);
  --color-primary-400: oklch(0.92 0.19 114.08);
  --color-primary-500: oklch(0.84 0.18 117.33);
  --color-primary-600: oklch(0.53 0.12 118.34);
}

مميزات متقدمة جديدة#

استخدام خصائص CSS الحديثة#

دلوقتي تقدر تستخدم خصائص CSS الحديثة زي color-mix:

@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}

دعم المتصفحات للخصائص الحديثة#

color-mix:

• ✅ Chrome 111+ (مارس 2023)
• ✅ Firefox 113+ (مايو 2023)
• ✅ Safari 16.4+ (مارس 2023)
• ✅ Edge 111+ (مارس 2023)

OKLCH Colors:

• ✅ Chrome 111+ (مارس 2023)
• ✅ Firefox 113+ (مايو 2023)
• ✅ Safari 16.4+ (مارس 2023)
• ✅ Edge 111+ (مارس 2023)

Container Queries:

• ✅ Chrome 105+ (أغسطس 2022)
• ✅ Firefox 110+ (فبراير 2023)
• ✅ Safari 16.0+ (سبتمبر 2022)
• ✅ Edge 105+ (أغسطس 2022)

CSS @property:

• ✅ Chrome 67+ (مايو 2018)
• ✅ Firefox 78+ (يونيو 2020)
• ❌ Safari (غير مدعوم)
• ✅ Edge 79+ (يناير 2020)

ملاحظة مهمة: معظم الخصائص الحديثة دي مدعومة في المتصفحات الحديثة، لكن لو محتاج دعم للمتصفحات القديمة، ممكن تستخدم polyfills أو fallbacks.

طريقة تنظيم جديدة (New Organization System)#

Tailwind v4 جاب نظام تنظيم جديد للـ CSS بيخلي الكود أكثر تنظيماً وسهولة في الصيانة:

1. @layer utilities - للكلاسات المساعدة#

@layer utilities {
  /* استخدم ده للعناوين الكبيرة أو النصوص المهمة */
  /* Perfect for headings, hero text, or important announcements */
  .text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  /* استخدم ده للنصوص المميزة زي العناوين أو الشعارات */
  /* Great for brand names, special headings, or call-to-action text */
  .gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

2. @layer components - للكومبونينتس الجاهزة#

@layer components {
  /* استخدم ده للـ buttons الأساسية في الموقع */
  /* Use for primary action buttons, submit forms, or main CTAs */
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors;
  }
  
  /* استخدم ده للبطاقات، المنتجات، أو أي محتوى محاط بإطار */
  /* Perfect for product cards, blog posts, user profiles, or any boxed content */
  .card {
    @apply bg-white rounded-xl shadow-lg p-6 border border-gray-200;
  }
}

3. @variant - لإنشاء متغيرات مخصصة#

معنى @variant:

@variant دي طريقة جديدة في Tailwind v4 بتخليك تعمل كلاسات جديدة بسهولة. بدل ما تكتب كلاس جديد لكل حالة، تقدر تستخدم @variant وتحدد الحالات اللي عايزها.

مثال بسيط: بدل ما تكتب:

.custom-button { /* الكلاس الأساسي */ }
.custom-button:hover { /* حالة hover */ }
.custom-button:focus { /* حالة focus */ }
.custom-button.dark { /* الوضع المظلم */ }

تقدر تكتب:

@variant hover, focus {
  .custom-button { /* هيطبق على hover و focus معاً */ }
}
@variant dark {
  .custom-button { /* هيطبق في الوضع المظلم */ }
}

/* @variant دي بتخليك تعمل كلاسات جديدة بسهولة */
/* @variant lets you create new classes easily with different states */

/* مثال: لما المستخدم يمر الماوس على الزرار أو يضغط عليه */
/* Example: when user hovers or focuses on the button */
@variant hover, focus {
  .custom-button {
    @apply bg-purple-500 text-white;
  }
}

/* مثال: في الوضع المظلم */
/* Example: in dark mode */
@variant dark {
  .custom-button {
    @apply bg-purple-700;
  }
}

/* مثال: للشاشات الصغيرة */
/* Example: for small screens */
@variant sm {
  .custom-button {
    @apply text-sm px-3 py-1;
  }
}

/* مثال: للشاشات الكبيرة */
/* Example: for large screens */
@variant lg {
  .custom-button {
    @apply text-lg px-6 py-3;
  }
}

إزاي تستخدم @variant في HTML:

<!-- الكلاس الأساسي -->
<button class="custom-button">زرار عادي</button>

<!-- مع hover و focus (هيتطبق تلقائياً) -->
<button class="custom-button">زرار مع hover</button>

<!-- في الوضع المظلم -->
<div class="dark">
  <button class="custom-button">زرار في الوضع المظلم</button>
</div>

<!-- للشاشات الصغيرة (sm) -->
<button class="custom-button sm:custom-button">زرار للشاشات الصغيرة</button>

4. @property - لتعريف خصائص CSS مخصصة#

/* استخدم ده لتعريف متغيرات CSS مع نوع بيانات محدد */
/* Use to define CSS custom properties with specific data types for better performance */
@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* استخدم ده للخلفيات المتحركة أو التأثيرات البصرية المتقدمة */
/* Perfect for animated backgrounds, loading spinners, or advanced visual effects */
.animated-gradient {
  background: conic-gradient(from var(--gradient-angle), #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  animation: rotation 4s linear infinite;
}

/* استخدم ده مع @property لإنشاء حركات سلسة */
/* Works with @property to create smooth, performant animations */
@keyframes rotation {
  to {
    --gradient-angle: 360deg;
  }
}

الوضع المظلم (Dark Mode)#

Tailwind v4 جاب طريقة جديدة وأسهل للتعامل مع الوضع المظلم:

الطريقة الجديدة في v4:#

/* تعريف الوضع المظلم الجديد */
@custom-variant dark (&:where(.dark, .dark *));

إزاي تستخدم الوضع المظلم:#

1. في ملف CSS بتاعك (أسلوب shadcn):

/* تعريف الألوان كمتغيرات CSS */
@theme {
  --card-background: oklch(1 0 0); /* أبيض */
  --card-foreground: oklch(0.1 0 0); /* أسود */
  --card-border: oklch(0.9 0 0); /* رمادي فاتح */
}

/* تعريف الألوان للوضع المظلم */
@variant dark {
  --card-background: oklch(0.1 0 0); /* أسود */
  --card-foreground: oklch(0.9 0 0); /* أبيض */
  --card-border: oklch(0.2 0 0); /* رمادي غامق */
}

/* استخدام المتغيرات في الكلاس */
.card {
  background-color: var(--card-background);
  color: var(--card-foreground);
  border: 1px solid var(--card-border);
}

أو الطريقة الأبسط مع Tailwind:

/* كل الألوان في مكان واحد */
.card {
  @apply bg-[--card-background] text-[--card-foreground] border-[--card-border];
}

2. في HTML:

<!-- إضافة كلاس dark للعنصر الأب (body أو html) -->
<html class="dark">
  <body>
    <div class="card">
      <h2>عنوان البطاقة</h2>
      <p>محتوى البطاقة</p>
    </div>
  </body>
</html>

3. تبديل الوضع المظلم بـ JavaScript (أسلوب shadcn):

// نظام الوضع المظلم مثل shadcn/ui
class ThemeProvider {
  constructor() {
    this.theme = 'system';
    this.systemTheme = 'light';
    this.init();
  }

  init() {
    // جلب التفضيل المحفوظ
    this.theme = localStorage.getItem('theme') || 'system';
    
    // مراقبة تفضيل النظام
    this.systemTheme = this.getSystemTheme();
    this.applyTheme();
    
    // مراقبة تغيير النظام
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
      this.systemTheme = this.getSystemTheme();
      if (this.theme === 'system') {
        this.applyTheme();
      }
    });
  }

  getSystemTheme() {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  getTheme() {
    return this.theme === 'system' ? this.systemTheme : this.theme;
  }

  setTheme(theme) {
    this.theme = theme;
    localStorage.setItem('theme', theme);
    this.applyTheme();
  }

  applyTheme() {
    const html = document.documentElement;
    const currentTheme = this.getTheme();
    
    // إزالة كلاس الوضع المظلم
    html.classList.remove('dark');
    
    // إضافة كلاس الوضع المظلم إذا كان مطلوب
    if (currentTheme === 'dark') {
      html.classList.add('dark');
    }
    
    // تحديث واجهة المستخدم
    this.updateUI();
  }

  updateUI() {
    const currentTheme = this.getTheme();
    const buttons = document.querySelectorAll('[data-theme-toggle]');
    
    buttons.forEach(button => {
      button.setAttribute('data-theme', currentTheme);
      button.setAttribute('aria-label', `تفعيل الوضع ${currentTheme === 'dark' ? 'العادي' : 'المظلم'}`);
    });
  }
}

// إنشاء instance من ThemeProvider
const themeProvider = new ThemeProvider();

// دالة للتبديل (light, dark, system)
function setTheme(theme) {
  themeProvider.setTheme(theme);
}

استخدام في HTML:

<!-- زر للوضع العادي -->
<button onclick="setTheme('light')" data-theme-toggle data-theme="light">
  ☀️
</button>

<!-- زر للوضع المظلم -->
<button onclick="setTheme('dark')" data-theme-toggle data-theme="dark">
  🌙
</button>

<!-- زر لاتباع النظام -->
<button onclick="setTheme('system')" data-theme-toggle data-theme="system">
  💻
</button>

مميزات الطريقة الجديدة:#

• أسهل في الاستخدام: مش محتاج تكتب dark: قبل كل كلاس
• أداء أفضل: الكود بيتحلل بشكل أسرع
• مرونة أكتر: تقدر تعمل متغيرات مخصصة للوضع المظلم
• تنظيم أفضل: كل الألوان في مكان واحد

نظام ألوان جديد بـ OKLCH#

Tailwind v4 بقى يستخدم نظام ألوان جديد اسمه OKLCH بدل RGB التقليدي. النظام ده بيدعم ألوان أكتر وأدق، خاصة مع الشاشات الحديثة اللي بتدعم نطاق ألوان أوسع.

ما هو OKLCH؟#

OKLCH هو نظام ألوان جديد يتكون من:

• O (Oklab Lightness): درجة السطوع (0 = أسود، 1 = أبيض)
• C (Chroma): درجة التشبع أو نقاء اللون
• H (Hue): درجة اللون (0-360 درجة)

مقارنة مع RGB:#

/* الطريقة القديمة - RGB */
.old-red {
  background-color: rgb(255, 0, 0); /* أحمر تقليدي */
}

/* الطريقة الجديدة - OKLCH */
.new-red {
  background-color: oklch(0.6 0.2 25); /* أحمر محسن */
}

مميزات OKLCH:#

1. دقة أعلى في الألوان#

/* ألوان أكثر دقة وحيوية */
.vibrant-blue {
  background-color: oklch(0.6 0.3 250); /* أزرق حيوي */
}

.soft-pink {
  background-color: oklch(0.8 0.1 350); /* وردي ناعم */
}

2. دعم الشاشات الحديثة#

/* ألوان تظهر بشكل أفضل على شاشات HDR */
.hdr-green {
  background-color: oklch(0.7 0.25 140); /* أخضر HDR */
}

.wide-gamut-purple {
  background-color: oklch(0.5 0.4 280); /* بنفسجي عريض النطاق */
}

3. سهولة تعديل السطوع#

/* تعديل السطوع بسهولة */
.base-color {
  background-color: oklch(0.6 0.2 25); /* لون أساسي */
}

.lighter {
  background-color: oklch(0.8 0.2 25); /* أفتح */
}

.darker {
  background-color: oklch(0.4 0.2 25); /* أغمق */
}

استخدام OKLCH في Tailwind v4:#

1. في @theme#

@theme {
  --color-primary: oklch(0.6 0.2 25); /* أحمر أساسي */
  --color-secondary: oklch(0.7 0.15 200); /* أزرق ثانوي */
  --color-accent: oklch(0.8 0.25 120); /* أخضر مميز */
}

2. في الكلاسات المخصصة#

@layer utilities {
  .bg-vibrant {
    background-color: oklch(0.6 0.3 250);
  }
  
  .text-soft {
    color: oklch(0.4 0.1 0);
  }
}

3. مع الشفافية#

/* شفافية محسنة */
.semi-transparent {
  background-color: oklch(0.6 0.2 25 / 0.5); /* 50% شفافية */
}

.glass-effect {
  background-color: oklch(0.9 0.05 0 / 0.1); /* تأثير زجاجي */
}

فوائد OKLCH:#

1. ألوان أكثر حيوية#

• دعم أفضل للألوان الساطعة
• ألوان أكثر واقعية

2. أداء أفضل#

• حساب أسرع للألوان
• تحويلات أكثر دقة

3. مرونة أكبر#

• سهولة تعديل السطوع والتشبع
• تحكم أفضل في درجة اللون

4. دعم المستقبل#

• متوافق مع تقنيات العرض الحديثة
• يدعم HDR و Wide Color Gamut

مثال عملي:#

/* نظام ألوان كامل بـ OKLCH */
@theme {
  /* ألوان أساسية */
  --color-primary: oklch(0.6 0.2 25);
  --color-secondary: oklch(0.7 0.15 200);
  --color-success: oklch(0.6 0.25 140);
  --color-warning: oklch(0.7 0.2 60);
  --color-error: oklch(0.6 0.25 25);
  
  /* ألوان محايدة */
  --color-gray-50: oklch(0.98 0.005 0);
  --color-gray-100: oklch(0.95 0.01 0);
  --color-gray-900: oklch(0.15 0.01 0);
  --color-gray-950: oklch(0.05 0.005 0);
}

تثبيت أسهل (Simplified Installation)#

Tailwind v4 جاب ثورة في طريقة التثبيت! مش محتاج ملفات config معقدة ولا setup طويل. سطر واحد يكفي!

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

1. تثبيت Tailwind#

# باستخدام npm
npm install tailwindcss@next

# باستخدام pnpm
pnpm add tailwindcss@next

# باستخدام yarn
yarn add tailwindcss@next

2. إضافة Tailwind لملف CSS#

/* في ملف CSS بتاعك (مثل main.css أو styles.css) */
@import "tailwindcss";

ده كل حاجة! مش محتاج حاجة تانية!

مقارنة مع الطريقة القديمة (v3):#

الطريقة القديمة - v3:#

# 1. تثبيت Tailwind
npm install tailwindcss

# 2. إنشاء ملف config
npx tailwindcss init

# 3. تعديل ملف config
# tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

# 4. إضافة directives في CSS
@tailwind base;
@tailwind components;
@tailwind utilities;

# 5. تشغيل build process
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

الطريقة الجديدة - v4:#

/* ملف واحد فقط! */
@import "tailwindcss";

مميزات التثبيت الجديد:#

1. سرعة فائقة#

• v3: 5 خطوات + ملف config + build process
• v4: خطوة واحدة فقط!

2. اكتشاف تلقائي للملفات#

/* مش محتاج تحدد الملفات! */
@import "tailwindcss";

/* Tailwind هيكتشف الملفات لوحده */

3. لا حاجة لـ build process#

• v3: محتاج تشغل npx tailwindcss --watch
• v4: شغال تلقائياً!

4. تخصيص أسهل#

@import "tailwindcss";

/* التخصيص في نفس الملف */
@theme {
  --color-primary: oklch(0.6 0.2 25);
  --font-display: "Cairo", sans-serif;
}

أمثلة عملية:#

مشروع React:#

/* src/index.css */
@import "tailwindcss";

@theme {
  --color-brand: oklch(0.6 0.2 25);
}

مشروع Vue:#

/* src/assets/main.css */
@import "tailwindcss";

@layer components {
  .btn-primary {
    @apply bg-[--color-brand] text-white px-4 py-2 rounded;
  }
}

مشروع Next.js:#

/* styles/globals.css */
@import "tailwindcss";

@theme {
  --color-primary: oklch(0.6 0.2 25);
  --color-secondary: oklch(0.7 0.15 200);
}

الترقية من v3 إلى v4:#

خطوات الترقية:#

# 1. تحديث Tailwind
npm install tailwindcss@next

# 2. حذف ملف config القديم
rm tailwind.config.js

# 3. تحديث ملف CSS
# بدل:
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

# استخدم:
@import "tailwindcss";

فوائد التثبيت الجديد:#

1. أقل تعقيد#

• مش محتاج تعرف config options
• مش محتاج setup build tools

2. أداء أفضل#

• تحميل أسرع
• build time أقل

3. مرونة أكتر#

• تخصيص في نفس الملف
• سهولة التعديل

ملاحظات مهمة:#

المتصفحات المدعومة:#

• Chrome 111+
• Firefox 113+
• Safari 16.4+
• Edge 111+

Fallback للمتصفحات القديمة:#

متى تحتاج Fallback؟

• لو عندك مستخدمين على متصفحات قديمة (Chrome 110 وأقل)
• لو محتاج دعم أوسع للمتصفحات
• لو مش عايز تفقد أي مستخدم

كيف يعمل Fallback؟

/* المتصفحات الحديثة - تحصل على كل المميزات */
@import "tailwindcss" supports(color-mix());

/* المتصفحات القديمة - تحصل على نسخة مبسطة */
@import "tailwindcss/fallback" not supports(color-mix());

شرح الكود:

• supports(color-mix()): يتحقق إذا كان المتصفح يدعم color-mix
• not supports(color-mix()): إذا كان المتصفح مش يدعم color-mix

مثال عملي كامل:

/* ملف CSS بتاعك - main.css */

/* 1. للمتصفحات الحديثة - Tailwind v4 كامل */
@import "tailwindcss" supports(color-mix());

/* 2. للمتصفحات القديمة - نسخة مبسطة */
@import "tailwindcss/fallback" not supports(color-mix());

/* 3. تخصيصاتك */
@theme {
  --color-primary: oklch(0.6 0.2 25);
}

/* 4. كلاسات مخصصة */
@layer components {
  .btn-primary {
    @apply bg-[--color-primary] text-white px-4 py-2 rounded;
  }
}

شرح مفصل - إزاي بيشتغل الكود:

الخطوة 1: فحص المتصفح#

@import "tailwindcss" supports(color-mix());

• المتصفح يتحقق: هل أنا أدعم color-mix()؟
• إذا كان يدعم (Chrome 111+): يشغل هذا السطر
• إذا كان مش يدعم (Chrome 110 وأقل): يتجاهل هذا السطر

الخطوة 2: النسخة البديلة#

@import "tailwindcss/fallback" not supports(color-mix());

إزاي بيشتغل السطر ده:

المنطق:#

• not supports(color-mix()) = “إذا كان المتصفح مش يدعم color-mix”
• النتيجة: يشغل السطر فقط إذا كان المتصفح مش يدعم color-mix()

مثال عملي:#

/* السطر ده: */
@import "tailwindcss/fallback" not supports(color-mix());

/* معناه: */
/* إذا كان المتصفح مش يدعم color-mix()، استورد tailwindcss/fallback */

إزاي بيحصل:#

1. المتصفح يقرأ السطر
2. يتحقق: هل أدعم color-mix()؟
3. إذا كان يدعم (Chrome 111+): يتجاهل السطر تماماً
4. إذا كان مش يدعم (Chrome 110 وأقل): يشغل السطر ويستورد tailwindcss/fallback

ما هو tailwindcss/fallback؟#

• نسخة مبسطة من Tailwind
• بدون المميزات الحديثة (OKLCH, Container Queries)
• مع المميزات الأساسية (flex, grid, colors, spacing)

مثال توضيحي:#

/* في Chrome 111+ (يدعم color-mix): */
@import "tailwindcss/fallback" not supports(color-mix());
/* النتيجة: لا يتم تنفيذ السطر - مش محتاج fallback */

/* في Chrome 110 (مش يدعم color-mix): */
@import "tailwindcss/fallback" not supports(color-mix());
/* النتيجة: يتم تنفيذ السطر - يستورد النسخة المبسطة */

مثال عملي - إزاي بيظهر في المتصفح:

في Chrome 111+ (متصفح حديث):#

/* يتم تنفيذ: */
@import "tailwindcss" supports(color-mix()); /* ✅ */
@import "tailwindcss/fallback" not supports(color-mix()); /* ❌ */
@theme { --color-primary: oklch(0.6 0.2 25); } /* ✅ */
@layer components { .btn-primary { ... } } /* ✅ */

/* النتيجة: */
/* يحصل على Tailwind v4 كامل + تخصيصاتك */

في Chrome 110 (متصفح قديم):#

/* يتم تنفيذ: */
@import "tailwindcss" supports(color-mix()); /* ❌ */
@import "tailwindcss/fallback" not supports(color-mix()); /* ✅ */
@theme { --color-primary: oklch(0.6 0.2 25); } /* ✅ */
@layer components { .btn-primary { ... } } /* ✅ */

/* النتيجة: */
/* يحصل على Tailwind أساسي + تخصيصاتك */

النتيجة النهائية:

• كل المتصفحات: تحصل على تخصيصاتك
• المتصفحات الحديثة: تحصل على Tailwind v4 كامل
• المتصفحات القديمة: تحصل على Tailwind أساسي

كيف تختبر Fallback؟

// في JavaScript - تحقق من دعم المتصفح
function checkBrowserSupport() {
  if (CSS.supports('color-mix(in oklab, red 50%, blue 50%)')) {
    console.log('المتصفح يدعم Tailwind v4 الكامل');
  } else {
    console.log('المتصفح سيستخدم النسخة المبسطة');
  }
}

// تشغيل الفحص
checkBrowserSupport();

نتيجة الاستخدام:

• Chrome 111+: يحصل على Tailwind v4 كامل مع OKLCH و Container Queries
• Chrome 110 وأقل: يحصل على Tailwind أساسي مع الألوان التقليدية
• كل المستخدمين: يحصلون على تجربة جيدة

اكتشاف الملفات تلقائياً#

مش محتاج تحدد الملفات اللي فيها الكلاسات! Tailwind v4 بقى يكتشف الملفات لوحده. حتى لو عندك ملفات في .gitignore هيتجاهلها تلقائياً:

/node_modules
/coverage
/.next/
/build

تحسينات على القيم التلقائية#

Tailwind v4 بقى يدعم قيم مخصصة على الفور بدون ما تحتاج تعمل تخصيص!

مثال عملي:#

<div class="grid grid-cols-15">
  <!-- محتوى -->
</div>

الكود ده هيعمل grid بـ 15 عمود رغم إن Tailwind أصلاً بيدعم لغاية 12 عمود بس!

كيف يعمل؟#

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

/* محتاج تعمل تخصيص */
@layer utilities {
  .grid-cols-15 {
    grid-template-columns: repeat(15, minmax(0, 1fr));
  }
}

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

<!-- شغال على طول بدون تخصيص! -->
<div class="grid grid-cols-15">15 عمود</div>
<div class="grid grid-cols-20">20 عمود</div>
<div class="grid grid-cols-25">25 عمود</div>

أمثلة أخرى:#

<!-- Spacing مخصص -->
<div class="p-15">padding 15</div>
<div class="m-20">margin 20</div>

<!-- Font size مخصص -->
<div class="text-15">font size 15</div>
<div class="text-25">font size 25</div>

<!-- Width مخصص -->
<div class="w-15">width 15</div>
<div class="w-85">width 85</div>

مميزات القيم التلقائية:#

1. مرونة كاملة#

• أي رقم تقدر تستخدمه
• مش محتاج تخصيص مسبق

2. أداء محسن#

• القيم بتتولد تلقائياً
• مش محتاج ملفات CSS كبيرة

3. سهولة الاستخدام#

• اكتب الرقم اللي عايزه
• شغال على طول

دعم Container Queries#

Container Queries هي تقنية جديدة في CSS بتخليك تعمل responsive design بناءً على حجم العنصر نفسه مش حجم الشاشة. Tailwind v4 بقى يدعمها بشكل كامل!

ما هي Container Queries؟#

المشكلة القديمة:

• Responsive design كان يعتمد على حجم الشاشة فقط
• لو عندك sidebar ضيق، المحتوى مش بيتكيف معه

الحل الجديد:

• Responsive design يعتمد على حجم العنصر الأب
• كل عنصر بيتكيف مع المساحة المتاحة له

كيف تعمل في Tailwind v4:#

الطريقة الأساسية:#

<!-- العنصر الأب - مرجع للقياس -->
<div class="@container">
  <!-- العنصر اللي هيتبدل حسب حجم الأب -->
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <div class="bg-blue-500 p-4">عمود 1</div>
    <div class="bg-green-500 p-4">عمود 2</div>
    <div class="bg-red-500 p-4">عمود 3</div>
    <div class="bg-yellow-500 p-4">عمود 4</div>
  </div>
</div>

كيف يشتغل:#

• @container: يجعل العنصر مرجع للقياس
• @sm: عندما يكون عرض الكونتينر >= 640px
• @lg: عندما يكون عرض الكونتينر >= 1024px

أمثلة عملية:#

1. Sidebar متغير العرض:#

<div class="flex">
  <!-- Sidebar قابل للتغيير -->
  <div class="w-64 @container bg-gray-100 p-4">
    <div class="grid grid-cols-1 @sm:grid-cols-2">
      <div class="bg-white p-2 rounded">عنصر 1</div>
      <div class="bg-white p-2 rounded">عنصر 2</div>
    </div>
  </div>
  
  <!-- المحتوى الرئيسي -->
  <div class="flex-1 p-4">
    محتوى الصفحة
  </div>
</div>

2. Card متغير الحجم:#

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- Card صغير -->
  <div class="@container bg-white rounded-lg shadow p-4">
    <div class="flex flex-col @sm:flex-row items-center gap-2">
      <div class="w-8 h-8 bg-blue-500 rounded"></div>
      <div class="text-center @sm:text-left">
        <h3 class="font-bold">عنوان</h3>
        <p class="text-sm text-gray-600">وصف</p>
      </div>
    </div>
  </div>
  
  <!-- Card كبير -->
  <div class="@container bg-white rounded-lg shadow p-4">
    <div class="flex flex-col @sm:flex-row items-center gap-2">
      <div class="w-8 h-8 bg-green-500 rounded"></div>
      <div class="text-center @sm:text-left">
        <h3 class="font-bold">عنوان آخر</h3>
        <p class="text-sm text-gray-600">وصف آخر</p>
      </div>
    </div>
  </div>
</div>

3. Navigation متغير:#

<nav class="@container bg-gray-800 text-white p-4">
  <div class="flex flex-col @sm:flex-row @lg:flex-row items-center gap-4">
    <div class="text-xl font-bold">Logo</div>
    
    <!-- القائمة -->
    <div class="flex flex-col @sm:flex-row gap-2 @lg:gap-4">
      <a href="#" class="hover:text-blue-300">الرئيسية</a>
      <a href="#" class="hover:text-blue-300">الخدمات</a>
      <a href="#" class="hover:text-blue-300">اتصل بنا</a>
    </div>
    
    <!-- زر تسجيل الدخول -->
    <button class="bg-blue-500 px-4 py-2 rounded @sm:ml-auto">
      تسجيل الدخول
    </button>
  </div>
</nav>

مقارنة مع Media Queries:#

الطريقة القديمة - Media Queries:#

/* يعتمد على حجم الشاشة */
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

الطريقة الجديدة - Container Queries:#

<!-- يعتمد على حجم العنصر الأب -->
<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-3">
    <!-- محتوى -->
  </div>
</div>

مميزات Container Queries:#

1. مرونة أكبر#

• كل عنصر بيتكيف مع مساحته
• مش محتاج تعرف حجم الشاشة

2. إعادة استخدام أفضل#

• نفس الكود يعمل في أماكن مختلفة
• كلاس واحد لكل الحالات

3. أداء محسن#

• أقل CSS code
• تحميل أسرع

4. صيانة أسهل#

• تعديل واحد يطبق على كل مكان
• كود أكثر تنظيماً

نقاط التوقف (Breakpoints):#

<div class="@container">
  <div class="
    grid grid-cols-1 
    @sm:grid-cols-2    <!-- >= 640px -->
    @md:grid-cols-3    <!-- >= 768px -->
    @lg:grid-cols-4    <!-- >= 1024px -->
    @xl:grid-cols-5    <!-- >= 1280px -->
    @2xl:grid-cols-6   <!-- >= 1536px -->
  ">
    <!-- محتوى -->
  </div>
</div>

مثال متقدم - Dashboard:#

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
  <!-- Widget صغير -->
  <div class="@container bg-white rounded-lg shadow p-4">
    <div class="flex flex-col @sm:flex-row items-center gap-3">
      <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
        📊
      </div>
      <div class="text-center @sm:text-left">
        <h3 class="font-semibold">المبيعات</h3>
        <p class="text-2xl font-bold text-blue-600">$12,345</p>
      </div>
    </div>
  </div>
  
  <!-- Widget متوسط -->
  <div class="@container bg-white rounded-lg shadow p-4">
    <div class="flex flex-col @sm:flex-row items-center gap-3">
      <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
        👥
      </div>
      <div class="text-center @sm:text-left">
        <h3 class="font-semibold">المستخدمين</h3>
        <p class="text-2xl font-bold text-green-600">1,234</p>
      </div>
    </div>
  </div>
  
  <!-- Widget كبير -->
  <div class="@container bg-white rounded-lg shadow p-4">
    <div class="flex flex-col @sm:flex-row items-center gap-3">
      <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
        📈
      </div>
      <div class="text-center @sm:text-left">
        <h3 class="font-semibold">النمو</h3>
        <p class="text-2xl font-bold text-purple-600">+23%</p>
      </div>
    </div>
  </div>
</div>

تحسينات على التحويلات ثلاثية الأبعاد#

بقى فيه دعم أفضل للتحويلات ثلاثية الأبعاد:

• rotate-x-* - دوران حول المحور X
• rotate-y-* - دوران حول المحور Y
• scale-z-* - تكبير/تصغير على المحور Z

إزاي تحدث للنسخة الجديدة؟#

الموضوع بسيط جداً - أمر واحد يكفي:

npx @tailwindcss/upgrade@next

خلاصة#

Tailwind CSS v4 جاب تطويرات جامدة جداً:

1. أداء أسرع بمراحل - التحديث بقى فوري تقريباً
2. سهولة في التخصيص - كل حاجة في ملف CSS واحد
3. دعم تقنيات حديثة - OKLCH و Container Queries
4. تثبيت أبسط - سطر واحد يكفي
5. اكتشاف تلقائي للملفات - مش محتاج تحدد حاجة
6. مرونة أكتر - قيم مخصصة على الفور

النسخة الجديدة دي هتخلي الشغل أسرع وأسهل، وهتدعم كل التقنيات الحديثة اللي محتاجينها في تطوير المواقع دلوقتي.

Join our whatsapp group here
My Channel here