ما هو Tailwind CSS؟ دليل مبسّط لمنشئي التطبيقات

Tailwind CSS مجموعة أدوات لتنسيق مواقع الويب. بدلاً من كتابة قواعد تنسيق منفصلة في ملف خاص بها، تعطي كل عنصر أسماء فئات قصيرة وجاهزة، مثل bg-white لخلفية بيضاء، وp-4 للحشو الداخلي، وtext-lg لنص أكبر، وrounded-xl لزوايا مستديرة، فينتج Tailwind شيفرة CSS التي يحتاجها المتصفح. وهو مجاني ومفتوح المصدر، ويُعد من أكثر الطرق شيوعاً لتنسيق تطبيقات الويب الحديثة.

لماذا يهم Tailwind عند البناء بالذكاء الاصطناعي

إذا بنيت تطبيق ويب بمنشئ تطبيقات بالذكاء الاصطناعي، فمن المرجح أن يكون تطبيقك منسّقاً بـ Tailwind. فـ Mythex مثلاً يبدأ المشاريع الجديدة على Vite + React + TypeScript + Tailwind ما لم تطلب غير ذلك (كيف يُختار التقني).

وهذا يهمك من ثلاث نواحٍ:

• تغييرات التصميم رخيصة. لأن التنسيق موجود بجانب كل زر وبطاقة وعنوان، يستطيع الذكاء الاصطناعي تنفيذ طلب مثل "اجعل البطاقات أقل ازدحاماً" بتعديل بضع فئات في مكان واحد.
• يمكنك قراءته. فئات Tailwind قريبة من الإنجليزية العادية. فالعبارة text-center font-bold text-2xl ليست صعبة الفهم، حتى لو لم تكتب شيفرة من قبل.
• الشكل يبقى متسقاً. يأتي Tailwind بمقياس ثابت من الأحجام والمسافات والألوان، وهذا يمنع التطبيق من أن ينتهي بأربعة عشر رمادياً مختلفاً قليلاً.

تشبيه من الحياة اليومية

فكّر في الطلاء وبناء البيت.

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

Tailwind أشبه بلوحة ألوان من محل الدهانات مع مجموعة ملصقات مُعنونة. كل جدار يحمل ملصقاً مثل "أبيض، مطفي، طبقتان"، واللوحة تقدم مجموعة مختارة من الدرجات فقط. تخسر قدراً قليلاً من الحرية، لكن الجميع في العمل يعرف شكل كل جدار بمجرد قراءة الملصق.

كيف يعمل Tailwind

تُبنى صفحة الويب من HTML (المحتوى والبنية) ومن CSS (الشكل). وعادةً يعيش CSS في ملف منفصل بقواعد كهذه:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

مع Tailwind تتخطى كتابة هذه القاعدة، وتضع فئات الأدوات مباشرة على العنصر:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Your booking is confirmed
</div>

كل فئة تؤدي مهمة صغيرة واحدة. وعند بناء التطبيق يفحص Tailwind ملفاتك، ويجد الفئات التي استخدمتها فعلاً، ثم يولّد CSS لها وحدها. وهذا يُبقي ورقة التنسيق النهائية صغيرة.

الإصدار 4 من Tailwind، وهو الإصدار الرئيسي الحالي، يُعدّ بإعداد بسيط جداً: تثبّته، وتضيف إضافته إلى أداة البناء، وتضع @import "tailwindcss"; في أعلى ملف CSS. والتخصيصات مثل ألوان العلامة التجارية والخطوط تُعرَّف في CSS كـ design tokens، بدلاً من ملف إعدادات JavaScript كبير كما كان في الإصدارات الأقدم. وإذا قرأت درساً قديماً يذكر tailwind.config.js، فهذا هو السبب.

مثال عملي: بطاقة أسعار

لنفترض أنك طلبت من منشئ التطبيق صفحة أسعار، وتريد أن تبرز بطاقة "Pro". قد تبدو شيفرة البطاقة هكذا (في مكوّن React تُكتب class باسم className):

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Start trial
  </button>
</div>

اقرأها من اليسار إلى اليمين:

