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

دليل مبتدئين وعملي لـ Tailwind CSS: بناء واجهات رائدة ومتجاوبة من الصفر

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

ما هو Tailwind CSS؟

Tailwind CSS هو إطار عمل للغة CSS يركز على الوظائف (Functionality)، ويساعد المطورين على بناء واجهات مستخدم مخصصة بسرعة من خلال توفير عدد كبير من الفئات العملية (Utility Classes) القابلة للدمج مع بعضها البعض. على عكس إطارات العمل الأخرى مثل Bootstrap التي توفر مكونات جاهزة مسبقًا، لا يقدم Tailwind CSS أي مكونات كاملة الوظائف، بل يوفر فئات CSS دقيقة ومجزأة إلى أجزاء أصغر (Atomic Classes)، مما يسمح لك بكتابة الأنماط مباشرة في كود HTML.

المفهوم الأساسي هو “العملية أولاً”. هذا يعني أنك لست مضطرًا للتبديل المتكرر بين ملفات CSS وملفات HTML، ولا لبذل جهد كبير في تسمية الكلاسات للمكونات (مثل…). .card__header--activeكل ما عليك فعله هو دمج مجموعة من الأدوات الوصفية معًا لتحقيق أي تصميم تريده. على سبيل المثال، إذا أردت إنشاء بطاقة بزوايا مستديرة ومسافات داخلية وظلال، فكل ما عليك كتابته هو… class="rounded-lg p-6 shadow-md"لقد ساعد هذا الأسلوب بشكل كبير في تحسين كفاءة عملية التطوير، وفي الحفاظ على تناسق الأنماط (التصميمات).

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

هناك عدة طرق لبدء استخدام Tailwind CSS، وأكثرها شيوعًا هو دمجه مع أداة سطر الأوامر (command-line tool) وعمليات بناء المشاريع (project build processes).

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

تثبيت الحزمة الأساسية عبر npm

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

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

سيتم تثبيت Tailwind CSS و PostCSS الذي يُستخدم لمعالجة ملفات CSS، بالإضافة إلى أداة Autoprefixer التي تقوم تلقائيًا بإضافة البادئات المناسبة لمتصفحات الويب.npx tailwindcss init سيقوم الأمر بإنشاء ملف تكوين افتراضي. tailwind.config.js。

تكوين مسار المحتوى وإنشاء ملفات CSS

بعد ذلك، ستحتاج إلى إجراء الإعدادات اللازمة. tailwind.config.js الملفات: تحدد هذه الملفات التي يجب على أداة Tailwind أن تفحصها لتوليد الأنماط المطلوبة. content أضف المسار إلى ملف القالب الخاص بك إلى المصفوفة.

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

ثم، قم بإنشاء ملف CSS رئيسي (على سبيل المثال: src/input.css)، وأضف تعليمات Tailwind.

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

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

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

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

الآن، يمكنك إدخال المحتوى المولد إلى ملف HTML الخاص بك. ./dist/output.css قم بتحميل الملفات، ثم بدأ في استخدام الفئات (classes) المفيدة المتوفرة في Tailwind.

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

تغطي الفئات العملية في Tailwind CSS معظم خصائص CSS، وتتبع نظام تسمية دقيقًا بالإضافة إلى رموز تصميم موحدة.

نظرة سريعة على أدوات الاستخدام الشائعة

عادةً ما يتم تسمية أدوات البرمجة بشكل مباشر وفقًا لخصائص CSS، مع استخدام اختصارات. على سبيل المثال:
المسافة بين الأحرف:p-4 padding: 1rem;, m-2 (margin: 0.5rem), space-x-4 (المسافة الأفقية بين العناصر الفرعية).
التنسيق:text-lg (حجم الخط), font-bold (سمك الخط), text-center (تنسيق النص).
اللون:bg-blue-500 (لون الخلفية), text-gray-800 (لون النص), border-red-300 (لون الإطار).
التخطيط:flex, items-center (align-items: center), justify-between (justify-content: space-between).
الأبعاد:w-64 (عرض: 16rem), h-full (الارتفاع: 100%).
* 效果：rounded (زوايا مستديرة), shadow (الظل), opacity-50 (الشفافية).

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

تحقيق تصميم واجهة متجاوب (Responsive Design)

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

على سبيل المثال، الكود التالي ينشئ تخطيطًا يتميز بترتيب المكونات بشكل متداخل (مكدس) بشكل افتراضي، ويتم عرض هذه المكونات جنبًا إلى جنب على الشاشات المتوسطة الحجم:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4 bg-blue-100">المحتوى على الجانب الأيسر.</div>
  <div class="w-full md:w-1/2 p-4 bg-green-100">المحتوى على الجانب الأيمن.</div>
</div>

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

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

التطبيق العملي: بناء مكون شريط التنقل (Navigation Bar)

دعونا نطبق ما تعلمنا من خلال إنشاء شريط تنقل تفاعلي (responsive navigation bar) شائع الاستخدام. يظهر هذا الشريط بشكل أفقي على الشاشات الكبيرة، بينما يتم طيه ليتحول إلى قائمة هامبرغر (hamburger menu) على الشاش

إعداد الهيكل الأساسي والتصميم (Writing the basic structure and styling)

أولاً، نقوم بإنشاء الهيكل الأساسي لشريط التنقل (navigation bar) باستخدام لغة HTML، ثم نطبق عليه الأنماط الأساسية (basic styles).

