تصميم Tailwind CSS المتجاوب: نظام نقاط التوقف واستراتيجية الهاتف أولاً

Q: كيف أخفي عنصراً عند حجم شاشة معين؟

استخدم مزيجاً من hidden و block . على سبيل المثال، hidden md:block يخفي على الشاشات الصغيرة ويظهر على الشاشات المتوسطة؛ block md:hidden يظهر على الشاشات الصغيرة ويختفي على الشاشات المتوسطة.

Q: ما الفرق بين استعلامات الحاوية واستعلامات الوسائط؟

تستجيب استعلامات الوسائط ( sm: ، md: ، إلخ) لعرض نافذة العرض؛ تستجيب استعلامات الحاوية ( @container ، @sm: ، إلخ) لعرض الحاوية الأبو. استعلامات الحاوية مناسبة أكثر للمكونات القابلة لإعادة الاستخدام التي تحتاج إلى سلوك متجاوب عبر تخطيطات مختلفة.

Q: كيف أخصص نقاط التوقف؟

في Tailwind v4، استخدم أمر @theme لتخصيص نقاط التوقف. على سبيل المثال، @theme { --breakpoint-tablet: 768px; } ثم استخدم بادئة tablet: .

نظام نقاط التوقف

يوفر Tailwind 5 نقاط توقف افتراضية. يمكنك استخدام بادئات متجاوبة لتطبيق الأنماط على أحجام شاشات مختلفة.

البادئة	الحد الأدنى لعرض	استعلام CSS النموذجي	الأجهزة النموذجية
`sm:`	640px	`@media (min-width: 640px)`	هاتف أفقي
`md:`	768px	`@media (min-width: 768px)`	جهاز لوحي
`lg:`	1024px	`@media (min-width: 1024px)`	حاسوب محمول
`xl:`	1280px	`@media (min-width: 1280px)`	شاشة سطح مكتب
`2xl:`	1536px	`@media (min-width: 1536px)`	شاشة كبيرة

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة استعلامات @media متعددة والحفاظ على الأنماط عبر ملفات مختلفة، بينما يستخدم Tailwind بادئات مثل sm: وmd: ل宣告 الأنماط المتجاوبة مباشرة في HTML.

استراتيجية الهاتف أولاً

يتبنى 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>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- نص متجاوب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">حجم خط متجاوب</h3>
      <p class="text-sm md:text-base lg:text-lg xl:text-xl">
        الشاشات الصغيرة تستخدم text-sm افتراضياً، والشاشات المتوسطة text-base، والشاشات الكبيرة text-lg، والشاشات الكبيرة جداً text-xl
      </p>
    </div>

    <!-- هوامش داخلية متجاوبة -->
    <div class="bg-blue-100 rounded-lg p-2 sm:p-4 md:p-6 lg:p-8">
      <p class="text-center text-blue-800">هوامش داخلية متجاوبة: p-2 → sm:p-4 → md:p-6 → lg:p-8</p>
    </div>

    <!-- إظهار/إخفاء متجاوب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">إظهار/إخفاء متجاوب</h3>
      <div class="block md:hidden bg-red-100 p-4 rounded text-center text-red-700">
        مرئي فقط على الشاشات الصغيرة (block md:hidden)
      </div>
      <div class="hidden md:block bg-green-100 p-4 rounded text-center text-green-700">
        مرئي على الشاشات المتوسطة وما فوق (hidden md:block)
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

💡 نصيحة: يعني الهاتف أولاً أن الأنماط بدون بادئة هي الأساس، وبادئات نقاط التوقف تُستخدم للتحسين. على سبيل المثال، text-sm md:text-lg يعني 14px على الشاشات الصغيرة و18px على الشاشات المتوسطة وما فوق.

البادئة المتجاوبة في الممارسة

