Tailwind CSS v4 والميزات الحديثة

Tailwind CSS v4 والميزات الحديثة

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

التغييرات الرئيسية في Tailwind v4

يجلب Tailwind v4 تغييرات معمارية أساسية تحسن الأداء وتجربة المطور.

تكوين CSS أولاً

أكبر تغيير في v4 هو التحول من ملفات تكوين JavaScript إلى تكوين يعتمد على CSS باستخدام متغيرات CSS وتوجيه @theme الجديد.

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
  ]
}

/* styles.css (v4) */
@import "tailwindcss";

@theme {
  /* تعريف الألوان المخصصة */
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a8a;

  /* تعريف المسافات المخصصة */
  --spacing-128: 32rem;
  --spacing-144: 36rem;

  /* تعريف عائلات الخطوط */
  --font-family-sans: Inter, system-ui, sans-serif;

  /* نقاط الكسر المخصصة */
  --breakpoint-3xl: 1920px;

  /* الرسوم المتحركة المخصصة */
  --animate-slide-in: slide-in 0.3s ease-out;
}

/* تعريف إطارات رئيسية مخصصة */
@keyframes slide-in {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* استخدام القيم المخصصة */
.hero {
  background-color: theme(--color-brand-500);
  padding: theme(--spacing-128);
  font-family: theme(--font-family-sans);
}

توجيه @theme

يعد توجيه @theme قلب تكوين v4. يسمح لك بتعريف رموز التصميم المخصصة باستخدام بناء جملة متغيرات CSS.

@import "tailwindcss";

@theme {
  /* الألوان - توليد لوحات كاملة تلقائيًا */
  --color-primary-*: initial; /* يولد primary-50 حتى primary-950 */
  --color-primary-500: #8b5cf6;

  /* أو تعريف درجات محددة */
  --color-accent-light: #fbbf24;
  --color-accent-DEFAULT: #f59e0b;
  --color-accent-dark: #d97706;

  /* مقياس المسافات */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* الطباعة */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  --font-family-display: "Playfair Display", serif;
  --font-family-body: "Inter", sans-serif;

  /* نصف قطر الحدود */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* الظلال */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* نقاط الكسر */
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1280px;

  /* طبقات Z-index */
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
}

/* الآن استخدمها في الأدوات */
.btn-primary {
  background-color: theme(--color-primary-500);
  padding: theme(--spacing-md) theme(--spacing-lg);
  border-radius: theme(--radius-md);
  font-family: theme(--font-family-body);
}

نظام الألوان الجديد

يقدم Tailwind v4 نظام ألوان محسّن مع توليد لوحة تلقائي أفضل ومعالجة ألوان محسّنة.

@theme {
  /* عرّف درجة واحدة فقط، احصل على اللوحة الكاملة */
  --color-brand-*: initial;
  --color-brand-500: #3b82f6;
}

/* هذا يولد تلقائيًا: */
/* brand-50, brand-100, brand-200, ..., brand-950 */

<!-- استخدم اللوحة المولدة -->
<div class="bg-brand-50 text-brand-900">
  خلفية فاتحة مع نص داكن
</div>

<button class="bg-brand-500 hover:bg-brand-600">
  زر أساسي
</button>

<!-- بناء جملة v3 (لا يزال يعمل) -->
<div class="bg-blue-500/50">عتامة 50٪</div>

<!-- بناء جملة v4 المحسّن مع color-mix CSS -->
<div class="bg-blue-500 bg-opacity-50">عتامة 50٪</div>

<!-- عتامة ديناميكية مع متغيرات CSS -->
<div style="--opacity: 0.75" class="bg-blue-500 bg-opacity-[--opacity]">
  عتامة ديناميكية
</div>

الأداء المحسّن

أعيد بناء Tailwind v4 في Rust (عبر محرك Lightning CSS)، مما أدى إلى أوقات بناء أسرع بشكل كبير.

/* أوقات بناء مشروع كبير نموذجي */

// Tailwind v3
البناء الأولي: 3.2 ثانية
إعادة البناء (HMR): 180 ميلي ثانية
بناء الإنتاج: 8.5 ثانية

// Tailwind v4
البناء الأولي: 320 ميلي ثانية  (أسرع بـ 10 مرات)
إعادة البناء (HMR): 18 ميلي ثانية   (أسرع بـ 10 مرات)
بناء الإنتاج: 850 ميلي ثانية  (أسرع بـ 10 مرات)

/* مقارنة حجم الملف */

// v3 CSS التطوير
غير مضغوط: 3.8 ميجابايت

// v4 CSS التطوير
غير مضغوط: 3.2 ميجابايت  (أصغر بـ 16٪)

// كلاهما يضغط إلى ~30 كيلوبايت في الإنتاج بعد PurgeCSS

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

لدى Tailwind v4 دعم من الدرجة الأولى لاستعلامات حاويات CSS، مما يسمح بالتصميم المستجيب بناءً على حجم الحاوية الأم بدلاً من حجم منفذ العرض.

<!-- تعريف حاوية -->
<div class="@container">
  <!-- يمكن للعناصر الفرعية الاستعلام عن حجم الحاوية -->
  <div class="
    grid grid-cols-1
    @md:grid-cols-2
    @lg:grid-cols-3
    @xl:grid-cols-4
  ">
    <div class="p-4 bg-white rounded">بطاقة 1</div>
    <div class="p-4 bg-white rounded">بطاقة 2</div>
    <div class="p-4 bg-white rounded">بطاقة 3</div>
  </div>
</div>

<!-- حاويات مسماة -->
<div class="@container/sidebar">
  <div class="
    text-sm
    @md/sidebar:text-base
    @lg/sidebar:text-lg
  ">
    نص مستجيب بناءً على حاوية الشريط الجانبي
  </div>
</div>

<!-- استعلام حاوية للبطاقة -->
<article class="@container">
  <div class="flex flex-col @md:flex-row gap-4">
    <img
      src="image.jpg"
      alt="المنتج"
      class="
        w-full @md:w-48
        h-48 object-cover
        rounded
      "
    >
    <div class="flex-1">
      <h3 class="text-lg @md:text-xl font-bold">
        عنوان المنتج
      </h3>
      <p class="text-sm @md:text-base text-gray-600">
        وصف يتكيف مع عرض الحاوية
      </p>
    </div>
  </div>
</article>

@starting-style للرسوم المتحركة للدخول

CSS @starting-style مدعوم الآن في v4، مما يجعل رسوم متحركة الدخول أسهل بدون JavaScript.

/* تعريف الأنماط الأولية للعناصر عندما تدخل DOM */
@starting-style {
  .modal {
    opacity: 0;
    transform: scale(0.95);
  }
}

.modal {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s, transform 0.3s;
}

<!-- النافذة المنبثقة تتحرك تلقائيًا عند الإضافة إلى DOM -->
<div class="modal fixed inset-0 z-50 flex items-center justify-center">
  <div class="bg-white rounded-lg shadow-xl p-6 max-w-md">
    <h2>محتوى النافذة المنبثقة</h2>
    <p>هذه النافذة المنبثقة تتحرك تلقائيًا!</p>
  </div>
</div>

تحديد موضع المرساة

يدعم Tailwind v4 تحديد موضع مرساة CSS لتلميحات الأدوات والقوائم المنسدلة والنوافذ المنبثقة بدون JavaScript.

<!-- تعريف عنصر المرساة -->
<button
  id="menu-button"
  class="px-4 py-2 bg-blue-600 text-white rounded"
  style="anchor-name: --menu-anchor"
>
  فتح القائمة
</button>

<!-- وضع القائمة نسبيًا للمرساة -->
<div
  class="
    absolute
    bg-white
    rounded-lg
    shadow-lg
    p-2
  "
  style="
    position-anchor: --menu-anchor;
    inset-area: bottom;
    margin-block-start: 0.5rem;
  "
>
  <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded">عنصر 1</a>
  <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded">عنصر 2</a>
  <a href="#" class="block px-4 py-2 hover:bg-gray-100 rounded">عنصر 3</a>
</div>

الانتقال من v3 إلى v4

يتطلب الانتقال من Tailwind v3 إلى v4 بعض التعديلات، لكن فئات الأدوات الأساسية تظل متوافقة إلى حد كبير.

/* 1. تحديث package.json */
{
  "dependencies": {
    "tailwindcss": "^4.0.0"
  }
}

/* 2. تحويل tailwind.config.js إلى CSS */
// قبل (v3): tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6'
      }
    }
  }
}

