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

ما هو Tailwind CSS؟

Tailwind CSS هو إطار عمل للغة CSS يركز على الوظائف (functions) أولاً، ويساعدك في بناء تصاميم مخصصة بسرعة من خلال توفير عدد كبير من الفئات (classes) العملية والبسيطة. على عكس إطارات العمل مثل Bootstrap التي توفر مكونات جاهزة مسبقًا مثل الأزرار والبطاقات (cards)، يقدم Tailwind الفئات الأساسية (atomic classes) اللازمة لبناء هذه المكونات، مثل تلك المستخدمة للتحكم في المسافات الداخلية (inner margins). p-4تُستخدم للتحكم في لون النص. text-blue-500 والتحكم في تخطيط الصناديق المرنة (Flexible Box Layout) flexالفكرة الأساسية لهذه الطريقة هي كتابة الأنماط مباشرة داخل ملفات HTML، مما يزيد بشكل كبير من كفاءة عملية التطوير ويحافظ على تناسق عالٍ في التصميم.

مبدأ العمل الأساسي له

المحرك الأساسي لـ Tailwind هو إضافة PostCSS مكتوبة بلغة JavaScript (Node.js). أثناء عملية البناء، تقوم هذه الإضافة بمسح ملفات مشروعك للبحث عن جميع الفئات (classes) المستخدمة، ثم تقوم فقط بإنشاء أنماط CSS الخاصة بهذه الفئات في ملف CSS النهائي الذي سيتم استخدامه في بيئة التشغيل. يُطلق على هذه العملية اسم “تحسين عملية تجميع الأنماط” (Optimization of Style Compilation). تضمن هذه العملية أن يكون حجم ملف CSS النهائي صغيرًا قدر الإمكان، مما يتجنب مشكلة الإزدحام الناتجة عن استيراد مكتبة CSS كاملة كما في الأطر التقليدية. tailwind.config.js يحتوي هذا ملف الإعدادات على جميع معايير التصميم المخصصة، مثل ألوان المواضيع، نسب المسافات، نقاط الاختراق (breakpoints)، وغيرها.

كيفية البدء في استخدام Tailwind CSS؟

هناك عدة طرق لبدء استخدام Tailwind CSS، وأفضلها باستخدام أداة الواجهة السطرية (CLI) الرسمية الخاصة به أو دمجه مع أدوات بناء الواجهات الأمامية (front-end building tools). فيما يلي الإجراء القياسي الذي يتم من خلال استخدام npm و PostCSS، والذي يوفر لك أكبر قدر من الميزات وأفضل أداء ممكن في مشروعك.

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

أولاً، يجب عليك تهيئة مشروع جديد وتثبيت مكتبة Tailwind CSS والاعتمادات (dependencies) الخاصة بها باستخدام أداة npm.

مساعد منشئ مواقع الويب WordPress.com

إتاحة 99.999% 99.999% + التعافي من الكوارث عبر المناطق، دعم على مدار الساعة طوال أيام الأسبوع، موقع مجاني لبناء موقع ذكاء اصطناعي مع شراء باقة المدونة

اسم نطاق مجاني لمدة عام واحد

قم بزيارة مساعد منشئ مواقع الويب ووردبريس.كوم →

مساعد منشئ مواقع الويب UltaHost

أكثر من 900 قالب مجاني وقابل للتخصيص للحصول على قوة تحسين محركات البحث التي تحتاجها لتحسين موقعك الإلكتروني من أجل عرض البحث

العرض 40%

قم بزيارة مساعد منشئ مواقع الويب UltaHost →

npm init -y
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

بعد اكتمال عملية التثبيت، ستحصل على… tailwind.config.js ملف… يجب عليك تعديل المحتويات الموجودة داخل هذا الملف. content هذه الحقول تُستخدم لتحديد الملفات التي يجب على أداة Tailwind أن تفحصها بحثًا عن أسماء الفئات (classes) المراد استخدامها في التصميم. عادةً ما تكون هذه الملفات قوالب HTML أو ملفات مكونات JavaScript وما إلى ذلك.

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

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

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

أخيرًا، قم بتكوين عملية البناء (build process). إذا كنت تستخدم أداة مثل Vite، فعليك التأكد من أن إعدادات PostCSS صحيحة. قم بإنشاء ملف خاص لإعدادات PostCSS، وضع فيه الأوامر والتنسيقات اللازمة لتعديل ملفات ال postcss.config.js ملف.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

