شكل البداية/المتعلقة بالمعرفة/إنشاء المواقع/تفاصيل المحتوى

مقدمة في Tailwind CSS وتطبيقات عملية: بناء صفحات ويب استجابية حديثة من الصفر

قراءة 3 دقائق
2026-03-14
2,633
أنا أحصل على عمولة عند التسوق عبر الروابط أدناه، ولا يُضاف أي تكلفة عليك.

ما هو Tailwind CSS؟

في مجال تطوير الواجهات الأمامية اليوم،Tailwind CSS لقد أصبح وجودًا لا يمكن تجاهله. إنه ليس إطار عمل CSS تقليديًا، بل مجموعة أدوات عملية تركز على الوظائف أولاً (Utility-First CSS Framework). على عكس إطارات العمل مثل Bootstrap التي توفر مكونات محددة مسبقًا مثل الأزرار والبطاقات،Tailwind CSS تم توفير عدد كبير من الفئات (classes) الخاصة بلغة CSS ذات الدقة العالية والطبيعة “الذرية” (atomic nature)، مما يسمح للمطورين ببناء أي تصميم من خلال دمج هذه الفئات مباشرة على عناصر HTML.

الفلسفة الأساسية لهذا الأسلوب هي تطبيق ممارسة جديدة تُعرف باسم “فصل نقاط التركيز” (Separation of Concerns): وتتمثل هذه الممارسة في إعادة وضع أكواد الأنماط (styles) من ملفات CSS إلى داخل علامات HTML نفسها. قد يبدو الأمر وكأنه خطوة إلى الوراء، لكن في الواقع يحل العديد من المشاكل المرتبطة بطريقة كتابة CSS التقليدية، مثل الحاجة إلى التفكير بعمق عند اختيار أسماء الفئات (classes)، والقلق بشأن تداخل الأنماط (style overlaps)، وإدار Tailwind CSSكل ما عليك فعله هو تذكر مجموعة واحدة موحدة من أسماء الفئات (classes) ذات الوظائف المحددة، وبذلك يمكنك تطبيق جميع الأنماط مثل المسافات الداخلية والخارجية (padding وmargin)، الألوان، أحجام الخطوط (font

إعداد البيئة والتكوينات الأساسية

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

القراءة الموصى بها استكشاف Tailwind CSS: دليل تقني عملي للمبتدئين إلى الخبراء.。

قم بتثبيت الاعتمادات الأساسية من خلال مدير الحزم.

أولاً، قم بتهيئة المشروع باستخدام أداة npm أو yarn، ثم قم بتثبيت المكونات اللازمة. Tailwind CSS وما يعتمد عليه. قم بتنفيذ الأوامر التالية في المجلد الرئيسي لمشروعك:

مساعد منشئ مواقع الويب WordPress.com
مساعد منشئ مواقع الويب WordPress.com
إتاحة 99.999% 99.999% + التعافي من الكوارث عبر المناطق، دعم على مدار الساعة طوال أيام الأسبوع، موقع مجاني لبناء موقع ذكاء اصطناعي مع شراء باقة المدونة
اسم نطاق مجاني لمدة عام واحد
قم بزيارة مساعد منشئ مواقع الويب ووردبريس.كوم →
مساعد منشئ مواقع الويب UltaHost
مساعد منشئ مواقع الويب UltaHost
أكثر من 900 قالب مجاني وقابل للتخصيص للحصول على قوة تحسين محركات البحث التي تحتاجها لتحسين موقعك الإلكتروني من أجل عرض البحث
العرض 40%
قم بزيارة مساعد منشئ مواقع الويب UltaHost → 
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

تم تثبيت الأمر الأول. tailwindcss مخصص لمعالجة ملفات CSS. postcssوكذلك إضافة البادئات الخاصة بالمتصفحات لخصائص CSS. autoprefixerالأمر الثاني سينتج ملفًا بالاسم tailwind.config.js ملف الإعدادات هذا يُستخدم للتخصيص. Tailwind CSS الملف الأساسي.

تكوين الملفات الأساسية وإضافة الأنماط

بعد ذلك، من الضروري إجراء التكوينات اللازمة. tailwind.config.js الملف، كما هو محدد Tailwind CSS ما هي الملفات التي يجب مسحها لإنشاء ملف CSS النهائي؟ هذا أمر بالغ الأهمية لتفعيل وضع التجميع الفوري (JIT – Just-In-Time Compilation) وإزالة الأنماط غير المستخدمة.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

ثم، في ملف CSS الرئيسي الخاص بك (على سبيل المثال… src/styles.css أو src/index.cssإدخال Tailwind CSS تعليمات:

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

أخيرًا، تأكد من أن أدوات البناء الخاصة بك (مثل Vite أو Webpack) مُعدة بشكل صحيح لاستخدام PostCSS لمعالجة ملفات CSS. إذا كنت تستخدم أدوات حديثة مثل Create React App أو Vite، فعادة ما يكفي تثبيت الاعتمادات اللازمة وإنشاء ملفات الإعدادات، حيث ستتولى هذه الأدوات معالجة العمليات اللاحقة تلقائيًا.

القراءة الموصى بها بناء مواقع ويب حديثة ومتجاوبة باستخدام Tailwind CSS: دليل تعليمي من البداية إلى النهاية.。

الفئات الأساسية والعملية والتصميم التكيفي (Core Practical Classes and Responsive Design)

إتقان Tailwind CSS المفتاح يكمن في فهم اتفاقيات التسمية ونظام البادئات الاستجابية (responsive prefixes) المستخدمة فيه. عادةً ما تتوافق أسماء الفئات (classes) مباشرةً مع خصائص CSS، ويوجد لدى هذا النظام مجموعة من الرموز (tokens) المصممة

قواعد تسمية الفئات الذرية الشائعة الاستخدام

Tailwind CSS تصميم أسماء الفئات (classes) مباشر للغاية. على سبيل المثال، استخدام أسماء محددة لتحديد خصائص معينة مثل تعيين المسافات الداخلية (padding). p-{size}والتي p باسم padding，size إنها سلسلة من الأحجام المحددة مسبقًا (مثل 0، 1، 2، 4، 6… والتي تتوافق مع 0rem، 0.25rem، 0.5rem، 1rem، 1.5rem…).mx-auto تُشير إلى أن هامش الجانب الأفقي يتم تحديده تلقائيًا، وغالبًا ما تُستخدم هذه الخاصية لتحديد مواقع العناصر بشكل مركزي. توجد فئات للألوان مرتبطة بهذه الخاصية… bg-blue-500(لون الخلفية)text-gray-800(لون النص)، الأرقام تمثل درجة كثافة اللون.

تتبع فئات النصوص والأحجام نفس القاعدة أيضًا:text-lg يُشير إلى استخدام خط كبير الحجم.font-bold يُشير إلى الخط العريض (الخط البارز).w-64 يشير ذلك إلى أن عرض العنصر هو 16 وحدة ريم (rem). الفئات المستخدمة في التخطيط (layout classes) مثل… flex, items-center, justify-between تتوافق مباشرة مع خصائص Flexbox، مما يتيح لك تحقيق تخطيطات معقدة دون الحاجة إلى كتابة أي كود CSS مخصص.

منشئ مواقع الويب Bluehost
تقدم أداة إنشاء مواقع الويب بالذكاء الاصطناعي، ودعم عبر الدردشة المباشرة والدعم عبر الهاتف على مدار الساعة طوال أيام الأسبوع، واسم نطاق مجاني لمدة عام واحد، وشبكة CDN مجانية، واتفاقية مستوى الخدمة 99.99%
شعار مساعد الموقع الإلكتروني قم بزيارة Bluehost

تحقيق واجهة متجاوبة تعطي الأولوية للأجهزة المحمولة

Tailwind CSS يتم استخدام نظام نقاط التوقف (breakpoints) المصمم ليعطي الأولوية للأجهزة المحمولة. جميع الكلاسات العملية مصممة مسبقًا لتناسب الأجهزة المحمولة، ومن ثم يتم تكييفها للشاشات الأكبر عن طريق إضافsm: (640 بكسل), md: (768 بكسل), lg: (1024 بكسل), xl: (1280 بكسل), 2xl: (1536 بكسل).

هذا يعني أنه يمكنك كتابة واجهة برمجية لحاوية البطاقات التفاعلية (responsive card container) على النحو التالي:

<div class="flex flex-col p-4 md:flex-row md:p-8 lg:p-12">
  <img src="..." class="w-full md:w-1/3" />
  <div class="mt-4 md:mt-0 md:ml-6 md:w-2/3">
    <h2 class="text-xl font-bold">التسمية التوضيحية</h2>
    <p class="text-gray-600">وصف المحتوى….</p>
  </div>
</div>

في المثال أعلاه، على الأجهزة المحمولة، يتم ترتيب العناصر بشكل عمودي (مكدسة بشكل عمودي).flex-colويحتوي أيضًا على هامش داخلي أصغر.p-4في الشاشات متوسطة الحجم والأكبر، يتم ترتيب العناصر أفقيًا.md:flex-rowوزيادة المسافة الداخلية (padding).md:p-8على الشاشات الكبيرة، تكون هناك مسافات داخلية أكبر (أي هناك مساحات فارغة أكبر بين العناصر المعروضة على الشاشة).lg:p-12عرض الصورة يشغل ثلث الشاشة في الحجم المتوسط، بينما تشغل المنطقة اليمنى ثلثي الشاشة مع إضافة مسافة بينها وبين الجزء الأيسر. هذا التصميم يعكس بوضوح المنطق التفاعلي (الريسبونسيف) في بن

القراءة الموصى بها اكتساب المفاهيم الأساسية لـ Tailwind CSS: من الفئات العملية إلى التصميم التفاعلي العملي。

التطبيق العملي: بناء شريط تنقل يتكيف مع أحجام الشاشات

دعونا نطبق المعرفة التي تمت مناقشتها أعلاه من خلال إنشاء شريط تنقل استجابي شائع. يظهر هذا الشريط جميع الروابط بشكل أفقي على الأجهزة المكتبية، بينما يتم طيه ليتحول إلى قائمة هامبرغر على الأجهزة الم

بناء هيكل HTML والأنماط الأساسية

أولاً، نقوم ببناء الهيكل الأساسي للصفحة باستخدام لغة HTML، ثم نطبق بعض الكلاسات العملية (classes) لتحديد تنسيق الصفحة (التخطيط)، الألوان، والمسافات بين العناصر.

hosting.com
SSL مجاني، Cloudflare CDN، Cloudflare CDN، WAF، أكثر من 40 غرفة خوادم عالمية للاختيار من بينها، ووقت استجابة أقل بالقرب منك، ودعم الخدمة على مدار الساعة طوال أيام الأسبوع/365، يمكنك الآن توفير ما يصل إلى 671 تيرابايت، ودعم إنشاءات الذكاء الاصطناعي وتحسين محركات البحث!
LOGO قم بزيارة hosting.com 
<nav class="bg-white shadow-lg">
  <div class="max-w-6xl mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <!-- 品牌Logo -->
      <div class="flex-shrink-0">
        <span class="text-2xl font-bold text-blue-600">علامتي التجارية</span>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:flex space-x-8">
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">شكل البداية</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">حول</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">الخدمة</a>
        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">الاتصال</a>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" id="menu-btn" class="text-gray-700 hover:text-blue-600 focus:outline-none">
          <!-- 汉堡菜单图标，这里用简单文字代替 -->
          <svg class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">...</svg>
        </button>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单（初始隐藏） -->
  <div id="mobile-menu" class="md:hidden hidden">
    <div class="px-2 pt-2 pb-3 space-y-1">
      <a href="#" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">شكل البداية</a>
      <a href="#" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">حول</a>
      <a href="#" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">الخدمة</a>
      <a href="#" class="block text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-base font-medium">الاتصال</a>
    </div>
  </div>
</nav>

إضافة وظائف تفاعلية وفئات لتمثيل الحالات (States).

الكود HTML المذكور أعلاه يحدد حاوية مخفية لقائمة الموبايل (mobile menu).class="md:hidden hidden"نحتاج إلى كمية بسيطة من الكود البرمجي بلغة JavaScript لتغيير طريقة عرضه. في الوقت نفسه،Tailwind CSS تم توفير مجموعة قوية من الاختلافات في الحالات (status variations)، مثل… hover:、focus:、active:لقد استخدمنا بالفعل هذا الرابط في محتوانا. hover:text-blue-600 لتحقيق تأثير التمرير فوق العنصر (الهايلايت effect).

يتم إضافة سكريبتات التفاعل عادةً قبل علامة إنهاء تنسيق الجزء الرئيسي (body) من الصفحة (body tag):

<script>
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');

menuBtn.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
    // 可选：为按钮图标添加旋转等动画效果，这里省略
  });