إذا قلت "اجعل بطاقة Pro بارزة بحد أزرق وظل خفيف"، فقد يغيّر الذكاء الاصطناعي border-gray-200 إلى border-2 border-blue-600 ويضيف shadow-lg. وهذا هو التغيير كله.

التصميم المتجاوب والوضع الداكن

يملك Tailwind بادئات قصيرة لأحجام الشاشات والحالات:

• md:grid-cols-3: ثلاثة أعمدة على الشاشات المتوسطة فما فوق؛ وعلى الهاتف يُطبَّق العمود الواحد الافتراضي. Tailwind يعتمد نهج الهاتف أولاً: الفئات بلا بادئة تنطبق في كل مكان، والبادئات تضيف تغييرات للشاشات الأكبر.
• hover:bg-gray-700: زر أغمق عندما يمرّ المؤشر فوقه.
• dark:bg-gray-900: خلفية مختلفة عند تفعيل الوضع الداكن.

لهذا يكون طلب تخطيط متجاوب مع الهاتف أو الوضع الداكن سريعاً عادةً في مشروع Tailwind.

المصطلحات الأساسية

مفاهيم خاطئة شائعة

• "Tailwind تصميم." ليس كذلك. Tailwind يمنحك لبنات بناء، لا شكلاً جاهزاً. يمكن لموقعين مبنيين بـ Tailwind أن يبدوا مختلفين تماماً. أما مظهر "تطبيق الذكاء الاصطناعي" العام فيأتي من الإعدادات الافتراضية، لا من Tailwind نفسه، لذا أعطِ منشئ تطبيقك توجيهاً حقيقياً. انظر كيف تصمم تطبيقاً جميلاً بالذكاء الاصطناعي.
• "هو نفسه الأنماط المضمّنة (inline styles)." ليس تماماً. الفئات تأتي من مقياس مشترك، وتدعم الحالات والوضع الداكن ونقاط الانكسار، وتتحول إلى CSS عادي وقت البناء.
• "Tailwind يثقل الصفحات." البناء يضم فقط الفئات التي تستخدمها، لذا يكون CSS الذي يصل إلى الزوار صغيراً عادةً.
• "قوائم الفئات الطويلة تعني شيفرة فوضوية." تبدو مزدحمة في البداية، لكن كل ما يخص شكل العنصر موجود في مكان واحد. والأنماط المتكررة تُنقل عادةً إلى مكونات، مثل مكوّن Button واحد.
• "إذا استخدمت Tailwind لا أستطيع كتابة CSS مخصص." ما زال بإمكانك كتابة CSS عادي متى احتجت إليه.

ماذا تطلب من منشئ التطبيق بالذكاء الاصطناعي

• "عرّف ألوان علامتنا التجارية وخطوطها مرة واحدة كـ theme tokens، واستخدمها في كل مكان بدلاً من الألوان المكتوبة يدوياً."
• "اجعل كل بطاقة وزر وحقل إدخال بنفس تقويس الزوايا ونفس المسافات."
• "افحص التخطيط بعرض الهاتف، وأصلح أي عنصر يتجاوز الحدود أو يكون صغيراً جداً للنقر."
• "أضف الوضع الداكن باستخدام متغيّر dark: في Tailwind، وتأكد من أن تباين النص يبقى مقروءاً."
• "انقل أنماط الأزرار المتكررة إلى مكوّن Button واحد قابل لإعادة الاستخدام."
• "اشرح فئات Tailwind في هذا القسم بلغة عادية."

Tailwind في Mythex

تستخدم المشاريع الجديدة في Mythex Tailwind افتراضياً مع React وTypeScript، فتستطيع طلب التغييرات البصرية بكلمات عادية ورؤيتها مباشرة في المعاينة الحية. وإذا أردت رؤية الشيفرة، يعرض محرر الشيفرة كل فئة (للقراءة فقط في خطة Free، وقابل للتعديل في خطة Pro). وإذا فضّلت CSS عادياً أو إعداداً مختلفاً، فاذكر ذلك في أول طلب لك، وتشرح المستندات كيف يُختار المكدس التقني.

الأسئلة