hosting.com
SSL مجاني، Cloudflare CDN، Cloudflare CDN، WAF، أكثر من 40 غرفة خوادم عالمية للاختيار من بينها، ووقت استجابة أقل بالقرب منك، ودعم الخدمة على مدار الساعة طوال أيام الأسبوع/365، يمكنك الآن توفير ما يصل إلى 671 تيرابايت، ودعم إنشاءات الذكاء الاصطناعي وتحسين محركات البحث!
LOGO قم بزيارة hosting.com 
<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white font-bold text-xl">علامتي التجارية</a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">شكل البداية</a>
          <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">نبذة عنا</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">الخدمة</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">الاتصال</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化版） -->
          <span class="sr-only">افتح القائمة الرئيسية.</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

في هذه اللحظة، تم إكمال عملية التنقل على واجهة سطح المكتب. نحن نستخدم… hidden md:block يتم عرض روابط التنقل على سطح المكتب فقط على الشاشات المتوسطة والأكبر حجمًا.

إضافة التفاعلية والقائمة المتنقلة

لعرض القائمة عند النقر على زر في الجهاز المحمول، نحتاج إلى استخدام بعض لغة JavaScript. في هذا المثال، نستخدم كودًا بسيطًا من JavaScript الأصلي لتغيير الفئة (class) المسؤولة عن عرض القائمة أو إخفائها.
أولاً، قم بإضافة معرفات (IDs) لزروع القائمة المتنقلة ومحتويات القائمة، ثم قم بتعديل زروع القائمة بحيث تقوم بتنفيذ الدوال (functions) المطلوبة عند النقر عليها.

<!-- 修改后的移动端菜单按钮 -->
<button id="mobile-menu-button" type="button" class="..."> ... </button>

<!-- 新增的移动端菜单内容，初始隐藏 -->
<div id="mobile-menu" class="md:hidden hidden">
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">شكل البداية</a>
    <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">نبذة عنا</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">الخدمة</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">الاتصال</a>
  </div>
</div>

ثم، أضف السكريبت في أسفل الصفحة.

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

menuButton.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
  });
</script>

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

الملخصات

لقد غيرت مكتبة Tailwind CSS طريقة عمل المطورين في كتابة الأنماط بشكل جذري من خلال مفهومها القائم على “أولوية العملية” (practicality first). فهي تنقل عملية اتخاذ قرارات التصميم من ملفات CSS إلى قوالب HTML، وتحقق كفاءة عالية في التطوير وتناسقًا في التصميم من خلال دمج فئات أدوات دقيقة ومتنوعة. توفر Tailwind سلسلة كاملة وفعالة من أدوات التطوير للواجهات الحديثة، بدءًا من إعدادات البيئة واستخدام الفئات الأساسية، مرورًا بنظام نقاط الاستجابة (responsive breakpoints)، وصولاً إلى بناء المكونات العملية (practical components).

على الرغم من أنه يتطلب في المراحل الأولى حفظ عدد كبير من أسماء الفئات (classes)، إلا أن قواعد التسمية الواضحة والوثائق المتاحة تساعدك على البدء في العمل بسرعة. بالنسبة للفرق والمشاريع التي تسعى إلى تحسين سرعة التطوير وحرية التصميم والتحكم في حجم الملفات النهائية، فإن Tailwind CSS بلا شك يعتبر حلًا قويًا وأنيقًا.

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

هل ملفات أنماط Tailwind CSS قد تكون كبيرة الحجم؟

لا. يستخدم Tailwind CSS تقنية PurgeCSS (التي تُعرف الآن باسم Content Scanning) في البيئات الإنتاجية؛ حيث تقوم هذه التقنية بتحليل ملفات مشروعك وتضمن فقط تضمين الكلاسات (classes) التي تم استخدامها فعليًا في ملف CSS النهائي. وهذا يجعل ملف CSS الناتج مضغوطًا للغاية، حيث يتراوح حجمه عادةً بين بضعة كيلوبايتات وعشرات الكيلوبايتات فقط.

ما هي المزايا الرئيسية لـ Tailwind CSS مقارنةً بـ Bootstrap؟

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

في مشاريع الفريق، كيف يمكن الحفاظ على تناسق كود Tailwind CSS؟

يمكن الجمع بين ملفات تكوين Tailwind CSS وإضافات محركات التطوير المتكاملة (IDEs) للاستفادة القصوى من إمكانيات Tailwind CSS. tailwind.config.js تم تعريف ألوان المشروع والمسافات بين العناصر وأنواع الخطوط وغيرها من عناصر التصميم بشكل موحد. يمكن لأعضاء الفريق استخدام إضافات VS Code أو IntelliJ IDE الرسمية، والتي توفر ميزات مثل التكملة التلقائية للنصوص وتمييز الكود البرمجي وعرض معاينات عند وضع المؤشر فوق الكلمات المطلوبة. هذه الميزات تساعد في تقليل أخطاء إملائية أسماء الكلاسات وتحسي

كيفية التعامل مع حالات التأثيرات المعقدة عند المرور فوق العناصر (hover effects) أو عند تحديد التركيز عليها (focus effects) في أكواد Tailwind CSS؟

توفر لغة تصميم الويب Tailwind CSS مجموعة واسعة من البادئات (prefixes) لتمثيل متغيرات الحالة (state variations)، مثل… hover:, focus:, active:, disabled: إلخ. يمكنك بسهولة إضافتها أمام أي فئة أدوات (tool class). على سبيل المثال،hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 يمكن تعريف لون خلفية زر معين عند وضع الماوس فوقه (التمرير فوقه)، بالإضافة إلى تحديد خطوط دائرية حول الزر عندما يحصل على التركيز (عندما يكون مفعّلًا أو محددًا كخيار رئيسي).

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

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

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

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

الوسوم