EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

المفاهيم الأساسية في Tailwind CSS: فئات الأدوات المساعدة ونظام البادئات

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

جوهر Tailwind CSS هو فئات الأدوات المساعدة (Utility Classes)، حيث ت对应 كل فئة خاصية CSS محددة. من خلال الجمع بين عدة فئات أدوات مساعدة، يمكنك بناء أنماط معقدة مباشرة في HTML.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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-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">عرض توضيحي لفئات الأدوات المساعدة</h2>
    <p class="text-gray-600 leading-relaxed mb-4">
      كل اسم فئة ي对应 خاصية CSS واحدة
    </p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
      اضغط هنا
    </button>
  </div>
</body>
</html>
▶ جرّب الكود

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

فئة Tailwind الخاصية الم Corresponding
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.

بادئات حالات Hover/Focus

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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-50 flex items-center justify-center gap-8">
  <!-- تأثير التمرير -->
  <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">
    تأثير التمرير
  </button>

  <!-- تأثير التركيز -->
  <input type="text" placeholder="انقر على حقل الإدخال لرؤية التأثير"
         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">

  <!-- حالات مدمجة -->
  <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">
    حالات مدمجة
  </button>
</body>
</html>
▶ جرّب الكود

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

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

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

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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">
  <div class="max-w-6xl mx-auto">
    <h1 class="text-xl md:text-2xl lg:text-4xl font-bold text-center mb-8">
      عنوان متجاوب
    </h1>
    
    <!-- شبكة متجاوبة -->
    <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">بطاقة 1</div>
      <div class="bg-white p-4 rounded-lg shadow">بطاقة 2</div>
      <div class="bg-white p-4 rounded-lg shadow">بطاقة 3</div>
      <div class="bg-white p-4 rounded-lg shadow">بطاقة 4</div>
      <div class="bg-white p-4 rounded-lg shadow">بطاقة 5</div>
      <div class="bg-white p-4 rounded-lg shadow">بطاقة 6</div>
      <div class="bg-white p-4 rounded-lg shadow">بطاقة 7</div>
      <div class="bg-white p-4 rounded-lg shadow">بطاقة 8</div>
    </div>

    <!-- إظهار/إخفاء متجاوب -->
    <div class="mt-8">
      <p class="block md:hidden text-center text-red-500">مرئي فقط على الشاشات الصغيرة</p>
      <p class="hidden md:block lg:hidden text-center text-blue-500">مرئي فقط على الشاشات المتوسطة</p>
      <p class="hidden lg:block text-center text-green-500">مرئي فقط على الشاشات الكبيرة</p>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

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

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

بادئة الوضع الداكن

تجعل بادئة dark: تكييف الوضع الداكن سهلاً — فقط حدد أنماطاً مختلفة للوضع الداكن.

مثال

HTML 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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-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">
      مثال الوضع الداكن
    </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">
        يظهر هذا النص باللون الرمادي الداكن في الوضع الفاتح والرمادي الفاتح في الوضع الداكن.
        يتغير لون الخلفية وفقاً لذلك.
      </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">
        زر أساسي
      </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">
        زر ثانوي
      </button>
    </div>
  </div>

  <script>
    // كود مثال للتبديل بين الوضع الداكن
    function toggleDarkMode() {
      document.documentElement.classList.toggle('dark');
    }
  </script>
</body>
</html>
▶ جرّب الكود

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

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

صيغة القيم التعسفية

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

مثال

HTML 
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<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-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- عرض وارتفاع مخصصان -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">حجم مخصص</h3>
      <div class="w-[300px] h-[200px] bg-blue-200 rounded flex items-center justify-center">
        300px × 200px
      </div>
    </div>

    <!-- ألوان مخصصة -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">ألوان مخصصة</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>

    <!-- مسافات مخصصة -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">مسافات مخصصة</h3>
      <div class="space-y-[15px]">
        <div class="bg-gray-200 p-3 rounded">مسافة 15px</div>
        <div class="bg-gray-200 p-3 rounded">مسافة 15px</div>
        <div class="bg-gray-200 p-3 rounded">مسافة 15px</div>
      </div>
    </div>

    <!-- حجم خط مخصص -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">خط مخصص</h3>
      <p class="text-[22px] leading-[32px] text-[#333]">
        حجم خط مخصص 22px، ارتفاع سطر 32px
      </p>
    </div>
  </div>
</body>
</html>
▶ جرّب الكود

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

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

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

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

❓ أسئلة شائعة

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

📖 ملخص

📝 تمارين

  1. ⭐ أنشئ مجموعة أزرار بحالات عادية وتمرير وتركيز وتعطيل، موضحاً تغيرات الأنماط عبر حالات مختلفة

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

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

100%