دليل نهائي لـ Tailwind CSS: من المبادئ الأساسية إلى الدروس العملية المتقدمة

ما هو Tailwind CSS؟

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

الفكرة الأساسية لهذا الأسلوب هي استخدام مجموعة من الكلاسات المحددة مسبقًا لتطبيق الأنماط، مما يتجنب الحاجة إلى كتابة أنماط مخصصة لكل عنصر على حدة في CSS أو SCSS التقليديين. على سبيل المثال، لإنشاء زر يحتوي على زوايا مستديرة ولون خلفية ومسافات داخلية، كل ما عليك فعله هو استخدام الكلاسات المناسبة داخل ع class إضافة الخصائص بشكل مركب (مجتمعة) rounded-lg、bg-blue-500、text-white و p-4 مزايا هذه الطريقة تكمن في أنها تسرع عملية التطوير بشكل كبير، وتضمن توافق التصميم مع الكود، وتنتج ملفات نهائية محسنة بشكل كبير تحتوي فقط على الأنماط التي ستُستخدم بالفعل في التطبيق.

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

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

يتم التثبيت عن طريق استخدام أداة NPM (Node Package Manager) وأداة PostCSS.

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

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

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

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

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

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

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

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

العرض 40%

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

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

Create your style sheet.

بعد ذلك، قم بإدخال تعليمات Tailwind في ملف CSS الرئيسي الخاص بك.

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

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

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

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

للاستفادة القصوى من Tailwind CSS، من الضروري فهم اتفاقيات التسمية الخاصة به ونظام التصميم التفاعلي (responsive design).

اتفاقيات تسمية للفئات العملية (Practical Naming Conventions)

عادةً ما تكون أسماء الفئات في Tailwind عبارة عن هياكل من نوع “خاصية-قيمة”， وتتوافق القيم مع مقاييس محددة مسبقًا ضمن نظام التصميم. هذا يجعل أسماء الفئات سهلة الفهم والتذكر للغاية.

المسافة:p-4 padding: 1rem;, m-2 (الهامش: 0.5rem).
النص:text-lg (`font-size: 1.125rem`), font-bold (`font-weight: 700`).
اللون:bg-red-500 (اللون الخلفي)text-blue-700 (اللون).
تخطيط:flex, justify-center, items-center。
الحجم:w-full (العرض: 100%), h-64 (الارتفاع: 16 ريم).

تصميم متجاوب

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

مثال على ذلك:
* text-centerتم تحديد أن المحتوى يجب أن يكون مركزًا على الشاشة في النسخة المخصصة للأجهزة المحمولة.
* md:text-leftيتم تحديد موقع النص ليكون محاذيًا لليسار على الشاشات المتوسطة (≥768 بكسل) والأكبر.
* lg:text-xlاستخدم خطوطًا أكبر في الشاشات الكبيرة (≥1024 بكسل) وما فوق.

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

تنويعات في الحالات مثل “التمرير فوق الشاشة” (Hover) و“التركيز” (Focus).

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

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

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

قم بزيارة Bluehost

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 transition-colors">
  点击我
</button>

في المثال أعلاه، عندما يتم تحريك الماوس فوق الزر، يتغير لون الخلفية إلى الداكن، وعندما يحصل الزر على التركيز (focus)، يظهر حلقة تركيز حوله، كما أن تغيير اللون يتم بشكل سلس ومنتظم (بدو

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

عندما تتقن الأساسيات، ستساعدك قدرات Tailwind القوية على التخصيص في تحسين كفاءة عملية التطوير لديك بشكل أكبر.

استخراج المكونات وتعليمات @apply

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

.btn-primary {
  @apply py-2 px-4 bg-blue-500 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. class=”btn-primary” هذا وسيلة فعالة لتحقيق التوازن بين قابلية صيانة فئات العناصر (atoms) والمكونات (components).

تكوينات متقدمة للموضوعات

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1d4ed8',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

بعد الإعداد، يمكنك استخدام أسماء الفئات المخصصة فورًا، مثل… bg-brand-blue أو w-128。

hosting.com

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

قم بزيارة hosting.com

استخدام إضافات خارجية (third-party plugins)

يسمح نظام الإضافات (Plugins) في Tailwind CSS بتوسيع وظائف البرنامج. يمكنك تثبيت إضافات رسمية أو مقدمة من المجتمع، لإضافة فئات (Classes) أو مكونات (Components) جديدة ومفيدة. على سبيل المثال، من خلال تثبيت إضافة معينة، @tailwindcss/forms أو @tailwindcss/typography الإضافات (plugins) يمكن أن توفر أنماطًا افتراضية أفضل لعناصر النماذج (forms) أو تنسيق المقالات (articles).

الملخصات

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

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

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

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

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

هذا هو أحد الشواغل الشائعة لدى الأشخاص الذين يتعرفون على هذا الموضوع لأول مرة. لكن التجربة أثبتت أن هذا الأسلوب المباشر في التعبير يجعل أنماط العرض أكثر قابلية للتنبؤ وسهولة في الصيانة. لم تعد بحاجة إلى التنقل ذهابًا وإيابًا بين ملفات HTML وCSS لتحديد قواعد التصميم؛ فأنماط المكونات موجودة بجانبها مباشرة، مما يجعلها واضحة للغاية. بالنسبة لمجموعات ال @apply تم استخراج التعليمات وتحويلها إلى فئات مكونات (components)، مع الحفاظ على مبدأ DRY (Don’t Repeat Yourself) في الكود. أفاد العديد من المطورين بأن هذا الأسلوب أكثر كفاءة من إدارة الأكواد CSS التقليدية.

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

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

كيف يمكن تخصيص أو توسيع الأنماط الافتراضية؟

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

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

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

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

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