وضع Tailwind CSS الداكن وتهيئة السمة: بادئة dark وتوجيه @theme

Q: ما الفرق بين darkMode: 'class' و darkMode: 'media'؟

تتبع استراتيجية 'media' استعلام الوسائط prefers-color-scheme الخاص بالنظام تلقائيًا، ولا يمكن للمستخدم تبديلها يدويًا. بينما تتطلب استراتيجية 'class' تبديل فئة dark على عنصر <html> يدويًا، وهو مناسب للسيناريوهات التي يُوفر فيها زر تبديل.

Q: ما الفرق بين توجيه @theme و tailwind.config؟

يُعرّف tailwind.config السمات باستخدام كائنات JavaScript ويحتاج إلى ملف تكوين. بينما يستخدم توجيه @theme بنية المتغيرات الأصلية في CSS، ويُعرَّف مباشرة في CSS. وهو ميزة جديدة في Tailwind v4 والنهج المُوصى به.

Q: كيف أستخدم صورًا مختلفة في الوضع الداكن؟

استخدم بادئة dark: مع hidden و block . على سبيل المثال، <img class="block dark:hidden" src="light.png"> و <img class="hidden dark:block" src="dark.png"> .

الوضع الداكن (dark:)

يستخدم Tailwind بادئة dark: لتحديد أنماط الوضع الداكن، مع دعم استراتيجيتي media و class.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض الوضع الداكن</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class'
    }
  </script>
</head>
<body class="min-h-screen bg-white dark:bg-gray-900 transition-colors">
  <div class="max-w-4xl mx-auto p-8 space-y-8">
    <!-- زر تبديل الوضع الداكن -->
    <div class="flex justify-end">
      <button onclick="document.documentElement.classList.toggle('dark')"
              class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
        تبديل الوضع الداكن
      </button>
    </div>

    <!-- ألوان النصوص -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h3 class="text-gray-900 dark:text-white font-semibold text-lg mb-4">ألوان النصوص</h3>
      <p class="text-gray-600 dark:text-gray-300">
        يظهر هذا النص باللون الرمادي الداكن في الوضع الفاتح والرمادي الفاتح في الوضع الداكن.
      </p>
      <p class="text-blue-600 dark:text-blue-400 mt-2">
        تتكيف ألوان الروابط أيضًا حسب الوضع.
      </p>
    </div>

    <!-- مكونات البطاقات -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-gray-700/50 p-6">
        <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
          <span class="text-blue-600 dark:text-blue-400 text-xl">🎨</span>
        </div>
        <h4 class="text-gray-900 dark:text-white font-semibold mb-2">تكيف السمة</h4>
        <p class="text-gray-600 dark:text-gray-400">تتكيف خلفيات البطاقات والظلال وألوان النصوص جميعها مع الوضع الداكن.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-gray-700/50 p-6">
        <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
          <span class="text-green-600 dark:text-green-400 text-xl">✨</span>
        </div>
        <h4 class="text-gray-900 dark:text-white font-semibold mb-2">تحولات سلسة</h4>
        <p class="text-gray-600 dark:text-gray-400">مدمج مع transition-colors للتبديل السلس للألوان.</p>
      </div>
    </div>

    <!-- عناصر النماذج -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h3 class="text-gray-900 dark:text-white font-semibold mb-4">عناصر النماذج</h3>
      <div class="space-y-4">
        <input type="text" placeholder="حقل الإدخال"
               class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
        <button class="w-full p-3 bg-blue-600 dark:bg-blue-500 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 transition-colors">
          زر الإرسال
        </button>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة @media (prefers-color-scheme: dark) أو إضافة فئات .dark يدويًا مع العديد من قواعد CSS، بينما يستخدم Tailwind بادئات مثل dark:bg-gray-900 dark:text-white للتصريح المباشر.

💡 نصيحة: تتطلب استراتيجية darkMode: 'class' تبديل فئة dark على عنصر <html>. بينما تتبع استراتيجية darkMode: 'media' تفضيلات النظام تلقائيًا.

السمة المخصصة (tailwind.config)

يمكنك توسيع أو تجاوز السمة الافتراضية من خلال ملف tailwind.config، لإضافة ألوان وخطوط ومسافات مخصصة والمزيد.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض السمة المخصصة</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: {
              50: '#eff6ff',
              100: '#dbeafe',
              200: '#bfdbfe',
              300: '#93c5fd',
              400: '#60a5fa',
              500: '#3b82f6',
              600: '#2563eb',
              700: '#1d4ed8',
              800: '#1e40af',
              900: '#1e3a8a',
            },
            accent: '#f59e0b',
            brand: '#8b5cf6',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            display: ['Poppins', 'sans-serif'],
          },
          spacing: {
            '128': '32rem',
            '144': '36rem',
          },
          borderRadius: {
            '4xl': '2rem',
          },
        },
      },
    }
  </script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- ألوان مخصصة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ألوان مخصصة</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-20 h-20 bg-primary-500 rounded-lg flex items-center justify-center text-white text-xs">primary-500</div>
        <div class="w-20 h-20 bg-primary-600 rounded-lg flex items-center justify-center text-white text-xs">primary-600</div>
        <div class="w-20 h-20 bg-primary-700 rounded-lg flex items-center justify-center text-white text-xs">primary-700</div>
        <div class="w-20 h-20 bg-accent rounded-lg flex items-center justify-center text-white text-xs">accent</div>
        <div class="w-20 h-20 bg-brand rounded-lg flex items-center justify-center text-white text-xs">brand</div>
      </div>
    </div>

    <!-- خطوط مخصصة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">خطوط مخصصة</h3>
      <p class="font-sans text-lg mb-2">font-sans: استخدام خط Inter</p>
      <p class="font-display text-lg">font-display: استخدام خط Poppins</p>
    </div>

    <!-- مسافات مخصصة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">مسافات مخصصة</h3>
      <div class="space-y-2">
        <div class="h-4 bg-primary-200 rounded" style="width: 32rem;">
          <span class="text-xs">w-128 (32rem)</span>
        </div>
        <div class="h-4 bg-primary-300 rounded" style="width: 36rem;">
          <span class="text-xs">w-144 (36rem)</span>
        </div>
      </div>
    </div>

    <!-- نصف قطر حدود مخصص -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">نصف قطر حدود مخصص</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-brand rounded-4xl flex items-center justify-center text-white text-xs">rounded-4xl</div>
        <div class="w-24 h-24 bg-accent rounded-full flex items-center justify-center text-white text-xs">rounded-full</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعريف العديد من المتغيرات والفئات في CSS، بينما يوسّع Tailwind السمة من خلال خيار extend في tailwind.config، مما يُنشئ فئات الأداة المقابلة تلقائيًا.

توجيه @theme (ميزة جديدة في الإصدار v4)

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

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض توجيه @theme</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --color-primary-50: #eff6ff;
      --color-primary-100: #dbeafe;
      --color-primary-200: #bfdbfe;
      --color-primary-300: #93c5fd;
      --color-primary-400: #60a5fa;
      --color-primary-500: #3b82f6;
      --color-primary-600: #2563eb;
      --color-primary-700: #1d4ed8;
      --color-primary-800: #1e40af;
      --color-primary-900: #1e3a8a;

      --color-accent: #f59e0b;
      --color-brand: #8b5cf6;

      --font-sans: 'Inter', system-ui, sans-serif;
      --font-display: 'Poppins', sans-serif;

      --spacing-128: 32rem;
      --spacing-144: 36rem;

      --radius-4xl: 2rem;
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- ألوان مُعرَّفة باستخدام @theme -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ألوان مُعرَّفة باستخدام @theme</h3>
      <div class="flex flex-wrap gap-4">
        <div class="w-20 h-20 bg-primary-500 rounded-lg flex items-center justify-center text-white text-xs">primary-500</div>
        <div class="w-20 h-20 bg-primary-600 rounded-lg flex items-center justify-center text-white text-xs">primary-600</div>
        <div class="w-20 h-20 bg-accent rounded-lg flex items-center justify-center text-white text-xs">accent</div>
        <div class="w-20 h-20 bg-brand rounded-lg flex items-center justify-center text-white text-xs">brand</div>
      </div>
    </div>

    <!-- خطوط مُعرَّفة باستخدام @theme -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">خطوط مُعرَّفة باستخدام @theme</h3>
      <p class="font-sans text-lg mb-2">font-sans: استخدام خط Inter</p>
      <p class="font-display text-lg">font-display: استخدام خط Poppins</p>
    </div>

    <!-- مسافات مُعرَّفة باستخدام @theme -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">مسافات مُعرَّفة باستخدام @theme</h3>
      <div class="space-y-2">
        <div class="h-4 bg-primary-200 rounded w-128">
          <span class="text-xs">w-128 (32rem)</span>
        </div>
        <div class="h-4 bg-primary-300 rounded w-144">
          <span class="text-xs">w-144 (36rem)</span>
        </div>
      </div>
    </div>

    <!-- نصف قطر حدود مُعرَّف باستخدام @theme -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">نصف قطر حدود مُعرَّف باستخدام @theme</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-brand rounded-4xl flex items-center justify-center text-white text-xs">rounded-4xl</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي تعريف السمات باستخدام كائنات JavaScript في tailwind.config.js، بينما يستخدم توجيه @theme في Tailwind v4 بنية المتغيرات الأصلية في CSS، وهو أكثر حدسية ومتوافقًا مع متغيرات CSS الأصلية.