الآن، قم بتشغيل أمر البناء (مثل…) npm run buildيعتمد الأمر تحديدًا على إعدادات السكريبت الخاص بك؛ حيث سيقوم Tailwind بمعالجة ملفات CSS الخاصة بك وإنشاء الأنماط النهائية. بعد ذلك، يمكنك استخدام الفئات المفيدة المتوفرة في Tailwind داخل ملفات HTML الخاصة بك.

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

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

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

فئات التخطيط والمسافات (Layout and Spacing Classes)

تصنيفات التخطيط مثل… flex, grid, block, inline-block يمكن استخدامه مباشرةً. يتم تحديد المسافات عن طريق… p-{size}(المسافة الداخلية) و m-{size}(المسافات الخارجية) يتم التحكم فيها، على سبيل المثال… p-4 يشير إلى مسافة الهامش (padding) الداخلية التي تساوي 1 وحدة ريم (1rem).mt-2 يشير إلى هامش علوي بقيمة 0.5rem.

<div class="flex p-4 space-x-4">
  <div class="p-2 bg-gray-200">المشروع الأول.</div>
  <div class="p-2 bg-gray-200">المشروع الثاني.</div>
</div>

الرمز الأمامي لنقاط التوقف الاستجابية (Responsive Breakpoint Prefix)

تعتبر الميزة التصميمية التكيفية (الريسبونسيفية) في Tailwind واحدة من أقوى ميزاته. حيث يحتوي Tailwind مسبقًا على خمس نقاط انقطاع (breakpoints) افتراضية:sm (640 بكسل), md (768 بكسل), lg (1024 بكسل), xl (1280 بكسل), 2xl (1536 بكسل). يمكنك بسهولة إنشاء واجهات تتكيف مع أحجام الشاشات المختلفة عن طريق إضافة بادئة محددة أمام الأسماء المتعلقة بالفئات العملية (الكلاسات البرمجية). على سبيل المثال،md:flex يعني ذلك استخدام تصميم مرن (elastic layout) في الشاشات المتوسطة والأكبر حجمًا فما فوق.text-center lg:text-left يعني ذلك أن المحتوى سيتم عرضه في المركز بشكل افتراضي، ولكن على الشاشات الكبيرة سيتم محاذاته إلى اليسار.

منشئ مواقع الويب Bluehost

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

قم بزيارة Bluehost

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

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

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

أولاً، سنقوم بكتابة هيكل التنقل الأفقي الخاص بالشاشات الكبيرة.

<nav class="bg-gray-800 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <!-- 品牌 Logo -->
    <a href="#" class="text-white text-xl font-bold">علامتي التجارية</a>
    <!-- 桌面端导航链接 -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-300 hover:text-white">شكل البداية</a>
      <a href="#" class="text-gray-300 hover:text-white">حول</a>
      <a href="#" class="text-gray-300 hover:text-white">الخدمة</a>
      <a href="#" class="text-gray-300 hover:text-white">الاتصال</a>
    </div>
    <!-- 移动端菜单按钮 -->
    <button id="menuBtn" class="md:hidden text-white">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">...</svg>
    </button>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobileMenu" class="md:hidden hidden mt-2">
    <a href="#" class="block text-gray-300 hover:text-white py-2">شكل البداية</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">حول</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">الخدمة</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">الاتصال</a>
  </div>
</nav>

إضافة وظائف تفاعلية

الهيكل HTML المذكور أعلاه يتم تنفيذه من خلال… hidden و md:flex تم تنفيذ تصميمات استجابية (responsive designs) لهذه الفئات. ومن أجل تغيير طريقة عرض أو إخفاء القوائم على الأجهزة المحمولة، نحتاج إلى بعض الكود البسيط بلغة JavaScript.

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

// 简单的菜单切换逻辑
document.getElementById('menuBtn').addEventListener('click', function() {
  const menu = document.getElementById('mobileMenu');
  menu.classList.toggle('hidden');
});

يوضح هذا المثال كيفية بناء مكون استجابي (responsive component) متكامل الوظائف وذو مظهر احترافي بسرعة، باستخدام فقط الفئات (classes) المفيدة المتوفرة في مكتبة Tailwind ودالة JavaScript بسيطة. يمكنك تعديل مظهر هذا المكون بسهولة ليتناسب مع تصميم علامتك التجارية عن طريق تغيير ألوان الخلفية، المسافات بين العناصر، تأثيرات الماوس (مثل تأثير التمرير فوق العناصر)، وغيرها من الخصائص المتاحة في هذ