// بعد (v4): styles.css
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
}

/* 3. تحديث بيانات الاستيراد */
// قبل (v3)
@tailwind base;
@tailwind components;
@tailwind utilities;

// بعد (v4)
@import "tailwindcss";

/* 4. تحديث الإضافات (معظمها الآن مدمج) */
// قبل (v3)
plugins: [
  require('@tailwindcss/forms'),
  require('@tailwindcss/typography'),
]

// بعد (v4) - العديد من الإضافات مدمجة الآن
// لا حاجة لإضافات للنماذج والطباعة، إلخ.

وضع التوافق v4

يتضمن Tailwind v4 وضع توافق للانتقال التدريجي من v3.

// package.json
{
  "dependencies": {
    "tailwindcss": "^4.0.0"
  }
}

// احتفظ بملف تكوين v3 الخاص بك
// tailwind.config.js (يعمل في وضع توافق v4)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#3b82f6'
      }
    }
  }
}

// styles.css - استخدم كلاً من البناء القديم والجديد
@import "tailwindcss";

/* واردات نمط v3 لا تزال تعمل */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* امزج مع @theme v4 */
@theme {
  --color-accent: #f59e0b;
}

جعل كود Tailwind مقاومًا للمستقبل

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a8a',
        }
      },
      spacing: {
        '128': '32rem',
      },
      fontFamily: {
        display: ['Playfair Display', 'serif'],
      }
    }
  }
}

الخلاصة

يجلب Tailwind CSS v4 تحسينات كبيرة وميزات CSS حديثة:

• تكوين CSS أولاً: استخدم توجيه @theme بدلاً من تكوين JavaScript
• بناء أسرع بـ 10 مرات: أعيد البناء بلغة Rust لمكاسب أداء كبيرة
• نظام ألوان جديد: توليد لوحة تلقائي من درجات واحدة
• استعلامات الحاويات: دعم من الدرجة الأولى مع بادئة @ (@md:, @lg:)
• ميزات CSS حديثة: @starting-style، وتحديد موضع المرساة، والمزيد
• تجربة مطور أفضل: HMR أسرع، أخطاء أفضل، حزم أصغر
• مسار الانتقال: وضع التوافق للانتقال التدريجي من v3

في الدرس التالي، سنبني صفحة هبوط كاملة من الصفر، مطبقين جميع مفاهيم Tailwind التي تعلمناها خلال الدورة.