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

ما هو Tailwind CSS وما هي مزاياه الأساسية؟

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

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

قم بإنشاء مشروعك الأول باستخدام أداة Tailwind CSS.

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

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

الطريقة الأكثر شيوعًا هي تثبيته كإضافة (plugin) لـ PostCSS. أولاً، يجب عليك إنشاء مشروع جديد وتثبيت الاعتمادات (dependencies) الضرورية. يمكنك القيام بذلك عن طريق استخدام أداة npm أو yarn. tailwindcss、postcss و autoprefixerبعد ذلك، استخدم. npx tailwindcss init أمر لإنشاء ملف الإعدادات الافتراضي tailwind.config.js。

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

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

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

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

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

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

العرض 40%

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

بعد ذلك، ستحتاج إلى إنشاء ملف تكوين لـ PostCSS (مثل…) postcss.config.jsثم أضف مكتبات Tailwind CSS وAutoprefixer كإضافات (plugins). بعد ذلك، قم بإنشاء ملف CSS رئيسي (على سبيل المثال…). src/input.css)، واستخدم @tailwind التعليمات المستخدمة لتضمين مختلف طبقات Tailwind…

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

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

إتقان الأدوات الأساسية والتصميم المتجاوب.

تغطي فئات الأدوات (tools classes) في Tailwind CSS جوانب متعددة من لغة CSS، وقواعد تسميتها بسيطة وسهلة التذكر.

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

تصنيفات التخطيط مثل… flex、grid、block、inline-block يُستخدم للتحكم في وضع العرض. أما المسافات فتتم تحديدها عن طريق… p-{size}(المسافة الداخلية) و m-{size}(المسافات الخارجية) تُستخدم للتحكم في ذلك، حيث… {size} اتباع نسبة تكبير تتراوح بين 0 و96، على سبيل المثال… p-4 أظهر 1rem المسافة الداخلية (padding)… يتم استخدام العرض (width) والارتفاع (height) لتحديد هذه المسافة. w- و h- الرموز الأمامية، مثل… w-full、h-screen。

القراءة الموصى بها تحليل المفاهيم الأساسية لـ Tailwind CSS。

الألوان وتنسيق النصوص

استخدام لون الخلفية bg-{color}-{shade}تم استخدام ألوان نصوص معينة في النص. text-{color}-{shade}على سبيل المثال bg-blue-500 و text-gray-800من ناحية التنسيق، يتم تحديد حجم الخطوط عبر… text-{size}(على سبيل المثال، text-xlللتحكم في سمك الخط، يتم استخدام… font-{weight}(على سبيل المثال، font-boldالتحكم.

تحقيق التصميم التكيفي (Responsive Design)

يستخدم Tailwind نظام نقاط توقف (breakpoints) يعطي الأولوية للأجهزة المحمولة. الأسماء الافتراضية لمسبقات نقاط التوقف هي… sm:、md:、lg:、xl:、2xl:يمكنك إضافة هذه الرموز المفتاحية (البادئات) أمام أي أداة (tool) لجعلها تعمل فقط عند عرض الشاشة بعرض معين أو أكبر. على سبيل المثال،<div class="text-center md:text-left"> يعني ذلك أن النص سيتم محاذاته إلى اليسار على الشاشات المتوسطة والأكبر حجمًا، بينما سيتم محاذاته في المنتصف على الشاشات الأصغر حجمًا. وهذا يسمح لك ببناء واجهات تعمل بسلاسة على أجهز

مهارات متقدمة: التخصيص والتحسين

عندما يزداد حجم المشروع، يصبح تخصيص وتحسين Tailwind أمرًا بالغ الأهمية.

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

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

قم بزيارة Bluehost

نظام تصميم مخصص بعمق

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
      },
      spacing: {
        '128': '32rem',
      }
    },
    screens: {
      'tablet': '640px',
      'laptop': '1024px',
      'desktop': '1280px',
    },
  },
}

استخراج المكونات وتقليل حجم الملفات (الحزم)

على الرغم من أن الكلاسات العملية تحظى بالأولوية، إلا أنه لتجنب التكرار، يمكنك استخدام… @layer components التعليمات في CSS تسمح باستخراج فئات مكونات قابلة لإعادة الاستخدام. أما بالنسبة لمجموعات الأنماط التي ستُستخدم مرة واحدة فقط، فيمكن دمج الفئات مباشرة في HTML.

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

القراءة الموصى بها دليل البدء لبناء مواقع ويب حديثة ومتجاوبة باستخدام إطار عمل Tailwind CSS。

الملخصات

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

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

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

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

hosting.com

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

قم بزيارة hosting.com

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

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

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

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

في وضع التطوير، من أجل توفير جميع الأدوات الممكنة، تكون ملفات CSS كبيرة الحجم (عادةً ما تتجاوز عدة ميغابايت). ولكن أثناء عملية البناء النهائي (الإنتاج)، يمكن تقليل حجم هذه الملفات عن ط content يتم إجراء عمليات تحسين على مسارات الوصول (path optimization) باستخدام تقنية “tree-shaking”， مما يجعل ملف CSS النهائي صغيرًا للغاية (يمكن ضغطه بسهولة إلى أقل من 10 كيلوبايت)، حيث يحتوي فقط على الفئات (classes) التي تم استخدامها بالفعل في المشروع.

هل يمكن استخدام Tailwind CSS فقط دون كتابة أي كود CSS مخصص؟

بالنسبة للغالبية العظمى من المشاريع، الإجابة هي نعم. الهدف من تصميم Tailwind CSS هو تلبية متطلبات الأنماط (styles) المحددة بمعيار 99%. يتم كتابة كميات قليلة جدًا من الـ CSS المخصصة فقط عندما تواجه حالات خاصة جدًا لا يمكن تحقيقها عن طريق مجموعات الأدوات المتاحة، ويمكنك في تلك الحالات استخدام الـ CSS المخصصة لحل المشكلة. @layer يتم دمج هذه الأوامر في نظام Tailwind.