دليل متقن لاستخدام Tailwind CSS: من المبادئ الأساسية إلى بناء واجهات رائدة تتكيف مع الأجهزة المختلفة

ما هو Tailwind CSS؟

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

عند استخدام Tailwind CSS، لا حاجة لك إلى… style.css في الملف، تم كتابة كمية كبيرة من أكواد CSS المخصصة، بدلاً من ذلك تم استخدام تركيبات من مكونات مثل… flex、pt-4、text-center و bg-red-500 يتم استخدام هذا النوع من الكلاسات لتصميم الصفحات. هذه الطريقة تقلل بشكل كبير من عمليات تغيير سياق العرض (context switching)، نظرًا لأن الأنماط (styles) مرتبطة ارتباطًا وثيقًا بالهيكل (HTML). كما أنها تساعد في توليد ملفات CSS صغيرة جدًا وجاهزة للاستخدام في الإنتاج

المفاهيم الأساسية والإعدادات الأولية

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

طريقة العمل في المجالات العملية (العملية)

فئات Tailwind العملية تتوافق مباشرة مع خصائص CSS. على سبيل المثال،mt-4 المقابل margin-top: 1rem;，text-blue-600 المقابل color: #2563eb;أسماء هذه الفئات (classes) متكيفة مع مختلف أحجام الشاشات (متجاوبة، responsive). يمكنك تحسين أداء هذه الفئات عن طريق إضافة بادئات معينة (prefixes) قبل أسماء الفئات، مثل… md:、lg:يمكن استخدام كود (CSS) لتحديد الأنماط المناسبة لأحجام الشاشات المختلفة. على سبيل المثال،md:flex يشير ذلك إلى أن التطبيق مناسب للشاشات ذات الحجم المتوسط والأكبر. display: flex;。

التثبيت والتكوين الأولي

عادةً ما يتم تثبيت Tailwind باستخدام أداة npm أو yarn، ويعمل كإضافة (plugin) لـ PostCSS. أولاً، قم بتهيئة المجلد الرئيسي للمشروع (root directory) وتثبيت الاعتمادات (dependencies) اللازمة:

مساعد منشئ مواقع الويب 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 ملف الإعدادات. يجب عليك تحديد مسار ملف القالب في هذا الملف حتى يتمكن Tailwind من مسحه وإنشاء الأنماط المناسبة.

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