</script>

وبهذا، تم إنشاء شريط تنقل تفاعلي (responsive navigation bar) يحتوي على جميع الميزات الضرورية. لقد تم استغلال إمكانياته بشكل كامل… Tailwind CSS يتم استخدام الفئات العملية (practical classes) لتعريف الأنماط، وذلك من خلال استخدام البادئات المتعلقة بالتصميم الاستجابي (responsive design prefixes). md: و hidden تم استخدام فئات (classes) للتحكم في منطق العرض على شاشات مختلفة، مما جعل الكود موجزًا وواضح الغرض.

الملخصات

Tailwind CSS لقد غيرت هذه الأداة بشكل جذري طريقة مطوري الويب في كتابة وصيانة الأنماط، من خلال منهجيتها الفريدة والعملية. فهي تلغي تكلفة التنقل ذهابًا وإيابًا بين ملفات HTML وCSS، وتقلل من عبء تسمية الأسماء المخصصة للفئات (classes)، وتضمن التناسق البصري من خلال نظام تصميم قيودي (restrictive design system). كما أن إمكانيات التصميم التفاعلي (responsive design) المدمجة، والتنويعات في الحالات (state variations)، والقدرات الواسعة على التخصيص تجعل عملية التطوير فعالة للغاية، سواء كان الأمر يتعلق بإنشاء نماذج أولية سريعة أو تطبيقات جاهزة للاست

على الرغم من أنه يتطلب في البداية حفظ عدد كبير من أسماء الفئات، إلا أن سرعة التطوير ستتحسن بشكل كبير بمجرد التعود على نمط التسمية. الأهم من ذلك، أن ملفات CSS الناتجة في النهاية يمكن أن تصبح صغيرة جدًا بفضل آلية “Purge”， مما يحل المشاكل المحتملة في الأداء التي قد تواجهها ملفات CSS التقليدية. بالنسبة للفرق والمشاريع الفردية التي تسعى إلى كفاءة التطوير واتساق التصميم وأداء عالٍ، فإن هذا الأمر مهم للغاية.Tailwind CSS لا شك أنه أداة حديثة ذات قيمة كبيرة.

الأسئلة الشائعة الأسئلة المتداولة

يبدو HTML الذي تنتجه Tailwind CSS فوضويًا، كيف يمكن حل ذلك؟

بالفعل، تراكم عدد كبير من الكلاسات العملية مباشرة داخل HTML قد يقلل من قابلية قراءة القوالب.

Tailwind CSS تم تقديم عدة حلول. أولاً، يمكن استخدام… @apply يتم في ملفات CSS استخراج مجموعات الكلاسات المفيدة المكررة وتجريدها إلى كلاسات مكونات مخصصة. ثانيًا، في الأطر المبنية على المكونات (مثل React وVue)، يتم عزل هذا “الفوضى” بشكل طبيعي داخل كل مكون، مما يجعل اعتمادات الأنماط أكثر وضوحًا. وأخيرًا، يمكن لمحررات جيدة وإضافات مثل Tailwind CSS IntelliSense أن تحسن تجربة الكتابة بشكل كبير.

ما مدى أداء Tailwind CSS مقارنةً بـ CSS التقليدي أو Bootstrap؟

من حيث الأداء،Tailwind CSS عادةً ما تتمتع بمزايا واضحة، خاصة في بيئات الإنتاج.

يرجع الفضل الأساسي في ذلك إلى آلية “التنظيف” (purge mechanism) المتوفرة في هذا الأداة؛ حيث تم تفعيل محرك التجميع الديناميكي (JIT) بشكل افتراضي في عام 2026. تقوم أداة البناء (build tool) بمسح كود المصدر الخاص بك وتضمين فقط الكلاسات الضرورية والمستخدمة فعليًا في ملف CSS النهائي، مما ينتج عنه حزمة CSS صغيرة جدًا الحجم. بالمقارنة، فإن كتابة CSS يدويًا بشكل تقليدي أو استيراد مكتبة Bootstrap بأكملها عادة ما يؤدي إلى إنتاج كميات كبيرة من أكواد الأنماط غير المستخدمة. لذلك، فإن التكوين الصحيح لهذه الأداة يع Tailwind CSS غالبًا ما تنتج المشاريع ملفات CSS بحجم بضع كيلوبايت فقط.

كيف يمكن تخصيص ألوان الموضوع والمسافات وغيرها من عناصر التصميم؟

تصميم رموز (tokens) مخصصة أمر بسيط للغاية، ويتم ذلك بشكل أساسي عن طريق تعديل الملفات الموجودة في المجلد الرئيسي (الجذري) للمشروع. tailwind.config.js تنفيذ الملفات.

يمكنك القيام بذلك ضمن عملية تكوين الكائنات (configuration of objects). theme.extend يمكن إضافة بعض القيم أو تغيير القيم الافتراضية. على سبيل المثال، إذا أردت إضافة لون خاص بالعلامة التجارية وزيادة نسبة المسافات بين العناصر، فيمكن ضبط الإعدادات كالتالي:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand': '#5c6ac4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

بعد ذلك، يمكنك استخدام أشياء مثل bg-brand و w-128 هذا النوع من الفئات (classes) يسمح بتنسيق المشروع بشكل مثالي مع نظام التصميم (design system).

كيف يمكن ضمان توحيد استخدام أداة Tailwind CSS في مشاريع الفريق؟

ضمان الاتساق يتطلب الجمع بين الأدوات والاتفاقيات المعمول بها.

أولاً، ملفات الإعدادات الموحدة tailwind.config.js في الأساس، هذا المصدر نفسه يمثل مرجعًا لمعايير التصميم. ثانيًا، يمكن استخدام إضافة Prettier لتحسين شكل الكود (مثل…). prettier-plugin-tailwindcssيتم ترتيب أسماء الفئات تلقائيًا لتشكيل تسلسل كتابة موحد. أثناء مراجعة الكود، يمكن التحقق مما إذا كان هناك استخدام غير ضروري لأسماء الفئات بشكل مختلط. @apply وبالنسبة للمكونات المعقدة جدًا، يمكن للفريق الاتفاق على استخدام أساليب تصميم الواجهات (CSS) الأصلية (المتوفرة في مكتبة CSS القياسية) داخل مجلدات محددة. @apply قم بإنشاء فئات مكونات واضحة، وقم بإدارتها كواجهة برمجة تطبيقات (API) للأنماط المشتركة.

ما التالي، ما التالي؟

إذا كنت ترغب في إنشاء موقع ويب بسرعة، فإن الخطوة التالية هي مواصلة مقارنة قدرات القوالب، والقابلية للتوسعة، وتكاليف الصيانة اللاحقة لمختلف منصات إنشاء المواقع.

القراءة الموسعة والمعرفة العملية

فيما يلي بعض الموضوعات ذات الصلة بموضوع هذه المقالة وهي مناسبة لمزيد من القراءة المتعمقة. وغالباً ما يكون من الأفضل إعطاء الأولوية للبدء بالمقال الأقرب إلى مشكلتك الحالية ثم التوسع تدريجياً إلى المواضيع المحيطة.

الوسوم