Tailwind CSS: ما هو Tailwind CSS؟

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

1. ما هو Tailwind CSS؟

Tailwind CSS هو إطار عمل CSS يُعتمد على الأدوات المساعدة أولاً. وتتمثل فكرته الأساسية في: تطبيق الفئات المُحدَّدة مسبقًا مباشرةً في كود 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">Click me</button>

▶ جرّب الكود

Tailwind:

▶ مثال: نهج «تايلويند» (مستوى الصعوبة ⭐)

HTML

<button class="bg-blue-600 text-white px-6 py-3 rounded-lg text-base cursor-pointer hover:bg-blue-700">
  Click me
</button>

▶ جرّب الكود

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

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

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

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

(1) مقابل Bootstrap

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

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

(2) مقابل CSS المكتوب يدويًّا

الجانب	CSS المكتوب يدويًّا	Tailwind CSS
تسمية	كل نمط يحتاج إلى اسم فئة	لا حاجة للتسمية — ما عليك سوى تكوين الفئات
التبديل بين الملفات	التنقل بين ملفات HTML وCSS	كل شيء موجود في ملف HTML
حجم الكود	مجموعتان من الملفات، بكمية كبيرة	سطر واحد من الفئات يكفي للقيام بالمهمة
سهولة الصيانة	البحث عن النمط في 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>Tailwind Profile Card</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="Avatar"
         class="w-20 h-20 rounded-full mx-auto mb-3">
    <h2 class="text-xl font-bold text-gray-900 mb-1">John Doe</h2>
    <p class="text-sm text-blue-600 mb-2">Frontend Engineer</p>
    <p class="text-sm text-gray-500 mb-4">Passionate about coding, focused on Web development</p>
    <button class="bg-blue-600 text-white px-6 py-2 rounded-lg cursor-pointer
                   hover:bg-blue-700 transition-colors">
      Contact Me
    </button>
  </div>
</body>
</html>

▶ جرّب الكود

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

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

3. التغييرات الرئيسية في Tailwind CSS الإصدار 4

تم إصدار Tailwind CSS الإصدار 4 في مارس 2025، حيث قدم تحسينات هيكلية كبيرة مقارنة بالإصدار 3:

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

بالنسبة للمبتدئين، فإن أهم ما يمكن استخلاصه من الإصدار 4 هو أن التكوين أصبح أبسط — فالسيناريوهات التي كانت تتطلب في السابق تثبيت حزم 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 قبل المتابعة.

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

النماذج الأولية السريعة: بدءًا من نموذج التصميم وصولاً إلى الصفحة الجاهزة للعمل، يُعد 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 يبلغ حجمه عادةً حوالي 10 كيلوبايت. صحيح أن نسخة CDN (المستخدمة أثناء التطوير) أكبر حجمًا بالفعل، لكن تشغيلها عبر أداة إنشاء قبل النشر ينتج عنه ملف صغير الحجم.

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

ج ابدأ بفهم فلسفة «Utility-First» (هذا الدرس)، ثم قم بإعداد وتشغيل مثال بسيط (الدرس التالي)، وتعرّف على الفئات الأكثر استخدامًا (المسافات، والألوان، والخطوط)، وأخيرًا تعرّف على التخطيطات (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/ (منصة Playground الرسمية لـ Tailwind على الإنترنت) وقم بإنشاء صفحة ملف تعريف شخصي في المحرر الموجود على اليسار، تتضمن: صورة رمزية دائرية، واسمًا (كبيرًا وسميكًا)، وسيرة ذاتية (بنص رمادي)، وثلاث علامات مهارات (مدورة، بخلفية فاتحة اللون)، وزرًا. استخدم فئات Tailwind فقط — دون استخدام أي CSS مخصص على الإطلاق.

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

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

من نحن