ثم، في ملف CSS الرئيسي الخاص بك (على سبيل المثال… src/input.cssالأوامر اللازمة لاستيراد مكتبة Tailwind في ملف الـ `package.json`:

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

وأخيرًا، من خلال إنشاء أوامر (مثل…) npx tailwindcss -i ./src/input.css -o ./dist/output.css --watchيتم استخدام هذه الأدوات لتجميع وإنشاء النسخة النهائية من المنتج التي ستُستخدم في الإنتاج. output.css ملف.

إنشاء تصميم واجهة مستجيب (Responsive Design)

تتبنى Tailwind استراتيجية تصميم متجاوبة تركز على الأجهزة المحمولة أولاً؛ حيث تكون الفئات البرمجية الافتراضية مخصصة للأجهزة المحمولة، ويتطلب إضافة بادئات خاصة لتحديد نقاط القطع (breakpoints) الأك

استخدام بادئات نقاط التوقف (Breakpoint Prefixes)

الإطار مزود مسبقًا بخمس نقاط توقف (breakpoints):sm (640 بكسل)md (768 بكسل)lg (1024 بكسل)xl (1280 بكسل) و 2xl (1536 بكسل). لإنشاء تخطيط متجاوب، ما عليك سوى إضافة نقطة تحويل (breakpoint) وعلامة الفاصلة (%) قبل اسم الفئة. على سبيل المثال، حاوية شبكة متجاوبة بسيطة:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- 子元素 -->
  <div class="bg-gray-200 p-4">محتوى الكتلة 1</div>
  <div class="bg-gray-200 p-4">محتوى الكتلة 2</div>
  <div class="bg-gray-200 p-4">محتوى الكتلة 3</div>
  <div class="bg-gray-200 p-4">محتوى الكتلة 4</div>
</div>

الكود المذكور أعلاه يعرض المحتوى في عمود واحد على الأجهزة المحمولة، وفي عمودين على الشاشات متوسطة الحجم، وفي أربعة أعمدة على الشاشات الكبيرة.

التطبيق العملي لأنماط التخطيط الشائعة

يمكن تحقيق التخطيطات الشائعة بسهولة باستخدام الفئات العملية (practical classes) المتاحة في أداة Flexbox وأداة Grid. على سبيل المثال، تخطيط الرأس (header layout) النموذجي:

<header class="flex flex-col md:flex-row justify-between items-center p-6 bg-white shadow-md">
  <div class="text-2xl font-bold text-blue-700">علامتي التجارية</div>
  <nav class="mt-4 md:mt-0">
    <ul class="flex space-x-6">
      <li><a href="#" class="text-gray-600 hover:text-blue-500">شكل البداية</a></li>
      <li><a href="#" class="text-gray-600 hover:text-blue-500">حول</a></li>
      <li><a href="#" class="text-gray-600 hover:text-blue-500">الاتصال</a></li>
    </ul>
  </nav>
</header>

يتم استخدام هذا الأمر هنا. flex-col و md:flex-row تحقيق ترتيب عمودي لشريط التنقل على الأجهزة المحمولة، وترتيب أفقي له على أجهزة سطح المكتب.

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

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

قم بزيارة Bluehost

الميزات المخصصة والمتقدمة

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

نظام التصميم الموسع

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1a365d',
        'brand-accent': '#ed8936',
      },
      fontFamily: {
        'custom-sans': ['"Inter"', 'sans-serif'],
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

بعد ذلك، يمكنك استخدام ما يشبه هذه الأدوات أو المكونات في مشروعك. text-brand-primary و font-custom-sans هكذا هي الفئة.

استخراج المكونات واستخدام الإضافات

لتجنب كتابة قوائم الفئات المطولة والمكررة في HTML، يدعم Tailwind استخدام… @apply تُستخدم التعليمات في CSS لاستخراج فئات المكونات القابلة لإعادة الاستخدام. على سبيل المثال، لإنشاء زر مخصص:

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

ثم استخدمه في HTML. <button class="btn-primary">点击</button>بالإضافة إلى ذلك، هناك عدد كبير من الإضافات الرسمية والمجتمعية المتاحة، مثل إضافات النماذج (forms plugins). @tailwindcss/formsيمكن إضافة أنماط موحدة بسرعة إلى عناصر محددة.

تحسين الأداء وإنشاء النسخة النهائية للمنتج (Optimization and Production Building)

من أجل الحصول على أفضل أداء، يقوم Tailwind باستخدام أداة PurgeCSS أثناء عملية البناء النهائي (الإنتاجي)، وهي أداة مدمجة الآن ضمن نظام Tailwind CSS. content (في عملية التكوين…) لإزالة جميع الأنماط غير المستخدمة. تأكد من ذلك. tailwind.config.js أنا أحبك، أيها الأخ الأكبر. content المسار صحيح ويشير إلى جميع الملفات التي قد تحتوي على فئات Tailwind (مثل HTML، JSX، قوالب Vue). الملف النهائي للـ CSS سيحتوي فقط على الفئات التي قمت بالفعل باستخدامها، وعادة ما يكون حجمه بضعة كيلوبايتات فقط.

hosting.com

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

قم بزيارة hosting.com

التطبيق العملي: بناء مكون بطاقة (Card Component)

دعونا نستخدم المعرفة المذكورة أعلاه بشكل شامل لبناء مكون بطاقات (cards) حديث ومتجاوب (responsive).

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8">
  <!-- 卡片图片 -->
  <div class="relative pb-2/3"> <!-- 使用宽高比容器 -->
    <img class="absolute h-full w-full object-cover" src="https://picsum.photos/400/300" alt="صورة البطاقة.">
    <div class="absolute top-4 right-4">
      <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">شائع</span>
    </div>
  </div>
  <!-- 卡片内容 -->
  <div class="px-6 py-4">
    <div class="font-bold text-xl text-gray-800 mb-2">هذا عنوان رائع.</div>
    <p class="text-gray-600 text-base">
      هذا هو محتوى وصف البطاقة. يجعل استخدام أداة Tailwind CSS إضافة الأنماط إلى مكونات من هذا النوع سريعًا وسهلًا للغاية.
    </p>
  </div>
  <!-- 卡片底部 -->
  <div class="px-6 pt-4 pb-6 flex flex-wrap items-center justify-between">
    <span class="inline-block bg-gray-100 text-gray-700 text-sm font-medium px-3 py-1 rounded-full">علامة #1</span>
    <button class="mt-2 md:mt-0 bg-blue-500 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded transition duration-300">
      اعرف المزيد
    </button>
  </div>
</div>

يعرض هذا مكون البطاقة مزيجًا من حاوية الصورة، والتسميات، والعنوان، والوصف، وأزرار التسمية، وأزرار التنفيذ. من خلال استخدام الفئات العملية (classes)، تمكنا بسهولة من تطبيق خصائص مثل الزوايا المستديرة، والظلال، والمسافات بين العناصر، والألوان، بالإضافة إلى تصميtransition و duration-300 تم إضافة تأثير رسوم متحركة ناعم عند تمرير الماوس فوق الزرات ذات الفئة “زر” (Button).

الملخصات

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

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

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

لا. في وضع التطوير، يقوم Tailwind بإنشاء ملف CSS كامل يحتوي على جميع الفئات (classes)، مما يجعل حجم الملف كبيرًا نسبيًا. ولكن أثناء عملية البناء النهائية (production build)، يقوم Tailwind بمسح الملفات الأصلية الخاصة بك واستبدالها بملف CSS مضغوط ومُحسن tailwind.config.js أنا أحبك، أيها الأخ الأكبر. content جميع ملفات القوالب المحددة في الحقل تتم معالجتها بحيث يتم استبعاد جميع الفئات (classes) CSS غير المستخدمة بدقة. الملف النهائي للـ CSS عادة ما يكون بحجم بضع كيلوبايتات إلى عدة عشرات من الكيلوبايتات فقط، وهو ما يجع

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

يوفر Tailwind بحد ذاته قيودًا أساسية للتناسق من خلال نظام التصميم الخاص به (مثل نسب المسافات وألوان الباستيل). بالنسبة لمشاريع الفرق، يُنصح بما يلي:
1. الاستفادة الكاملة والحفاظ المشترك tailwind.config.js الملفات تحتوي على تعريفات لرموز التصميم الخاصة بالمشروع (مثل ألوان العلامة التجارية، الخطوط المستخدمة في التصميم).
2. بالنسبة لمجموعات الأنماط المعقدة التي تُستخدم بشكل متكرر، يُنصح باستخدام… @apply يتم استخراج التعليمات وتحويلها إلى فئات مكونات (components)، أو في إطارات عمل مثل React/Vue، إلى مكونات واجهة مستخدم قابلة لإعادة الاستخدام (reusable UI components).
٣. يمكن دمج أداة Prettier واستخدام الإضافات الرسمية الخاصة بها. prettier-plugin-tailwindcssيقوم النظام تلقائيًا بترتيب أسماء الفئات (classes) وتوحيد أسلوب الكود (code style).

ما الفرق بين Tailwind CSS والأنماط المضمنة (inline styles)؟

هناك فرق جوهري بين الاثنين: الفئات العملية (practical classes) في Tailwind ليست أنماطًا مضمنة (inline styles)، بل تستند إلى قيود نظام التصميم (design system).
١. التصميم التكيفي: يمكن بسهولة إضافة بادئات نقاط القطع (breakpoint prefixes) باستخدام فئات Tailwind CSS. md:block)، بينما لا يمكن تحقيق ذلك باستخدام الأنماط المضمنة (inline styles).
2. الفئات الزائفة للحالة (Status Pseudoclasses): يدعم Tailwind استخدامها. hover:、focus: الرموز الأمامية (prefixes) لا تعمل مع الأنماط المضمنة (inline styles).
٣. تناسق التصميم: تعتمد فئات Tailwind CSS على قيم محددة مسبقًا (مثل…). mt-4 يتوافق ذلك مع وحدة القياس 1rem، مما يمنع ظهور قيم عشوائية ويضمن تناسقاً بصرياً.
٤. اكتمال الوظائف: يمكنه التعامل مع أشياء مثل… flex、grid、sr-only(مخصص لقراءات الشاشة) ميزات معقدة مثل هذه لا يمكن تحقيقها باستخدام أنماط مضمنة بسيطة.

