English 中文 العربية 日本語 Português

Tailwind CSS: المفاهيم الأساسية لـ Tailwind CSS

1. كيف تعمل فئات الأدوات المساعدة

تتمثل جوهر Tailwind CSS في «فئات الأدوات المساعدة»، حيث تتوافق كل فئة مع خاصية CSS محددة. ومن خلال الجمع بين عدة فئات من فئات الأدوات المساعدة، يمكنك إنشاء أنماط معقدة مباشرةً في HTML.

▶ مثال

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Utility Class Mechanics</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="bg-white rounded-lg shadow-md p-6 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">Utility Class Demo</h2>
    <p class="text-gray-600 leading-relaxed mb-4">
      Each class name corresponds to one CSS property
    </p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
      Click Me
    </button>
  </div>
</body>
</html>
▶ جرّب الكود

ما الذي تقوم به كل فئة في الكود أعلاه:

فئة Tailwind CSS المقابل
bg-white background-color: #fff
rounded-lg border-radius: 0.5rem
shadow-md box-shadow: ...
p-6 padding: 1.5rem
text-2xl font-size: 1.5rem
font-bold font-weight: 700

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي إنشاء أسماء فئات دلالية (مثل .card) وتعريف الأنماط في ملف CSS، في حين أن Tailwind يستخدم فئات المساعدة «الذرية» مباشرةً، مما يلغي الحاجة إلى كتابة ملفات CSS وصيانتها.

2. بادئات حالات التمرير بالماوس/التركيز

يستخدم Tailwind بادئات الحالات للتعامل مع حالات التفاعل، مثل hover: وfocus: وactive:، وما إلى ذلك. وتتميز صيغة الكتابة بأنها بديهية وسهلة الاستخدام.

▶ مثال

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>State Prefix Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 flex items-center justify-center gap-8">
  <!-- Hover Effect -->
  <button class="bg-blue-500 text-white px-6 py-3 rounded-lg
                 hover:bg-blue-700 hover:shadow-lg hover:scale-105
                 transition-all duration-300">
    Hover Effect
  </button>

  <!-- Focus Effect -->
  <input type="text" placeholder="Click the input to see the effect"
         class="px-4 py-3 border-2 border-gray-300 rounded-lg
                focus:border-blue-500 focus:ring-2 focus:ring-blue-200
                focus:outline-none transition-all">

  <!-- Combined States -->
  <button class="bg-green-500 text-white px-6 py-3 rounded-lg
                 hover:bg-green-600
                 focus:ring-2 focus:ring-green-300
                 active:bg-green-700
                 disabled:opacity-50 disabled:cursor-not-allowed">
    Combined States
  </button>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة محددات الفئات الزائفة مثل .button:hover و.button:focus، في حين أن Tailwind يكتفي بإضافة البادئات hover: أو focus: إلى أسماء الفئات.

💡 نصيحة: تشمل البادئات الشائعة للحالات ما يلي: hover: (عند التمرير بالماوس)، focus: (عند التركيز)، active: (نشط)، disabled: (معطل)، first: (العنصر الأول)، last: (العنصر الأخير)

3. البادئات التفاعلية

تتبع Tailwind استراتيجية «الأولوية للجوال»، حيث تستخدم بادئات متجاوبة لتعيين الأنماط وفقًا لأحجام الشاشات المختلفة: sm:، md:، lg:، xl:، 2xl:.

