ما هو Tailwind CSS

إذا كنت قد كتبت CSS من قبل، فمن المرجح أنك مررت بذلك: تعديل هامش ببكسل واحد لنصف ساعة، أو التحديد إلى الشاشة لخمس دقائق محاولاً تسمية كلاس، أو البحث في ملف أنماط كامل فقط لتجاوز أنماط إطار عمل افتراضية… Tailwind CSS موجود لحل هذه المشاكل. ليس مجرد Bootstrap آخر — بل هو طريقة جديدة تماماً لكتابة CSS.

1. ما هو Tailwind CSS

Tailwind CSS هو إطار عمل CSS يعتمد على الأدوات المساعدة أولاً (utility-first). فكرته الأساسية: طبق فئات معرّفة مسبقاً مباشرة في HTML للتحكم في الأنماط بدلاً من كتابة CSS مخصص.

لنرَ مقارنة مباشرة — وضع زر أزرق على صفحة:

مثال: CSS التقليدي مقابل Tailwind (الصعوبة ⭐)

CSS التقليدي:

HTML

<style>
.btn-primary {
  background-color: #2563eb;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
.btn-primary:hover {
  background-color: #1d4ed8;
}
</style>
<button class="btn-primary">انقر هنا</button>

▶ جرّب الكود

Tailwind:

مثال: طريقة Tailwind (الصعوبة ⭐)

HTML

<button class="bg-blue-600 text-white px-6 py-3 rounded-lg text-base cursor-pointer hover:bg-blue-700">
  انقر هنا
</button>

▶ جرّب الكود

جرّب كود Tailwind أعلاه في المحرر أدناه لرؤية النتيجة.

هل تلاحظ الفرق؟ مع Tailwind، لا تغادر HTML أبداً. جميع الأنماط مُجمّعة عبر الفئات — bg-blue-600 هو خلفية زرقاء، px-6 هو حشو أفقي، rounded-lg هو نصف قطر حدود كبير، و hover:bg-blue-700 يُغمق اللون عند التمرير.

💡 ماذا يعني "الأدوات المساعدة أولاً"؟ ببساطة، خصائص CSS مقسمة إلى أصغر فئات ذرية ممكنة. bg-blue-600 تقوم بشيء واحد — تعيين لون الخلفية إلى الأزرق. text-white تقوم بشيء واحد — تعيين لون النص إلى الأبيض. تجمع الفئات التي تحتاجها، مثل البناء بالكتل.

2. Tailwind مقابل الأطر التقليدية

مقابل Bootstrap

Bootstrap هو إطار عمل يعتمد على المكونات — يوفر مكونات مصممة مسبقاً (أزرار، أشرطة تنقل، بطاقات، نماذج) تستدعيها بهيكل HTML ثابت. المشكلة: إذا أردت تخصيص المظهر، عليك تجاوز CSS الخاص بـ Bootstrap أو تعديل متغيرات Sass.

الجانب	Bootstrap	Tailwind CSS
الفلسفة الأساسية	يوفر مكونات جاهزة	يوفر فئات ذرية تجمعها بنفسك
التخصيص	تجاوز الافتراضيات مؤلم	ادمج بحرية، لا حاجة للتجاوز
منحنى التعلم	تعلم أسماء المكونات	تعلم أي فئة تُقابل أي خاصية CSS
حجم الحزمة	يحتوي أنماطاً كثيرة لا تستخدمها	يشمل فقط الفئات التي تستخدمها فعلياً
حرية التصميم	جميع مواقع Bootstrap تبدو متماثلة	كل موقع يمكن أن يبدو فريداً

مقابل CSS المكتوب يدوياً

الجانب	CSS المكتوب يدوياً	Tailwind CSS
التسمية	كل نمط يحتاج اسماً للفئة	لا تسمية — فقط اجمع الفئات
التبديل بين الملفات	انتقل بين ملفات HTML و CSS	كل شيء في HTML
حجم الكود	مجموعتان من الملفات، كمية كبيرة	سطر واحد من الفئات ينجز المهمة
قابلية الصيانة	ابحث عن النمط في CSS لتغييره	غيّر الفئة مباشرة في HTML
الاتساق	يعتمد على اتفاقيات الفريق	نظام تصميم مدمج، اتساق تلقائي

مثال: بطاقة ملف شخصي بسيطة (الصعوبة ⭐)

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>بطاقة ملف شخصي بـ Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
  <div class="max-w-xs mx-auto p-6 bg-white rounded-2xl shadow-lg text-center">
    <img src="https://i.pravatar.cc/80" alt="الصورة الرمزية"
         class="w-20 h-20 rounded-full mx-auto mb-3">
    <h2 class="text-xl font-bold text-gray-900 mb-1">محمد أحمد</h2>
    <p class="text-sm text-blue-600 mb-2">مهندس واجهات أمامية</p>
    <p class="text-sm text-gray-500 mb-4">شغوف بالبرمجة، متخصص في تطوير الويب</p>
    <button class="bg-blue-600 text-white px-6 py-2 rounded-lg cursor-pointer
                   hover:bg-blue-700 transition-colors">
      تواصل معي
    </button>
  </div>
</body>
</html>

▶ جرّب الكود

احفظ هذا الكود كملف .html وافتحه في المتصفح — لا حاجة للتثبيت، يعمل مباشرة.

💡 هل تبدو فئات Tailwind طويلة وقبيحة؟ تقريباً الجميع يظن ذلك في البداية. لكن بعد أسبوع من الاستخدام، يغير معظم الناس رأيهم — "قبيح لكن فعال" يتفوق على "جميل لكن مُتعب". أسماء الفئات هي اختصارات لخصائص CSS؛ بمجرد أن تعتاد عليها، لن تبدو طويلة على الإطلاق.

3. التغييرات الرئيسية في Tailwind CSS v4

تم إصدار Tailwind CSS v4 في مارس 2025، ويقدم ترقيات هندسية كبيرة مقارنة بـ v3:

التغيير	نهج v3	نهج v4
محرك البناء	JavaScript	Rust (محرك Oxide)، بناء أسرع بـ 3.5×
نقطة دخول CSS	`@tailwind base/components/utilities`	`@import "tailwindcss"`
التكوين	`tailwind.config.js`	指令 `@theme` في CSS
السِمات المخصصة	ملف تكوين JS	متغيرات CSS الأصلية + `@theme`
ميزات جديدة	—	استعلامات الحاوية، `@starting-style`، تداخل CSS

للمبتدئين، أهم ما في v4 هو أن التكوين أصبح أبسط — السيناريوهات التي كانت تتثبيت حزم npm وكتابة ملفات تكوين تعمل الآن بسطر @import "tailwindcss" واحد.

⚠️ ملاحظة: العديد من الدروس الموجودة على الإنترنت لا تزال مبنية على v3. إذا رأيت tailwind.config.js أو بنية @tailwind base، فهذا هو الإصدار القديم. هذا الدرس مبني على v4، وجميع الأمثلة تستخدم البنية الأحدث.

4. المتطلبات الأساسية لتعلم Tailwind

قبل البدء في هذا الدرس، يجب أن تعرف بالفعل:

أساسيات HTML: كيفية كتابة العلامات والسمات وأسماء الفئات
أساسيات CSS: أساسيات Flexbox و Grid ونموذج الصندوق والتصميم المتجاوب

إذا كنت بحاجة إلى مراجعة، تفضل بزيارة دورة HTML و دورة CSS. مع هذه الأساسيات، تعلم Tailwind سيكون سلساً.

💡 Tailwind ليس "لتعلم CSS" — بل "لكتابة CSS بكفاءة أكبر." إذا كنت لا تزال غير متأكد مما يفعله display: flex، ننصحك بمراجعة أساسيات CSS قبل المتابعة.

حالات الاستخدام الشائعة

النماذج الأولية السريعة: من التصميم إلى صفحة تعمل، Tailwind من أكثر الحلول فعالية. لا كتابة CSS، لا تسمية فئات، لا تبديل ملفات.
المشاريع الشخصية / صفحات الهبوط: ملف HTML واحد + CDN هو كل ما تحتاجه — مثالي لعرض المنتجات وصفحات الأحداث والمواقع الشخصية.
المشاريع الكبيرة: ادمج Tailwind مع إطار مكونات (React/Vue) لأنماط مكونات مستقلة بالكامل بدون تعارضات.
لوحات التحكم: نظام التباعد في Tailwind + أدوات Flex/Grid تتيح لك بناء تخطيطات لوحات التحكم أسرع بمرات من CSS المكتوب يدوياً.

❓ أسئلة شائعة

س هل أتعلم Tailwind أم Bootstrap؟

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

س مع أسماء الفئات الطويلة، ألا تصبح ملفات HTML ضخمة؟

ج نعم — وهذا هو النقد الأكثر شيوعاً لـ Tailwind. زر بسيط قد يحتوي على ست أو سبع فئات. لكن هناك حلول: أدوات البناء في بيئة الإنتاج تضغط أسماء الفئات إلى رموز قصيرة؛ يمكن استخراج تركيبات الفئات المتكررة باستخدام @apply (سنغطيها لاحقاً)؛ عند استخدامها مع مكونات React/Vue، تعيش الفئات داخل ملفات المكونات ولا تبدو فوضوية.

س هل يؤثر Tailwind على أداء الصفحة؟

ج لا — بل العكس. بناء الإنتاج في Tailwind يزيل جميع الفئات غير المستخدمة (tree-shaking)، مما ينتج ملف CSS عادةً حوالي 10KB. إصدار CDN (المستخدم أثناء التطوير) أكبر بالفعل، لكن تشغيله عبر أداة بناء قبل النشر يُخرج حجماً صغيراً.

س من أين أبدأ تعلم Tailwind؟

ج ابدأ بفهم فلسفة الأدوات المساعدة أولاً (هذا الدرس)، ثم أعد وشغّل أداة بسيطة (الدرس التالي)، واعمل على أكثر الفئات استخداماً (التباعد، الألوان، الطباعة)، وأخيراً تعامل مع التخطيطات (Flex، Grid) والتصميم المتجاوب. درسنا يتبع هذا المسار بالضبط — فقط تابع.

📖 ملخص

Tailwind هو إطار CSS يعتمد على الأدوات المساعدة أولاً يتحكم في الأنماط عبر تجميع فئات ذرية
على عكس Bootstrap، لا يوفر Tailwind مكونات جاهزة — بل يوفر اللبنات الأساسية لإنشاء مكوناتك الخاصة
CSS التقليدي يتطلب تسمية وتبديل ملفات وتجاوز؛ Tailwind يبقي كل شيء في HTML لكفاءة أكبر
v4 مبني على محرك Rust ويستخدم @import "tailwindcss" بدلاً من تعليمات @tailwind في v3
تحتاج أساسيات HTML و CSS قبل تعلم Tailwind — يساعدك على "كتابة CSS بشكل أفضل"، وليس "تخطي تعلم CSS"
إضافة رابط CDN (<script src="https://cdn.tailwindcss.com"></script>) إلى HTML يتيح لك تجربته فوراً

📝 تمارين

أساسي (الصعوبة ⭐): خذ صفحة HTML كتبتها بالفعل (حتى بضع أسطر من النص)، أضف رابط Tailwind CDN إلى <head>، واستخدم فئات Tailwind لتغيير لون النص وحجم الخط. شاهد النتيجة.
متوسط (الصعوبة ⭐⭐): ابنِ بطاقة بسيطة بمكونات CSS المكتوبة يدوياً (على الأقل عنوان ونص وزر)، ثم أعد بناءها بـ Tailwind. قارن كمية الكود وتجربة التطوير بين النهجين. لا تقلق بشأن الجمالية — الهدف هو الشعور بالفرق.
تحدي (الصعوبة ⭐⭐⭐): افتح https://play.tailwindcss.com/ (ساحة Tailwind الرسمية) وابنِ صفحة ملف شخصي في المحرر الأيسر، تتضمن: صورة رمزية دائرية، اسم (كبير وعريض)، نبذة شخصية (نص رمادي)، ثلاث علامات مهارات (مُدورة، خلفية فاتحة اللون)، وزر. استخدم فقط فئات Tailwind — بدون CSS مخصص على الإطلاق.