الملخصات

لقد غيرت مكتبة Tailwind CSS طريقة عمل مطوري الواجهات الأمامية في كتابة الأنماط بشكل جذري، من خلال منهجيتها المبنية على استخدام الفئات العملية ذات الأولويات الواضحة. فهي تلغي تكلفة التبديل المتكرر بين ملفات HTML وCSS، وتضمن تناسق واجهة المستخدم (UI) من خلال نظام تصميم محدد بدقة، كما تضمن أداءً عاليًا للمنتج النهائي بفضل التحسينات التي تتم أثناء عملية البناء. سواء كنت تعمل على نماذج بسيطة أو تطبيقات معقدة على مستوى الشركات، توفر Tailwind تجربة تطوير ممتازة وسهولة في الصيانة. إتقان الفئات الأساسية الخاصة بها، والبادئات الاستجابية (responsive prefixes)، وطرق التكوين (configuration methods) سيساعدك بشكل كبير في تحسين كفاءة عملك وقدرتك على تنفيذ التصاميم.

hosting.com

SSL مجاني، Cloudflare CDN، Cloudflare CDN، WAF، أكثر من 40 غرفة خوادم عالمية للاختيار من بينها، ووقت استجابة أقل بالقرب منك، ودعم الخدمة على مدار الساعة طوال أيام الأسبوع/365، يمكنك الآن توفير ما يصل إلى 671 تيرابايت، ودعم إنشاءات الذكاء الاصطناعي وتحسين محركات البحث!

قم بزيارة hosting.com

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

هل ملفات CSS التي يتم إنشاؤها بواسطة Tailwind CSS ستكون كبيرة جدًا؟

لا، هذا بالضبط ما يجعل تصميم Tailwind مميزًا للغاية. في مرحلة البناء النهائي، يستخدم Tailwind أداة PurgeCSS (المدمجة الآن ضمن المحرك نفسه) لتنقية الملفات الCSS، حيث يتم الاحتفاظ فقط بالفئات (classes) التي تم استخدامها بالفعل في ملفات HTML وJavaScript وغيرها من الملفات القوالب. النتيجة هي ملف CSS يزن عادةً بضع كيلوبايتات فقط، وهو أصغر بكثير من ملفات الـ CSS الناتجة عن العديد من أطر عمل CSS التقليدية.

هل كتابة العديد من أسماء الفئات (classes) في HTML قد يجعل الكود صعب القراءة والصيانة؟

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

ما هي إطارات عمل JavaScript التي يمكن استخدامها مع Tailwind CSS؟

Tailwind CSS هو أداة لتصميم الأنماط الخاصة بالواجهات الأمامية للمواقع الإلكترونية، وهو غير مرتبط بأي إطار عمل (framework) معين، ويمكنه التعاون بشكل مثالي مع أي إطار عمل أو مكتبة أمامية. يتمتع Tailwind CSS بدعم قوي وتطبيقات واسعة الانتشار في مجتمعات المطورين المتعلقة بمنصات مثل React، Vue.js، Angular، Svelte، بالإضافة إلى أدوات إنشاء المواقع الإلكترونية الثابتة التقليدية مثل Next.js، Nuxt.js، Gatsby، وHugo. كما أن عملية عمل Tailwind CSS (مسح الملفات وإنشاء الأنماط) يمكن دمجها بسلاسة مع أدوات بناء هذه الإطارات العمل.

كيف يمكن تخصيص الموضوع الافتراضي لـ Tailwind CSS، مثل ألوان العلامة التجارية؟

يتم تخصيص المواضيع بشكل أساسي عن طريق تعديل الملفات الموجودة في المجلد الرئيسي للمشروع. tailwind.config.js يمكنك استخدام ملفات الإعدادات لإكمال العملية. theme.extend يمكن إضافة قيم افتراضية أو تغييرها في الكائنات. على سبيل المثال، لإضافة لون علامة تجارية مخصص، يمكن ضبط الإعدادات كالتالي:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      }
    }
  }
}

بعد الانتهاء من التهيئة، ستتمكن من استخدامها في المشروع. bg-brand-blue أو text-brand-blue هذا النوع من الفئات (classes) يسمح بتخصيص جميع الخصائص الأساسية مثل الأبعاد (dimensions)، الخطوط (fonts)، نقاط الاستئناف (breakpoints)، وغيرها، بطريقة مماثلة.