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

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

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

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

الفلسفة الأساسية لهذه الطريقة هي نقل عملية اتخاذ قرارات التصميم (الأنماط) من ملفات CSS إلى لغات الترميز نفسها (مثل HTML)، مما يلغي الحاجة إلى التنقل ذهابًا وإيابًا بين ملفات الأنماط وملفات HTML، وبالتالي يقلل ال flex、pt-4、text-center و rotate-90 مع مثل هذه الفئات، يمكنك بناء واجهات بشكل مباشر، مع الحفاظ في الوقت نفسه على حجم ملفات CSS صغيرًا للغاية.

لماذا اختيار Tailwind CSS؟

من بين العديد من أطر CSS،Tailwind CSS تجعل المزايا الفريدة لهذا الأداة الخيار الأول للعديد من المطورين والفرق.

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

كفاءة تطوير عالية للغاية ومرونة في التعامل مع المتطلبات.

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

مساعد منشئ مواقع الويب WordPress.com
مساعد منشئ مواقع الويب WordPress.com
إتاحة 99.999% 99.999% + التعافي من الكوارث عبر المناطق، دعم على مدار الساعة طوال أيام الأسبوع، موقع مجاني لبناء موقع ذكاء اصطناعي مع شراء باقة المدونة
اسم نطاق مجاني لمدة عام واحد
قم بزيارة مساعد منشئ مواقع الويب ووردبريس.كوم →
مساعد منشئ مواقع الويب UltaHost
مساعد منشئ مواقع الويب UltaHost
أكثر من 900 قالب مجاني وقابل للتخصيص للحصول على قوة تحسين محركات البحث التي تحتاجها لتحسين موقعك الإلكتروني من أجل عرض البحث
العرض 40%
قم بزيارة مساعد منشئ مواقع الويب UltaHost → 
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">
  点击我
</button>

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

نظام تصميم قابل للتخصيص إلى حد كبير

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1a73e8',
      }
    }
  }
}

بعد الإعداد، يمكنك استخدامه في المشروع. bg-brand-blue هذا النوع من الفئات… هذا التصميم يجعل… Tailwind CSS يمكنه الاندماج بشكل مثالي مع أي معايير تصميم موجودة، بدلاً من إجبارك على قبول جماليات الإطار المستخدم.

تحسينات أثناء عملية البناء وحجم المنتج النهائي الصغير جدًا

Tailwind CSS الاستفادة من PurgeCSS(في الإصدارات الأحدث، يُطلق عليه اسم “مسح المحتوى”) وهو يُستخدم لتحسين عملية بناء المشاريع الإلكترونية. يقوم هذا الأداة بمسح ملفات مشروعك (مثل HTML وJavaScript ومكونات Vue وReact)، ويحدد جميع الكلاسات (classes) والمكتبات (libraries) المستخدمة، ثم يتم حذف جميع أجزاء الـ CSS غير المستغلة. ونتيجة لذلك، يحتوي ملف الـ CSS النهائي فقط على الأنماط (styles) التي تحتاجها بالفعل، وغالبًا ما يمكن ضغطه إلى أقل من 10 كيلوبايت، مما يؤدي إلى تحسين أداء الموقع بشكل كبير.

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

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

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

تجربة سريعة من خلال خدمة CDN (Content Delivery Network).

لأغراض التعلم، تصميم النماذج الأولية، أو العروض البسيطة، يمكنك استخدام روابط CDN لاستيراد المحتوى مباشرةً. ما عليك سوى إضافة هذه الروابط إلى ملف HTML الخاص بك. <head> أضف الكود التالي داخل العلامة:

<script src="https://cdn.tailwindcss.com"></script>

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

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

التثبيت المهني باستخدام PostCSS

للمشاريع على مستوى الإنتاج، يُنصح باستخدام طريقة تثبيت PostCSS، حيث أن ذلك سيمكّن من الاستفادة من ميزاته الكاملة. Tailwind CSS استخدم أداة npm أو yarn لتهيئة المشروع وتثبيت المكونات المطلوبة.

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

بعد ذلك، قم بالإنشاء. postcss.config.js الملف، وقم بتكوينه ليستخدم… Tailwind CSS و Autoprefixer：

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

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

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

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

أخيرًا، تأكد من أنك tailwind.config.js تم تكوين مسار المحتوى في الملف بحيث يمكن للأداة مسحه وتحسينه بشكل صحيح.

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

الآن، يمكنك استخدام جميع فئات الأدوات بحرية داخل ملفات HTML للمشروع أو المكونات الخاصة بك. وذلك عن طريق تنفيذ أوامر البناء (build commands). npm run build），Tailwind CSS سيتم إنشاء ملفات أنماط محسنة.

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

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

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

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

تتبع فئات الأدوات نمط تسمية موحدًا، مما يجعلها سهلة التذكر. على سبيل المثال:
التخطيط:flex, grid, block, hidden
المسافة بين الأحرف:p-4(المسافة الداخلية)m-2(المسافات الخارجية)mt-8(المسافة العلوية)
الأبعاد:w-full(عرض 100%)h-screen(الارتفاع يساوي ارتفاع النافذة العرضية)
اللون:bg-gray-100（اللون الخلفي），text-red-500(لون النص)
التنسيق:text-xl(حجم الخط)font-bold(الخط الثقيل)text-center(تنسيق النص)

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

التصميم التفاعلي هو Tailwind CSS من نقاط قوته، أنه يستخدم نظام نقاط توقف مصمم خصيصًا للأجهزة المحمولة، حيث تكون الأنماط الافتراضية مخصصة للأجهزة المحمولة أولاً، ثم يتم تحديد الأنماط التي تنطبق على الشاشات ال
- 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>

يمكنك أيضًا التحكم بسهولة في عرض العناصر وإخفائها:hidden md:block يعني أن المحتوى سيتم عرضه على الشاشات متوسطة الحجم والأكبر، بينما سيتم إخفاؤه على الأجهزة المحمولة.

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

Tailwind CSS كما يتضمن أيضًا متغيرات الحالة (status variants)، مما يتيح لك تطبيق الأنماط على عناصر التفاعل بسهولة. ما عليك سوى إضافة بادئة تشير إلى الحالة قبل اسم الفئة الأداة (tool class)، مثل… hover:、focus:、active:。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  交互按钮
</button>

يمكنك حتى القيام بذلك من خلال ملفات الإعدادات (configuration files). variants الخيارات تسمح بتخصيص أي فئات أدوات تدعم أي حالات (أو أوضاع).

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

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

إخراج المكونات وإعادة استخدام الأنماط (Extracting components and reusing styles)

على الرغم من أن استخدام الأدوات مباشرةً في HTML أمر مريح، إلا أن إعادة كتابة نفس مجموعة الأنماط المعقدة في عدة أماكن قد يؤدي إلى الإطالة والتكرار. في مثل هذه الحالات، يمكنك استخدام… @apply التعليمات في CSS تُستخدم لاستخراج فئات المكونات (component classes).

/* 在你的CSS文件中，例如 styles.css */
.btn-primary {
  @apply px-4 py-2 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”>هذا يحافظ على سهولة استخدام الأداة، وفي الوقت نفسه يتجنب تكرار الكود.

استخدام الإضافات (البرامج الإضافية) لتوسيع الوظائف.

Tailwind CSS يتمتع بنظام برامج إضافية (plugins) متنوع للغاية. يمكنك تثبيت الإضافات الرسمية أو تلك المطورة من قبل المجتمع لإضافة أدوات جديدة إلى النظام. على سبيل المثال،@tailwindcss/forms يوفر المكون الإضافي تصميماً افتراضياً أفضل لعناصر النموذج، و@tailwindcss/typography يمكن للإضافات (البرامج الإضافية) تحسين مظهر المحتوى HTML غير المتوقع القادم من نظام إدارة المحتوى (CMS)، مثل مقالات المدونات، بسرعة. بعد التثبيت، كل ما عليك فعله هو… tailwind.config.js أنا أحبك، أيها الأخ الأكبر. plugins فقط أدخلها في المصفوفة.

تكوين مخصص بعمق

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

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  },
  variants: {
    extend: {
      backgroundColor: ['active'], // 为背景色工具类启用 active 状态
    }
  }
}

الملخصات

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

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

ما الفرق بين Tailwind CSS و Bootstrap؟

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

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

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

هذا هو أحد القلقوات الشائعة في المراحل الأولى. في الواقع، بدلاً من كتابة قواعد لعدد لا يحصى من أسماء الفئات المخصصة في ملف CSS، فإن رؤية وصفات الأنماط الواضحة مباشرة في HTML أمر أفضل بكثير. flex items-center justify-betweenغالبًا ما يكون أكثر وضوحًا وسهولة في الصيانة. فهو يلغي عبء التنقل بين الملفات وتسميتها.

للتعامل مع مجموعات الأنماط المعقدة والمتكررة، يمكن استخدام… @apply يتم تغليف الكود باستخدام تعليمات أو أطر مكونة (مثل مكونات React أو Vue) للحفاظ على نظافة وتنظيم ملفات HTML. كما يمكن للفريق ضمان الاتساق من خلال وضع اتفاقيات محددة بشأن تركيبة أسماء الكلاسات.

كيف يمكن إضافة ألوان أو أبعاد مخصصة إلى Tailwind CSS؟

جميع التخصيصات في الدليل الجذر للمشروع tailwind.config.js تم إكمال الملف. يمكنك الآن… theme.extend يتم إضافة عناصر تكوين جديدة تحت الكائن لتوسيع الموضوع الافتراضي.

على سبيل المثال، لإضافة لون مخصص، يمكن كتابته كما يلي:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-gray': '#f5f5f5',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

بعد ذلك، يمكنك استخدامه. bg-custom-gray و w-128 هكذا هي الفئة.

هل سيؤثر استخدام Tailwind CSS على أداء الموقع الإلكتروني؟

بالعكس تمامًا.Tailwind CSS بعد التكوين الصحيح، يمكن عادةً تحسين الأداء بشكل ملحوظ. تستخدم عملية البناء (production build) تقنية PurgeCSS، والتي تقوم بمسح جميع ملفات القوالب الخاصة بك وتجميع فقط الكلاسات CSS التي تم استخدامها فعليًا في ملف الأنماط النهائي. وهذا يعني أن ملف CSS الناتج صغير جدًا (غالبًا ما يقل حجمه عن 10 كيلوبايتات)، مما يقلل من عبء طلبات الشبكة ويسرع من سرعة تحميل الصفحات.

هل يدعم وضع الظلام (Dark Mode)؟

نعم.Tailwind CSS تم توفير دعم مباشر لوضع الظلام (Dark Mode) منذ اللحظة الأولى عند استخدام البرنامج. يمكنك… tailwind.config.js إنه متاح في جميع أنحاء الصين. darkMode: ‘class’ أو darkMode: ‘media’ لتفعيلها، ما عليك سوى اتباع الخطوات الموضحة. بمجرد التفعيل، ستتمكن من استخدامها. dark: يتم استخدام بادئات معينة لتطبيق أنماط الوضع المظلم (الداكن) في النظام.

على سبيل المثال.dark:bg-gray-800 يعني ذلك تطبيق خلفية بلون رمادي داكن في وضع الظلام (Dark Mode). إذا تم تعيين ذلك… ‘class’ النمط (Pattern): يجب أن تضعه داخل العنصر الرئيسي لـ HTML (مثل <html>يمكنك إضافتها أو إزالتها يدويًا. class=“dark” لتغيير الوضع؛ إذا تم تعيينه… ‘media’سيتم التبديل تلقائيًا وفقًا لتفضيلات ألوان نظام التشغيل الخاص بالمستخدم.

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

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

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

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

الوسوم