▶ مثال

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 Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4">
  <div class="max-w-6xl mx-auto">
    <h1 class="text-xl md:text-2xl lg:text-4xl font-bold text-center mb-8">
      Responsive Heading
    </h1>
    
    <!-- Responsive Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <div class="bg-white p-4 rounded-lg shadow">Card 1</div>
      <div class="bg-white p-4 rounded-lg shadow">Card 2</div>
      <div class="bg-white p-4 rounded-lg shadow">Card 3</div>
      <div class="bg-white p-4 rounded-lg shadow">Card 4</div>
      <div class="bg-white p-4 rounded-lg shadow">Card 5</div>
      <div class="bg-white p-4 rounded-lg shadow">Card 6</div>
      <div class="bg-white p-4 rounded-lg shadow">Card 7</div>
      <div class="bg-white p-4 rounded-lg shadow">Card 8</div>
    </div>

    <!-- Responsive Show/Hide -->
    <div class="mt-8">
      <p class="block md:hidden text-center text-red-500">Only visible on small screens</p>
      <p class="hidden md:block lg:hidden text-center text-blue-500">Only visible on medium screens</p>
      <p class="hidden lg:block text-center text-green-500">Only visible on large screens</p>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

مرجع نقطة التوقف:

البادئة الحد الأدنى للعرض الأجهزة الشائعة
sm: 640px الهواتف الكبيرة، الأجهزة اللوحية الصغيرة
md: 768px الأجهزة اللوحية
lg: 1024 بكسل أجهزة الكمبيوتر المحمولة
xl: 1280px شاشات سطح المكتب
2xl: 1536px الشاشات الكبيرة

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة العديد من القواعد المتعلقة بالتجاوب داخل استعلامات @media، في حين أن Tailwind يحدد سلوك التجاوب مباشرةً في HTML من خلال البادئات.

4. بادئة الوضع المظلم

تُسهّل البادئة dark: عملية التكيف مع الوضع المظلم — ما عليك سوى تحديد أنماط مختلفة للوضع المظلم.

▶ مثال

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-white dark:bg-gray-900 transition-colors">
  <div class="max-w-2xl mx-auto p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">
      Dark Mode Example
    </h1>
    
    <div class="bg-gray-100 dark:bg-gray-800 rounded-xl p-6 mb-6">
      <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
        This text appears dark gray in light mode and light gray in dark mode.
        The background color switches accordingly.
      </p>
    </div>

    <div class="flex gap-4">
      <button class="bg-blue-500 dark:bg-blue-600 text-white px-6 py-3 rounded-lg
                     hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors">
        Primary Button
      </button>
      <button class="border border-gray-300 dark:border-gray-600
                     text-gray-700 dark:text-gray-300 px-6 py-3 rounded-lg
                     hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
        Secondary Button
      </button>
    </div>
  </div>

  <script>
    // Example code to toggle dark mode
    function toggleDarkMode() {
      document.documentElement.classList.toggle('dark');
    }
  </script>
</body>
</html>
▶ جرّب الكود

CSS التقليدي مقابل Tailwind يتطلب النهج التقليدي كتابة فئات CSS منفصلة للوضع المظلم أو استخدام محددات [data-theme="dark"]، في حين أن Tailwind يكتفي بإضافة البادئة dark: إلى أسماء الفئات.

⚠️ ملاحظة: لتمكين الوضع الداكن، قم بتعيين darkMode: 'class' في إعدادات Tailwind، أو أضف الفئة dark إلى العلامة <html>.

5. قواعد بناء الجمل ذات القيم التعسفية

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

▶ مثال

HTML 📖 للعرض فقط 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arbitrary Value Syntax Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Custom Width and Height -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Custom Size</h3>
      <div class="w-[300px] h-[200px] bg-blue-200 rounded flex items-center justify-center">
        300px × 200px
      </div>
    </div>

    <!-- Custom Colors -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Custom Colors</h3>
      <div class="flex gap-4">
        <div class="w-20 h-20 bg-[#ff6b6b] rounded-lg"></div>
        <div class="w-20 h-20 bg-[#4ecdc4] rounded-lg"></div>
        <div class="w-20 h-20 bg-[rgb(102,51,153)] rounded-lg"></div>
        <div class="w-20 h-20 bg-[hsl(207,90%,54%)] rounded-lg"></div>
      </div>
    </div>

    <!-- Custom Spacing -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Custom Spacing</h3>
      <div class="space-y-[15px]">
        <div class="bg-gray-200 p-3 rounded">Spacing 15px</div>
        <div class="bg-gray-200 p-3 rounded">Spacing 15px</div>
        <div class="bg-gray-200 p-3 rounded">Spacing 15px</div>
      </div>
    </div>

    <!-- Custom Font Size -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Custom Font</h3>
      <p class="text-[22px] leading-[32px] text-[#333]">
        Custom 22px font size, 32px line height
      </p>
    </div>
  </div>