هل يمكن استخدام Tailwind مع إطارات عمل CSS أخرى مثل Bootstrap؟

على الرغم من أن الأمر ممكن من الناحية التقنية، إلا أننا ننصح بشدة ضد استخدامهما معًا. تايلويند (Tailwind) وبوتستراب (Bootstrap) يمثلان نمطين مختلفين تمامًا في تصميم الواجهات الأمامية للمواقع الإلكترونية: تايلويند يركز على استخدام الكلاسات العملية (practical classes)، بينما يركز بوتستراب على استخدام المكونات المعيارية (standard components). استخدام كلاهما في نفس المشروع قد يؤدي إلى حدوث تعارضات في الأساليب (style conflicts)، وتشويش في أسماء الكلاسات (class names)، وزيادة كبيرة في حجم ملفات الكود (code packages)، بالإضافة إلى صعوبات في عمليات الصيانة. يجب عليك اختيار إطار عمل واحد بناءً على متطلبات المشروع وتفضيلاتك الشخصية أو تلك của الفريق، والالتزام به طوال فترة تطوير المشروع. إذا كنت بحاجة إلى استخدام بعض المكونات ذات الطابع الخاص ببوتستراب داخل مشروع تم إنشاؤه باستخدام تايلويند، فيمكنك النظر في استخدام مكتبات

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

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

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

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