Tailwind CSS: التصميم المتجاوب في 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: .

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

يوفر 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.

2. استراتيجية «الأولوية للجوال»

تتبنى Tailwind استراتيجية «الأولوية للجوال»: حيث تُطبق الأنماط غير المُسبوقة ببادئة على الشاشات الأصغر حجمًا بشكل افتراضي، بينما تتجاوز بادئات نقاط التوقف الأكبر حجمًا أنماط الشاشات الأصغر.

▶ مثال

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile-First Strategy</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">
    <!-- Responsive text -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive Font Size</h3>
      <p class="text-sm md:text-base lg:text-lg xl:text-xl">
        Small screens use text-sm by default, medium screens text-base, large screens text-lg, and extra-large screens text-xl
      </p>
    </div>

    <!-- Responsive padding -->
    <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">Responsive padding: p-2 → sm:p-4 → md:p-6 → lg:p-8</p>
    </div>

    <!-- Responsive show/hide -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive Show/Hide</h3>
      <div class="block md:hidden bg-red-100 p-4 rounded text-center text-red-700">
        Only visible on small screens (block md:hidden)
      </div>
      <div class="hidden md:block bg-green-100 p-4 rounded text-center text-green-700">
        Visible on medium screens and up (hidden md:block)
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

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

3. استخدام البادئة «responsive» في الممارسة العملية

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Prefix in Practice</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">
    <!-- Responsive Flex layout -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive Flex Layout</h3>
      <div class="flex flex-col sm:flex-row gap-4">
        <div class="flex-1 bg-blue-100 p-4 rounded text-center">Item 1</div>
        <div class="flex-1 bg-blue-200 p-4 rounded text-center">Item 2</div>
        <div class="flex-1 bg-blue-300 p-4 rounded text-center">Item 3</div>
      </div>
      <p class="text-sm text-gray-500 mt-2">Stacked vertically on small screens (flex-col), horizontal on medium screens (sm:flex-row)</p>
    </div>

    <!-- Responsive Grid columns -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive Grid Columns</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>

    <!-- Responsive spacing -->
    <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">Responsive Spacing</h3>
      <div class="space-y-2 sm:space-y-4 md:space-y-6">
        <div class="bg-purple-100 p-4 rounded">Item A</div>
        <div class="bg-purple-200 p-4 rounded">Item B</div>
        <div class="bg-purple-300 p-4 rounded">Item C</div>
      </div>
    </div>
  </div>
</body>
</html>

44 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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.

4. الصور المتوافقة مع مختلف الأحجام

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

▶ مثال

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Images</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">
    <!-- Responsive image width -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive Image Width</h3>
      <img src="https://picsum.photos/1200/400" alt="Responsive image"
           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>

    <!-- Responsive image grid -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Responsive Image Grid</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="Image 1" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=2" alt="Image 2" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=3" alt="Image 3" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=4" alt="Image 4" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=5" alt="Image 5" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=6" alt="Image 6" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=7" alt="Image 7" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=8" alt="Image 8" class="w-full aspect-square object-cover rounded-lg">
      </div>
    </div>
  </div>
</body>
</html>

▶ جرّب الكود

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

5. الجداول المتوافقة مع جميع الأحجام

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Tables</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">Responsive Table</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-left">ID</th>
              <th class="p-2 md:p-3 text-left">Name</th>
              <th class="p-2 md:p-3 text-left hidden sm:table-cell">Email</th>
              <th class="p-2 md:p-3 text-left hidden md:table-cell">Phone</th>
              <th class="p-2 md:p-3 text-left">Status</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b">
              <td class="p-2 md:p-3">001</td>
              <td class="p-2 md:p-3">Alice</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">alice@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">138-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">Active</span></td>
            </tr>
            <tr class="border-b">
              <td class="p-2 md:p-3">002</td>
              <td class="p-2 md:p-3">Bob</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">bob@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">138-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">Pending</span></td>
            </tr>
            <tr class="border-b">
              <td class="p-2 md:p-3">003</td>
              <td class="p-2 md:p-3">Charlie</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">charlie@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">138-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">Disabled</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="text-sm text-gray-500 mt-4">Some columns are hidden on small screens; the table scrolls horizontally</p>
    </div>
  </div>
</body>
</html>

53 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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

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

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

▶ مثال

HTML 📖 للعرض فقط

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Container Queries</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">
    <!-- Container query basics -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Container Query Basics</h3>
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Small container -->
        <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="Avatar" class="w-20 h-20 @md:w-24 @md:h-24 rounded-full object-cover">
            <div>
              <h4 class="font-semibold @md:text-lg">Username</h4>
              <p class="text-gray-600 text-sm @md:text-base">This is a container query example. The layout changes based on the parent container's width.</p>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2">Small container: vertical layout</p>
        </div>

        <!-- Large container -->
        <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="Avatar" 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">Username</h4>
              <p class="text-gray-600 text-sm @md:text-base">Container queries use the @container class and prefixes like @md: to apply styles based on the parent container's size.</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">Tag 1</span>
                <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">Tag 2</span>
              </div>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2">Large container: horizontal layout with extra tags</p>
        </div>
      </div>
    </div>

    <!-- Container query cards -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Container Query Cards</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="Card image" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">Card Title</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">Container queries let components respond to their own container size rather than the viewport size.</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Learn More</button>
          </div>
        </div>
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=11" alt="Card image" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">Card Title</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">This allows components to respond correctly across different layouts, making them more flexible.</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Learn More</button>
          </div>
        </div>
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=12" alt="Card image" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">Card Title</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">Use the @container class to mark containers, and prefixes like @sm: and @md: to apply styles.</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Learn More</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

71 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

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: يعرض النص) ويتم توسيعه لعرض نص القائمة بالكامل في الحاويات العريضة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن