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

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

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

ما هو Tailwind CSS؟

Tailwind CSS هو إطار عمل للغة CSS يركز على الوظائف (Functionality) أولاً، ويساعد المطورين على بناء واجهات مستخدم مخصصة بسرعة من خلال توفير عدد كبير من الفئات العملية (Utility Classes) القابلة للدمج مع بعضها البعض. على عكس إطارات العمل الأخرى مثل Bootstrap التي توفر مكونات جاهزة مسبقًا مثل الأزرار والبطاقات (Cards)، فإن Tailwind CSS لا يوفر أي مكونات ذات أنماط ثابتة، بل يقدم مجموعة من الفئات الصغيرة ذات الاستخدامات المحددة. text-center、bg-blue-500、p-4 إلخ.

开发者通过直接在 HTML 的 class 属性中组合这些类来构建任何设计。这种方法消除了在 CSS 文件和 HTML 文件之间频繁切换的需要，将样式直接写在标记语言中，从而极大地提高了开发速度。同时，它通过约束设计 token（如颜色、间距、字体大小），强制执行了设计系统的一致性。

تكمن الميزة الأساسية له في قابليته العالية للتخصيص ومرونته الفائقة، وذلك من خلال ملفات الإعدادات. tailwind.config.jsيمكنك بسهولة تعريف نظام التصميم الخاص بك، بما في ذلك لوحة الألوان ونسب المسافات ونقاط الاختراق (breakpoints)، وسيحتوي ملف CSS الناتج فقط على الفئات (classes) التي تستخدمها بالفعل، مما يجعل حجم الملف النهائي مضغوطًا للغاية.

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

كيفية البدء في التثبيت والتكوين

لبدء استخدام Tailwind CSS، أولاً يجب دمجه في مشروعك. الطريقة الموصى بها هي التثبيت باستخدام Node.js وnpm (أو yarn).

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

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

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

npm install -D tailwindcss postcss autoprefixer

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

Generate a configuration file.

فيما يلي، سأقوم بإنشاء ملفات الإعدادات الافتراضية لكل من Tailwind CSS وPostCSS:

npx tailwindcss init -p

سيقوم هذا الأمر بإنشاء ملفين:tailwind.config.js و postcss.config.jsو من بينها. tailwind.config.js هذا المكان هو الرئيسي لتصميم الأنظمة حسب الطلب الخاص بك.

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

تكوين مسار قالب

لكي يتمكن Tailwind من إزالة الأنماط غير المستخدمة بشكل تلقائي (أي عملية “Tree Shaking”)، يجب عليك… tailwind.config.js تم تحديد جميع مسارات الملفات المصدرية التي تحتوي على أسماء الفئات (classes) الخاصة بـ Tailwind في النص المقدم. يرجى البحث عن هذه الملفات. content قم بتحديد الحقول المطلوبة وقم بتكوينها:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 根据你的项目结构调整路径
  theme: {
    extend: {},
  },
  plugins: [],
}

إدخال الأنماط الأساسية

وأخيرًا، في ملف CSS الرئيسي الخاص بك (على سبيل المثال… src/input.css أو styles/globals.cssفي هذا البرنامج، يتم استخدام @tailwind التعليمات التي تحتوي على كل طبقة من طبقات Tailwind:

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

ثم، في عملية البناء الخاصة بك (مثل استخدام Vite أو Webpack أو من خلال الواجهة السطرية CLI مباشرة)، قم بمعالجة ملف CSS هذا لإنشاء جدول الأنماط النهائي.

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

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

فهم جوهر لغة Tailwind CSS يكمن في إتقان قواعد تسمية الفئات (classes) المفيدة وطرق التصميم التفاعلي (responsive design).

قواعد التسمية للفئات العملية

أسماء الفئات العملية (utility classes) في Tailwind تتبع نمطًا بديهيًا:{属性}{方向}-{尺寸}على سبيل المثال:
* mt-4：margin-top: 1rem; في Tailwind CSS، الوحدة الواحدة (1 unit) تساوي عادةً 0.25rem، لذلك فإن القيمة 4 تمثل 1rem.
* px-6：padding-left: 1.5rem; و padding-right: 1.5rem;。
* bg-gray-100：background-color: #f3f4f6;。
* text-xl：font-size: 1.25rem; line-height: 1.75rem;。
* rounded-lg：border-radius: 0.5rem;。

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

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

التصميم التفاعلي (Responsive Design) ورموز النقاط المحددة للتحكم في الأداء (Breakpoint Prefixes)

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

على سبيل المثال.<div class="text-center md:text-left"> يعني أن النص سيتم محاذاته إلى اليسار على الشاشات ذات الحجم المتوسط والأكبر، بينما سيتم محاذاته في المنتصف على الشاشات ذات الأحجام الأخرى.

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

متغيرات الحالة (State Variants) والكلاسات الوهمية (Pseudo-Classes)

يوفر Tailwind مجموعة واسعة من البادئات (prefixes) للتعامل مع الحالات المختلفة للعناصر، مثل الوضع المعلق (hover)، والحالة المُركزة (focused)، والحالة المُنشطة (activated)، وما إلى ذلك. تتم ربط هذه البادئات بالفئات (classes
تشمل البادئات الشائعة للمتغيرات:
* hover: (:hover)
* focus: (:focus)
* active: (:active)
* disabled: (:disabled)

على سبيل المثال.<button class="bg-blue-500 hover:bg-blue-700"> سيتم إنشاء زر باللون الأزرق الافتراضي، وسيتغير لونه إلى الأزرق الداكن عند المرور فوقه بالماوس. يمكنك ضبط ذلك في ملف الإعدادات. theme.extend يمكن تخصيص بعض هذه الاختلافات حسب الحاجة.

بناء مكون بطاقة (card component) يتكيف مع الشاشات المختلفة (متجاوب).

الآن، دعونا نطبق المعرفة التي اكتسبناها مسبقًا عمليًا ونبني مكون بطاقة (card component) حديث ومتجاوب (responsive). ستحتوي هذه البطاقة على صورة، عنوان، ووصف، بالإضافة إلى زر، وسيتم تعديل تخطيطها بشكل أنيق على أحجام الشاشات الم

الهيكل الأساسي للـ HTML لكتابة البطاقات:

نبدأ من أبسط الحاويات والمحتويات. هيا، دعونا ننشئ واحدة. .html الملف، وقم بكتابة الهيكل التالي:

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white">
  <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="صورة البطاقة.">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">عنوان بطاقة في Tailwind CSS</div>
    <p class="text-gray-700 text-base">
      هذا نص وصفي لهذه البطاقة، يشرح المحتوى الرئيسي أو الميزات الخاصة بها. يمكن تنفيذ تصميم مماثل بسرعة باستخدام لغة Tailwind CSS.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      اعرف المزيد
    </button>
  </div>
</div>

في هذه اللحظة، لديك بالفعل نموذج أساسي للبطاقة: خلفية بيضاء، زوايا مستديرة، ظلال، صورة، وزر.

إضافة تعديلات على التصميم ليكون متكيفًا مع أحجام الشاشات المختلفة (تصميم استجابي).

نحن نرغب في أن تتراكم البطاقات بشكل عمودي على الأجهزة المحمولة، وأن تظهر جنبًا إلى جنب على الشاشات المتوسطة (مثل الأجهزة اللوحية) والأكبر منها. يمكننا تحقيق ذلك باستخدام تقنية Flexbox ونقاط الاستجابة (responsive breakpoints). سنقوم بتغليف عناصر البطاقات داخل حاوية Flex.

<div class="container mx-auto p-4">
  <div class="flex flex-col md:flex-row gap-6"> <!-- 响应式 Flex 方向 -->
    <!-- 卡片 1 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="صورة البطاقة.">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">العنوان الأول للبطاقة</div>
        <p class="text-gray-700 text-base mb-4">
          محتوى وصف البطاقة الأولى.
        </p>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          العملية الأولى
        </button>
      </div>
    </div>
    <!-- 卡片 2 -->
    <div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/401/300" alt="صورة البطاقة.">
      <div class="p-6">
        <div class="font-bold text-xl mb-2">عنوان البطاقة الثانية</div>
        <p class="text-gray-700 text-base mb-4">
          محتوى وصف البطاقة الثانية.
        </p>
        <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full md:w-auto">
          العملية الثانية
        </button>
      </div>
    </div>
  </div>
</div>

النقاط الرئيسية:
1. flex flex-col md:flex-rowالحاوية الخارجية مرتبة بشكل عمودي بشكل افتراضي.flex-colفي الشاشات المتوسطة الحجم، تتغير ترتيب العناصر لتصبح أفقية.md:flex-row）。
2. gap-6إضافة مسافة بين عناصر Flex.
3. flex-1: لتقسيم المساحة بالتساوي بين بطاقتين عند عرضهما في تخطيط أفقي.
4. w-full md:w-autoالزر يشغل العرض الكامل على الأجهزة المحمولة، ويعود إلى العرض التلقائي على الشاشات ذات الحجم المتوسط أو أكبر.

أنماط التمرير فوق العناصر (Hover) وأنماط التركيز (Focus) المخصصة

لجعل التفاعل أكثر دقة، يمكننا إضافة تأثير التمرير فوق العناصر (hover effect) إلى حاويات البطاقات نفسها، وتحسين أسلوب تظهر الزر عند التركيز عليه (focus style).

<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white flex-1 transition duration-300 ease-in-out hover:shadow-2xl hover:-translate-y-1">
  ...
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-150 ease-in-out w-full md:w-auto">
    اعرف المزيد
  </button>
  ...
</div>

لقد أضفنا هنا:
* transition duration-300 ease-in-outأضف انتقالات سلسة لجميع تغييرات خصائص البطاقة.
* hover:shadow-2xl hover:-translate-y-1عند التمرير فوق العنصر، يزداد حجم الظل ويتحرك قليلاً لأعلى، مما يخلق تأثيراً يبدو وكأن العنصر “يطفو”.
* focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50إزالة خطوط التركيز الافتراضية في المتصفح واستبدالها بحلقة ضوئية زرقاء مخصصة تتناسب أكثر مع التصميم.

الملخصات

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

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

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

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

لا، هذا بالضبط أحد المزايا الأساسية لـ Tailwind CSS. أثناء عملية البناء الإنتاجي، يقوم Tailwind بتنفيذ عملية تُسمى “Purge” (وفي الإصدارات 3.0 وما بعدها تُسمى تحليل “Content”). يقوم Tailwind بمسح جميع ملفات القوالب التي حددتها في ملف الإعدادات (مثل HTML، JSX، Vue)، ويحدد جميع الكلاسات المفيدة التي تم استخدامها، ثم يقوم فقط بتضمين هذه الكلاسات في ملف CSS النهائي.

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

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

这是一个常见的初次印象。确实，HTML 中的 class 属性会变得很长。然而，许多开发者认为这是一种权衡，并且带来了几个好处：首先，你无需为类名起名而苦恼（如 card-container-inner-wrapperلا حاجة أيضًا للتنقل بين ملفات CSS و HTML للبحث عن تعريفات الأنماط؛ فجميع الأنماط مكتوبة بوضوح على العناصر نفسها.

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

ما هي الإطارات الأمامية (front-end frameworks) التي يناسب استخدامها مع Tailwind CSS؟

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

في إطارات مثل React وVue وAngular وSvelte، يمكنك استخدام أسماء الفئات (class names) الخاصة بـ Tailwind بنفس الطريقة التي تستخدم بها في HTML العادي. كما توفر المجتمعات إضافات (plugins) وأدوات (tools) رسمية أو طرفية مخصصة لهذه الإطارات. @headlessui/reactمنتج رسمي من Tailwind، يوفر مكونات تفاعلية بدون أي تصميم مسبق (أي بدون أشكال أو ألوان محددة مسبقًا)، ويمكن دمجها بسلاسة مع الأنماط التي قمت بكتابتها باستخدام Tailwind. ما عليك سوى التأكد من أن عملية البناء الخاصة بك (مثل Vite أو Webpack) مضبوطة بشكل صحيح لتشغيل PostCSS وTailwind.

كيف يمكن تخصيص ألوان ومسافات الثيمات؟

كل التخصيصات موجودة بالفعل. tailwind.config.js مستندات theme يتم تنفيذ بعض الأمور جزئيًا. يستخدم Tailwind استراتيجيتين هما “التوسيع (extend)” و“التغطية (override)”. إذا كنت ترغب في إضافة قيم جديدة مع الحفاظ على القيم الافتراضية، فيجب استخدام استراتيجية “التوسيع”. extend。

على سبيل المثال، إذا أردت إضافة لون خاص بالعلامة التجارية وزيادة نسبة المسافات بين العناصر:

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

بعد الإعداد، يمكنك استخدامه مباشرةً. bg-brand و p-128 هذا هو النوع المطلوب. إذا كنت ترغب في استبدال اللوحة الألوان الافتراضية أو مقاييس المسافات بالكامل، فما عليك سوى وضع التعريفات الجديدة مباشرةً في المكان المناسب. theme إنه أفضل من ذلك. extend نعم، نظام التكوين في Tailwind مرن للغاية، مما يسمح لك بإنشاء نظام تصميم خاص بك بالكامل.

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

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

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

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

الوسوم