يمكن دمج البادئات المتجاوبة مع أي فئة 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>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- تخطيط Flex متجاوب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">تخطيط Flex متجاوب</h3>
      <div class="flex flex-col sm:flex-row gap-4">
        <div class="flex-1 bg-blue-100 p-4 rounded text-center">عنصر 1</div>
        <div class="flex-1 bg-blue-200 p-4 rounded text-center">عنصر 2</div>
        <div class="flex-1 bg-blue-300 p-4 rounded text-center">عنصر 3</div>
      </div>
      <p class="text-sm text-gray-500 mt-2">مكدس عمودياً على الشاشات الصغيرة (flex-col)، أفقي على الشاشات المتوسطة (sm:flex-row)</p>
    </div>

    <!-- أعمدة Grid متجاوبة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أعمدة Grid متجاوبة</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        <div class="bg-green-100 p-4 rounded text-center">1</div>
        <div class="bg-green-200 p-4 rounded text-center">2</div>
        <div class="bg-green-300 p-4 rounded text-center">3</div>
        <div class="bg-green-400 p-4 rounded text-center">4</div>
        <div class="bg-green-500 p-4 rounded text-center text-white">5</div>
        <div class="bg-green-600 p-4 rounded text-center text-white">6</div>
        <div class="bg-green-700 p-4 rounded text-center text-white">7</div>
        <div class="bg-green-800 p-4 rounded text-center text-white">8</div>
      </div>
      <p class="text-sm text-gray-500 mt-2">grid-cols-1 → sm:grid-cols-2 → lg:grid-cols-3 → xl:grid-cols-4</p>
    </div>

    <!-- مسافات متجاوبة -->
    <div class="bg-white rounded-lg shadow p-4 sm:p-6 md:p-8">
      <h3 class="font-semibold mb-2 sm:mb-4 md:mb-6">مسافات متجاوبة</h3>
      <div class="space-y-2 sm:space-y-4 md:space-y-6">
        <div class="bg-purple-100 p-4 rounded">عنصر أ</div>
        <div class="bg-purple-200 p-4 rounded">عنصر ب</div>
        <div class="bg-purple-300 p-4 rounded">عنصر ج</div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة كتل CSS متعددة مثل @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }، بينما ينجز Tailwind الشيء نفسه في سطر واحد باستخدام grid-cols-1 md:grid-cols-2 lg:grid-cols-3.

الصور المتجاوبة

تضمن الصور المتجاوبة عرض الصور بشكل صحيح على أحجام شاشات مختلفة، وتجنب أي تشوه أو تجاوز للحدود.

مثال

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>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- عرض صورة متجاوب -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">عرض صورة متجاوب</h3>
      <img src="https://picsum.photos/1200/400" alt="صورة متجاوبة"
           class="w-full md:w-3/4 lg:w-1/2 mx-auto rounded-lg">
      <p class="text-sm text-gray-500 mt-2 text-center">w-full → md:w-3/4 → lg:w-1/2</p>
    </div>

    <!-- شبكة صور متجاوبة -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">شبكة صور متجاوبة</h3>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-4">
        <img src="https://picsum.photos/300/300?random=1" alt="صورة 1" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=2" alt="صورة 2" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=3" alt="صورة 3" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=4" alt="صورة 4" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=5" alt="صورة 5" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=6" alt="صورة 6" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=7" alt="صورة 7" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=8" alt="صورة 8" class="w-full aspect-square object-cover rounded-lg">
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

💡 نصيحة: استخدم w-full لضمان عدم تجاوز الصور للحاوي الأصلي، مع object-cover للحفاظ على نسبة العرض إلى الارتفاع.

الجداول المتجاوبة

الجداول المتجاوبة يمكنها التمرير أفقياً على الشاشات الصغيرة، مما يمنع ضغط المحتوى.

مثال

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>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto">
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <h3 class="font-semibold mb-4">جدول متجاوب</h3>
      <div class="overflow-x-auto">
        <table class="w-full text-sm md:text-base">
          <thead>
            <tr class="bg-gray-100">
              <th class="p-2 md:p-3 text-right">المعرف</th>
              <th class="p-2 md:p-3 text-right">الاسم</th>
              <th class="p-2 md:p-3 text-right hidden sm:table-cell">البريد الإلكتروني</th>
              <th class="p-2 md:p-3 text-right hidden md:table-cell">الهاتف</th>
              <th class="p-2 md:p-3 text-right">الحالة</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b">
              <td class="p-2 md:p-3">001</td>
              <td class="p-2 md:p-3">أحمد</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">ahmed@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">050-0000-0001</td>
              <td class="p-2 md:p-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">نشط</span></td>
            </tr>
            <tr class="border-b">
              <td class="p-2 md:p-3">002</td>
              <td class="p-2 md:p-3">محمد</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">mohammed@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">050-0000-0002</td>
              <td class="p-2 md:p-3"><span class="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-xs">قيد الانتظار</span></td>
            </tr>
            <tr class="border-b">
              <td class="p-2 md:p-3">003</td>
              <td class="p-2 md:p-3">خالد</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">khaled@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">050-0000-0003</td>
              <td class="p-2 md:p-3"><span class="bg-red-100 text-red-700 px-2 py-1 rounded text-xs">معطل</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="text-sm text-gray-500 mt-4">بعض الأعمدة مخفية على الشاشات الصغيرة؛ الجدول يمرر أفقياً</p>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة استعلامات @media للتحكم في ظهور أعمدة الجدول، بينما يستخدم Tailwind أسماء فئات مثل hidden sm:table-cell للإعلان عنه مباشرة.

استعلامات الحاوية (@container)

تطبق استعلامات الحاوية الأنماط بناءً على حجم الحاوية الأبو وليس حجم نافذة العرض. هذه ميزة جديدة مدعومة في Tailwind v4.

مثال

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>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- أساسيات استعلام الحاوية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">أساسيات استعلام الحاوية</h3>
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- حاوية صغيرة -->
        <div class="@container bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
          <div class="flex flex-col @md:flex-row gap-4">
            <img src="https://picsum.photos/150/150" alt="الصورة الرمزية" class="w-20 h-20 @md:w-24 @md:h-24 rounded-full object-cover">
            <div>
              <h4 class="font-semibold @md:text-lg">اسم المستخدم</h4>
              <p class="text-gray-600 text-sm @md:text-base">هذا مثال على استعلام الحاوية. يتغير التخطيط بناءً على عرض الحاوية الأبو.</p>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2">حاوية صغيرة: تخطيط عمودي</p>
        </div>

        <!-- حاوية كبيرة -->
        <div class="@container bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
          <div class="flex flex-col @md:flex-row gap-4">
            <img src="https://picsum.photos/150/150" alt="الصورة الرمزية" class="w-20 h-20 @md:w-24 @md:h-24 rounded-full object-cover">
            <div class="flex-1">
              <h4 class="font-semibold @md:text-lg">اسم المستخدم</h4>
              <p class="text-gray-600 text-sm @md:text-base">تستخدم استعلامات الحاوية فئة @container وبادئات مثل @md: لتطبيق الأنماط بناءً على حجم الحاوية الأبو.</p>
              <div class="hidden @lg:flex gap-2 mt-2">
                <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs">وسم 1</span>
                <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">وسم 2</span>
              </div>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2">حاوية كبيرة: تخطيط أفقي مع وسوم إضافية</p>
        </div>
      </div>
    </div>

    <!-- بطاقات استعلام الحاوية -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">بطاقات استعلام الحاوية</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=10" alt="صورة البطاقة" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">عنوان البطاقة</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">تسمح استعلامات الحاوية للمكونات بالاستجابة لحجم حاويتها بدلاً من حجم نافذة العرض.</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">اقرأ المزيد</button>
          </div>
        </div>
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=11" alt="صورة البطاقة" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">عنوان البطاقة</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">يسمح هذا للمكونات بالاستجابة بشكل صحيح عبر تخطيطات مختلفة، مما يجعلها أكثر مرونة.</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">اقرأ المزيد</button>
          </div>
        </div>
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=12" alt="صورة البطاقة" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">عنوان البطاقة</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">استخدم فئة @container لتحديد الحاويات، وبادئات مثل @sm: و @md: لتطبيق الأنماط.</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">اقرأ المزيد</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

CSS التقليدي مقابل Tailwind تتطلب استعلامات الحاوية التقليدية كتابة @container (min-width: 400px) { ... }، بينما يستخدم Tailwind فئة @container وبادئات مثل @sm: و@md: للإعلان عنها مباشرة.

💡 نصيحة: تستخدم بادئات نقاط التوقف لاستعلامات الحاوية @xs: (20rem)، @sm: (24rem)، @md: (28rem)، @lg: (32rem)، @xl: (36rem)، @2xl: (42rem).

❓ أسئلة شائعة

س هل ترتيب البادئات المتجاوبة مهم؟

ج نعم. يتبع Tailwind استراتيجية الهاتف أولاً، لذا فإن بادئات نقاط التوقف تنشط من الصغير إلى الكبير. على سبيل المثال، مع text-sm md:text-base lg:text-lg، تتجاوز نقاط التوقف الكبيرة أنماط نقاط التوقف الصغيرة.

س كيف أخفي عنصراً عند حجم شاشة معين؟

ج استخدم مزيجاً من hidden وblock. على سبيل المثال، hidden md:block يخفي على الشاشات الصغيرة ويظهر على الشاشات المتوسطة؛ block md:hidden يظهر على الشاشات الصغيرة ويختفي على الشاشات المتوسطة.

س ما الفرق بين استعلامات الحاوية واستعلامات الوسائط؟

ج تستجيب استعلامات الوسائط (sm:، md:، إلخ) لعرض نافذة العرض؛ تستجيب استعلامات الحاوية (@container، @sm:، إلخ) لعرض الحاوية الأبو. استعلامات الحاوية مناسبة أكثر للمكونات القابلة لإعادة الاستخدام التي تحتاج إلى سلوك متجاوب عبر تخطيطات مختلفة.

س كيف أخصص نقاط التوقف؟

ج في Tailwind v4، استخدم أمر @theme لتخصيص نقاط التوقف. على سبيل المثال، @theme { --breakpoint-tablet: 768px; } ثم استخدم بادئة tablet:.

📖 ملخص

يوفر Tailwind 5 نقاط توقف افتراضية: sm: (640px)، md: (768px)، lg: (1024px)، xl: (1280px)، 2xl: (1536px)
يتبنى استراتيجية الهاتف أولاً حيث الأنماط بدون بادئة هي الأساس وبادئات نقاط التوقف تُستخدم للتحسين
يمكن دمج بادئات مثل sm:flex، md:grid-cols-2، وlg:grid-cols-3 مع أي فئة
استخدم overflow-x-auto للتمرير الأفقي المتجاوب للجداول
استعلامات @container تستجيب لحجم الحاوية الأبو، مثالية للمكونات القابلة لإعادة الاستخدام
hidden md:block وblock md:hidden تتحكم في ظهور العناصر عبر الشاشات المختلفة

📝 تمارين

⭐ أنشئ شريط تنقل متجاوب: استخدم قائمة هامبرغر على الشاشات الصغيرة (block md:hidden)، وأظهر التنقل الكامل على الشاشات المتوسطة (hidden md:flex)
⭐⭐ أنشئ شبكة بطاقات منتجات متجاوبة: عمود واحد على الشاشات الصغيرة (grid-cols-1)، عمودان على الشاشات المتوسطة (md:grid-cols-2)، 4 أعمدة على الشاشات الكبيرة (lg:grid-cols-4)، مع بطاقات تكبر عند التمرير (hover:scale-105)
⭐⭐⭐ أنشئ تخطيط لوحة معلومات متجاوب: استخدم استعلامات الحاوية لمكون شريط جانبي يُختصر إلى أيقونات في الحاويات الضيقة (@lg: يظهر النص) وينتوسع لإظهار نص القائمة الكامل في الحاويات العريضة