💡 نصيحة: تتبع أسماء المتغيرات في توجيه @theme اصطلاحات التسمية مثل --color-* و --font-* و --spacing-* و --radius-* وغيرها. يُنشئ Tailwind تلقائيًا فئات الأداة المقابلة.

تكامل متغيرات CSS الأصلية مع Tailwind

يدعم Tailwind v4 استخدام متغيرات CSS الأصلية مباشرة، دون الحاجة إلى ملف تكوين.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تكامل المتغيرات الأصلية في CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    :root {
      --main-bg: #f8fafc;
      --card-bg: #ffffff;
      --text-primary: #1e293b;
      --text-secondary: #64748b;
      --border-color: #e2e8f0;
      --spacing-section: 2rem;
    }

    .dark {
      --main-bg: #0f172a;
      --card-bg: #1e293b;
      --text-primary: #f1f5f9;
      --text-secondary: #94a3b8;
      --border-color: #334155;
    }
  </style>
</head>
<body class="min-h-screen p-8" style="background-color: var(--main-bg);">
  <div class="max-w-4xl mx-auto space-y-8" style="gap: var(--spacing-section);">
    <!-- تبديل الوضع الداكن -->
    <div class="flex justify-end">
      <button onclick="document.documentElement.classList.toggle('dark')"
              class="p-2 rounded-lg" style="background-color: var(--card-bg); color: var(--text-primary);">
        تبديل الوضع الداكن
      </button>
    </div>

    <!-- بطاقة تستخدم متغيرات CSS -->
    <div class="rounded-lg shadow p-6" style="background-color: var(--card-bg); border: 1px solid var(--border-color);">
      <h3 class="font-semibold text-lg mb-4" style="color: var(--text-primary);">متغيرات CSS الأصلية</h3>
      <p style="color: var(--text-secondary);">
        تستخدم هذه البطاقة متغيرات CSS الأصلية لتعريف الألوان، المُطبّقة عبر خاصية style.
      </p>
    </div />

    <!-- استخدام مختلط -->
    <div class="rounded-lg shadow p-6 bg-white dark:bg-gray-800">
      <h3 class="font-semibold text-lg mb-4 text-gray-900 dark:text-white">استخدام مختلط</h3>
      <p class="text-gray-600 dark:text-gray-300 mb-4">
        يمكنك استخدام فئات Tailwind ومتغيرات CSS معًا.
      </p>
      <div class="flex gap-4">
        <div class="w-16 h-16 rounded-lg" style="background-color: var(--text-primary);"></div>
        <div class="w-16 h-16 rounded-lg bg-blue-500"></div>
        <div class="w-16 h-16 rounded-lg" style="background-color: var(--border-color);"></div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

💡 نصيحة: تناسب متغيرات CSS الأصلية القيم التي تحتاج إلى تعديل ديناميكي وقت التشغيل (مثل تبديل السمة)، بينما تُعد فئات Tailwind مثالية للأنماط الثابتة.

مقدمة عن نظام الإضافات

يمكن لإضافات Tailwind توسيع وظائف الإطار من خلال إضافة فئات أداة مخصصة أو متغيرات أو أنماط أساسية.