</body>
</html>
42 سطر من الكود المنطقي (تجاوز الحد 40， للعرض فقط)

تنسيقات القيم التعسفية المدعومة:

الصيغة مثال الوصف
القيمة الثابتة w-[100px] قيمة البكسل
قيمة اللون bg-[#ff0000] اللون السداسي العشري
RGB text-[rgb(255,0,0)] ألوان RGB
متغير CSS p-[var(--spacing)] استخدام متغيرات CSS
القيمة المحسوبة w-[calc(100%-2rem)] تعبير الحساب

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

💡 نصيحة: يجب استبدال المسافات في القيم العشوائية بعلامات تحتية، على سبيل المثال، grid-cols-[1fr_2fr_1fr] تمثل grid-template-columns: 1fr 2fr 1fr.

❓ أسئلة شائعة

س هل تؤدي فئات Utility إلى تضخم كود HTML؟
ج على الرغم من وجود عدد أكبر من أسماء الفئات في HTML، يمكنك إعادة استخدام الكود من خلال المكونات (مثل مكونات React وVue) أثناء التطوير. وفي إصدارات الإنتاج، تقوم Tailwind تلقائيًا بإزالة الفئات غير المستخدمة، مما يؤدي إلى الحصول على ملف CSS نهائي صغير جدًّا.
س هل البادئات التفاعلية تعتمد على مبدأ «الأجهزة المحمولة أولاً» أم «أجهزة سطح المكتب أولاً»؟
ج تتبع Tailwind استراتيجية «الأجهزة المحمولة أولاً». تنطبق الأنماط التي لا تحتوي على بادئات على جميع الشاشات، بينما تسري البادئات sm: وما فوقها عند نقطة التوقف المقابلة وما بعدها.
س كيف يمكنني دعم التبديل إلى الوضع الداكن سواء من خلال إعدادات النظام أو يدويًّا؟
ج يمكنك استخدام التكوين darkMode: 'selector' وتبديل فئة dark إلى <html> عبر JavaScript. ادمج ذلك مع استعلام الوسائط prefers-color-scheme من أجل الكشف التلقائي.
س هل تؤثر صيغة القيم التعسفية على الأداء؟
ج تتم معالجة القيم التعسفية في مرحلة البناء ولا تؤثر على الأداء أثناء التشغيل. ومع ذلك، يُنصح باستخراج القيم الشائعة الاستخدام إلى إعدادات السمة حفاظًا على اتساق الكود.

📖 ملخص

📝 تمارين

  1. ⭐ إنشاء مجموعة أزرار ذات حالات «عادية» و«عند التمرير» و«عند التركيز» و«معطلة»، لتوضيح التغيرات في الأنماط عبر الحالات المختلفة

  2. ⭐⭐ إنشاء قائمة بطاقات متوافقة مع مختلف الأحجام تعرض عمودًا واحدًا على الهواتف المحمولة، وعمودين على الأجهزة اللوحية، وثلاثة أعمدة على أجهزة الكمبيوتر المكتبية، وأربعة أعمدة على الشاشات الكبيرة، مع خيار التبديل بين الوضع الفاتح والوضع الداكن

  3. ⭐⭐⭐ استخدم صيغة القيم التعسفية لإنشاء تخطيط شبكي بحجم مخصص مع توزيع غير منتظم لعرض الأعمدة (على سبيل المثال، بنسبة 1:2:1) وتباعد مخصص

Web-Tutorial.com

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

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

100%