مثال

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عرض نظام الإضافات</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    const plugin = tailwind.plugin;

    // إضافة مخصصة: إضافة فئات أداة لتدرج النص
    const textGradientPlugin = plugin(function({ addUtilities }) {
      addUtilities({
        '.text-gradient-blue': {
          'background': 'linear-gradient(to right, #3b82f6, #8b5cf6)',
          '-webkit-background-clip': 'text',
          '-webkit-text-fill-color': 'transparent',
          'background-clip': 'text',
        },
        '.text-gradient-red': {
          'background': 'linear-gradient(to right, #ef4444, #f97316)',
          '-webkit-background-clip': 'text',
          '-webkit-text-fill-color': 'transparent',
          'background-clip': 'text',
        },
      });
    });

    tailwind.config = {
      plugins: [textGradientPlugin],
    }
  </script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- فئات الأداة المضافة بواسطة الإضافة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">إضافة مخصصة: تدرج النص</h3>
      <p class="text-4xl font-bold text-gradient-blue mb-4">نص متدرج أزرق</p>
      <p class="text-4xl font-bold text-gradient-red">نص متدرج أحمر</p>
    </div>

    <!-- أمثلة على الإضافات الشائعة من طرف ثالث -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">إضافات شائعة</h3>
      <div class="space-y-4">
        <div class="p-4 bg-gray-50 rounded-lg">
          <h4 class="font-medium text-gray-900">@tailwindcss/typography</h4>
          <p class="text-gray-600 text-sm">يوفر أنماط طباعة جميلة للمحتوى الطويل باستخدام فئة prose.</p>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg">
          <h4 class="font-medium text-gray-900">@tailwindcss/forms</h4>
          <p class="text-gray-600 text-sm">يوفر إعادة تعيين الأنماط الأساسية لعناصر النماذج، لضمان سلوك متسق عبر المتصفحات.</p>
        </div>
        <div class="p-4 bg-gray-50 rounded-lg">
          <h4 class="font-medium text-gray-900">@tailwindcss/aspect-ratio</h4>
          <p class="text-gray-600 text-sm">يوفر فئات أداة نسبة العرض إلى الارتفاع للتحكم في نسب العناصر.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة فئات CSS يدويًا واستيرادها، بينما تتكامل إضافات Tailwind تلقائيًا في عملية البناء من خلال واجهات برمجة مثل addUtilities و addComponents و addBase.

⚠️ ملاحظة: تغيرت واجهة برمجة الإضافات في Tailwind v4. يُوصى باستخدام النهج الأصلية في CSS لتوسيع الوظائف. يمكن لتوجيه @theme و @layer استبدال معظم حالات استخدام الإضافات.

❓ أسئلة شائعة

س ما الفرق بين darkMode: 'class' و darkMode: 'media'؟

ج تتبع استراتيجية 'media' استعلام الوسائط prefers-color-scheme الخاص بالنظام تلقائيًا، ولا يمكن للمستخدم تبديلها يدويًا. بينما تتطلب استراتيجية 'class' تبديل فئة dark على عنصر <html> يدويًا، وهو مناسب للسيناريوهات التي يُوفر فيها زر تبديل.

س ما الفرق بين توجيه @theme و tailwind.config؟

ج يُعرّف tailwind.config السمات باستخدام كائنات JavaScript ويحتاج إلى ملف تكوين. بينما يستخدم توجيه @theme بنية المتغيرات الأصلية في CSS، ويُعرَّف مباشرة في CSS. وهو ميزة جديدة في Tailwind v4 والنهج المُوصى به.

س كيف أستخدم صورًا مختلفة في الوضع الداكن؟

ج استخدم بادئة dark: مع hidden و block. على سبيل المثال، <img class="block dark:hidden" src="light.png"> و <img class="hidden dark:block" src="dark.png">.

س كيف أختار بين متغيرات CSS وفئات Tailwind؟

ج فضّل فئات Tailwind للأنماط الثابتة، واستخدم متغيرات CSS للقيم التي تحتاج إلى تعديل ديناميكي وقت التشغيل. يمكن دمج كليهما، مثل style="color: var(--text-primary)".

📖 ملخص

تُعرّف بادئة dark: أنماط الوضع الداكن، مع دعم استراتيجيتي media و class
يوسّع خيار theme.extend في tailwind.config السمة الافتراضية
توجيه @theme هو ميزة جديدة في Tailwind v4 تستخدم بنية المتغيرات الأصلية في CSS لتعريف السمات
يمكن دمج متغيرات CSS الأصلية مع فئات Tailwind عبر خاصية style
يوسّن نظام الإضافات الوظائف من خلال واجهات برمجة مثل addUtilities و addComponents
يُتيح الوضع الداكن مع transition-colors تحولات ألوان سلسة

📝 تمارين

⭐ أنشئ صفحة تسجيل دخول تدعم الوضع الداكن، تتضمن حقول إدخال وأزرار و بطاقات، باستخدام بادئة dark: لتكيف جميع العناصر
⭐⭐ استخدم توجيه @theme لتخصيص سمة العلامة التجارية (بما في ذلك اللون الأساسي واللون الثانوي والخطوط)، وأنشئ صفحة عرض
⭐⭐⭐ أنشئ مُبدّل سمات يدعم الأوضاع الفاتح/الداكن/النظام، باستخدام متغيرات CSS للتبديل الديناميكي لألوان السمة