استكشاف Tailwind CSS: إطار عمل CSS الموجه للمرافق وكيفية دمجه في مشاريعك

Updated يونيو 15, 2026 11 min read

Aldawsari

دقائق القراءة: 11

مقدمة إلى Tailwind CSS: ثورة في عالم تصميم الواجهات

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

ما هو Tailwind CSS؟ وما الذي يميزه؟

Tailwind CSS هو إطار عمل CSS يعتمد مبدأ "المرافق أولاً" (utility-first). يقدم هذا الإطار كتالوجاً غنياً من فئات CSS الجاهزة والأدوات التي تمكنك من البدء في تصميم موقعك الإلكتروني أو تطبيقك بسهولة وفعالية. الهدف الأساسي من Tailwind هو تحرير المطورين من عبء التعامل مع الأنماط المتتالية (cascading styles) والقلق بشأن كيفية تجاوز تلك الأنماط المعقدة التي قد تتراكم وتصبح كابوساً في مشاريعهم.

لماذا يعتبر Tailwind CSS خياراً ممتازاً؟

يكمن تفرد Tailwind في توفيره لمجموعة واسعة من فئات CSS، حيث تركز كل فئة على استخدام محدد وواضح. فبدلاً من تعريف فئة مثل .btn تحتوي على مجموعة من خصائص CSS مباشرة، يتيح لك Tailwind تطبيق العديد من الفئات المساعدة مباشرة على العنصر، مثل bg-blue-500 py-2 px-4 rounded لزر معين. أو يمكنك بناء فئة مخصصة مثل .btn عن طريق تطبيق هذه الفئات المساعدة على هذا المحدد.

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

الجزء الأول: إضافة Tailwind CSS إلى صفحة HTML ثابتة

سنبدأ بتطبيق Tailwind CSS مباشرة على صفحة HTML ثابتة. الهدف من ذلك هو التركيز على فهم آلية عمل الإطار نفسه دون تشتيت الانتباه بتعقيدات التطبيقات.

الخطوة 1: إنشاء صفحة HTML جديدة

ابدأ بإنشاء ملف HTML جديد. يمكنك استخدام أي محتوى تريده، ولكن لغرض التوضيح، سنستخدم محتوى عشوائي من موقع fillerama.io لجعل المحتوى أكثر جاذبية.

الخطوة 2: إضافة Tailwind CSS عبر CDN

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

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

بمجرد حفظ الصفحة وإعادة تحميلها، ستلاحظ أن جميع الأنماط الافتراضية قد اختفت! وهذا أمر متوقع. يتضمن Tailwind مجموعة من الأنماط الأولية (preflight styles) لإصلاح التناقضات بين المتصفحات المختلفة. فهو يضم normalize.css الشهير ويبني عليه أنماطه الخاصة. لكن لا تقلق، سنتعلم الآن كيفية استخدام Tailwind لإعادة إضافة أنماطنا وتخصيصها بالطريقة التي نريدها!

الخطوة 3: استخدام فئات Tailwind CSS لتنسيق صفحتك

بعد تثبيت Tailwind، أصبح لدينا القدرة على استخدام مكتبته الضخمة من الفئات المساعدة. لنبدأ بإضافة بعض الهوامش لجميع فقراتنا (<p>) وعناصر القوائم (<ol> و <ul>). يمكننا القيام بذلك عن طريق إضافة فئة .my-5 إلى كل عنصر على النحو التالي:

<p class="my-5">Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along… Belligerent and numerous.</p>

يتبع اسم الفئة نمطاً ستلاحظه مع بقية الفئات المساعدة – .my-5 تعني هامش (m) مطبق على المحور y بقيمة 5، والتي في حالة Tailwind، تستخدم وحدة rem، لذا تكون القيمة 5rem.

بعد ذلك، لنجعل عناويننا تبدو كعناوين حقيقية. بدءاً من وسم h1، لنضف:

<h1 class="text-2xl font-bold mt-8 mb-5">

إليك ما يحدث هنا:

text-2xl: يحدد حجم النص (font-size) إلى 2xl. في Tailwind، تعادل 2xl قيمة 1.5rem.
font-bold: يحدد سمك النص (font-weight) إلى bold.
mt-8: على غرار my-5، سيحدد هذا الهامش العلوي (margin-top) إلى 8rem.
mb-5: وسيحدد هذا الهامش السفلي (margin-bottom) إلى 5rem.

مع إضافة هذه الفئات إلى h1، دعنا نطبق نفس الفئات تماماً على بقية عناصر العناوين، ولكن مع تقليل حجم الخط كلما نزلنا في القائمة، بحيث تبدو كالتالي:

h2: text-xl
h3: text-lg

الآن لنجعل عناصر القائمة تبدو كقوائم حقيقية. بدءاً من قائمتنا غير المرتبة (<ul>)، لنضف هذه الفئات:

<ul class="list-disc list-inside my-5 pl-2">

إليك ما نضيفه:

list-disc: يحدد نوع نمط القائمة (list-style-type) إلى disc (علامات التعداد النقطي).
list-inside: يحدد موضع علامات القائمة باستخدام list-style-position إلى inside.
my-5: يحدد الهامش على المحور y إلى 5rem.
pl-2: يحدد الحشو الأيسر (padding-left) إلى 2rem.

ثم يمكننا تطبيق نفس الفئات تماماً على قائمتنا المرتبة (<ol>)، باستثناء أننا نريد تغيير نوع النمط إلى list-decimal بدلاً من list-disc، حتى نرى الأرقام نظراً لأنها قائمة مرتبة.

<ol class="list-decimal list-inside my-5 pl-2">

وهكذا، أصبح لدينا قوائمنا منسقة!

أخيراً، لنجعل محتوانا أسهل في القراءة عن طريق تحديد أقصى عرض وتوسيط المحتوى. في وسم <body>، أضف ما يلي:

<body class="max-w-4xl mx-auto">

ملاحظة: عادةً، لا يُفضل تطبيق هذه الفئات مباشرة على وسم <body> نفسه. بدلاً من ذلك، يمكنك تغليف جميع محتوياتك بوسم <main> وتطبيق هذه الفئات عليه. ولكن لغرض التوضيح وفهم كيفية عمل Tailwind، سنستخدم هذه الطريقة. لا تتردد في إضافة وسم <main> مع تلك الفئات إذا كنت تفضل ذلك!

وبهذا، تكون صفحتنا جاهزة!

الخطوة 4: إضافة زر ومكونات أخرى

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

أولاً، لنضف زراً جديداً. في مكان ما في الصفحة، أضف المقتطف التالي. سأضيفه أسفل الفقرة الأولى (<p>) مباشرة:

<button>Party with Slurm!</button>

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

<button class="text-white font-bold bg-purple-700 hover:bg-purple-800 py-2 px-4 rounded">Party with Slurm!</button>

إليك تفصيل لما يحدث:

text-white: نحدد لون النص إلى الأبيض.
font-bold: نحدد سمك النص (font-weight) إلى bold.
bg-purple-700: نحدد لون خلفية الزر إلى الأرجواني بدرجة 700. القيمة 700 نسبية للألوان الأخرى المعرفة كأرجواني، يمكنك العثور على هذه القيم في صفحة توثيق الألوان الخاصة بـ Tailwind.
hover:bg-purple-800: عند مرور المؤشر فوق الزر، نحدد لون الخلفية إلى الأرجواني بدرجة 800. يوفر Tailwind هذه الفئات المساعدة التي تسمح لنا بتحديد أنماط تفاعلية بسهولة باستخدام معدلات مثل hover و focus و active.
py-2: نحدد الحشو على المحور y إلى 2rem.
px-4: نحدد الحشو على المحور x إلى 4rem.
rounded: نقوم بتقريب زوايا العنصر عن طريق تحديد border-radius. مع Tailwind، يحدد قيمة border-radius إلى .25rem.

وبكل هذا، أصبح لدينا زرنا جاهزاً!

يمكنك تطبيق هذه المنهجية على أي مكون آخر ترغب في بنائه. على الرغم من أنها عملية يدوية، إلا أننا سنكتشف كيف يمكننا تسهيل هذه العملية عند البناء في مشاريع أكثر ديناميكية مثل تلك التي تعتمد على React.

الجزء الثاني: إضافة Tailwind CSS إلى تطبيق React

لاستخدام أكثر واقعية، سنقوم بإضافة Tailwind CSS إلى تطبيق تم إنشاؤه باستخدام Create React App. أولاً، سنستعرض الخطوات التي تحتاجها لإضافة Tailwind إلى مشروعك باستخدام تثبيت جديد لـ Create React App، ثم سنستخدم محتوانا من المثال الأخير لإعادة إنشائه في React.

الخطوة 1: إعداد تطبيق React جديد

لن نفصل هذه الخطوة كثيراً. الفكرة الأساسية هي أننا سنقوم بإنشاء تطبيق React جديد باستخدام Create React App. للبدء، يمكنك اتباع التوجيهات من وثائق React الرسمية: https://reactjs.org/docs/create-a-new-react-app.html

وبمجرد تشغيل خادم التطوير الخاص بك، يجب أن ترى التطبيق الآن!

أخيراً، دعنا نرحل جميع محتوانا القديم إلى تطبيقنا. للقيام بذلك، انسخ كل شيء داخل وسم <body> من مثالنا الثابت والصقه داخل وسم <div className="App"> في مشروع React الجديد.

بعد ذلك، قم بتغيير جميع سمات class=" من المحتوى الذي لصقناه إلى className=" بحيث تستخدم سمات React الصحيحة:

وأخيراً، استبدل className App على وسم <div> الخاص بنا بالفئات التي استخدمناها على وسم <body> الثابت الخاص بنا.

بمجرد حفظ تغييراتك وإعادة تشغيل الخادم، سيبدو الأمر جيداً بشكل مخادع. يتضمن React بعض الأنماط الأساسية بنفسه، لذا بينما يبدو الأمر جيداً، فإننا لا نستخدم Tailwind بعد. لذا، لنبدأ بتثبيته!

الخطوة 2: تثبيت Tailwind في تطبيق React الخاص بك

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

أولاً، لنضف تبعياتنا:

yarn add tailwindcss postcss-cli autoprefixer
# أو
npm install tailwindcss postcss-cli autoprefixer

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

tailwindcss: حزمة Tailwind الأساسية.
postcss-cli: يستخدم Create React App بالفعل postcss، لكننا نحتاج إلى تكوين Tailwind ليكون جزءاً من عملية البناء هذه وتشغيل معالجته الخاصة.
autoprefixer: لا يتضمن Tailwind بادئات البائع (vendor prefixes)، لذا نريد إضافة autoprefixer للتعامل مع هذا الأمر نيابة عنا. يعمل هذا كجزء من تكوين postcss الخاص بنا.

سنضيف أيضاً تبعيتين تطويريتين تجعلان العمل مع شيفرتنا أسهل:

yarn add concurrently chokidar-cli -D
# أو
npm install concurrently chokidar-cli --save-dev

concurrently: حزمة تتيح لنا إعداد القدرة على تشغيل أوامر متعددة في وقت واحد. هذا مفيد لأننا سنحتاج إلى مراقبة كل من الأنماط وتطبيق React نفسه.
chokidar-cli: يتيح لنا مراقبة الملفات وتشغيل أمر عند التغيير. سنستخدم هذا لمراقبة ملف CSS الخاص بنا وتشغيل عملية بناء CSS عند التغيير.

بعد ذلك، لنقم بتكوين postcss، لذا قم بإنشاء ملف جديد في جذر مشروعك يسمى postcss.config.js وقم بتضمين ما يلي:

// داخل postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ],
};

سيضيف هذا مكوني Tailwind CSS و Autoprefixer الإضافيين إلى تكوين postcss الخاص بنا. مع تكويننا، نحتاج إلى تضمينه كجزء من عمليات البناء والمراقبة. داخل ملف package.json، أضف التعريفات التالية إلى خاصية scripts الخاصة بك:

  "build:css": "tailwind build src/App.css -o src/index.css",
  "watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",

بالإضافة إلى ذلك، قم بتعديل نصوص start و build لتضمين تلك الأوامر الآن:

  "start": "concurrently -n Tailwind,React 'npm run watch:css' 'react-scripts start'",
  "build": "npm run build:css && react-scripts build",

مع جاهزية تكويننا، دعنا نحاول إعادة أنماطنا إلى حيث كانت عندما توقفنا عن المثال الثابت. داخل ملف App.css، استبدل المحتوى بالكامل بما يلي:

@tailwind base;
@tailwind components;
@tailwind utilities;

سيقوم هذا باستيراد الأنماط الأساسية والمكونات وفئات المرافق الخاصة بـ Tailwind التي تسمح له بالعمل كما تتوقع. يمكننا أيضاً إزالة استيراد App.css من ملف App.js الخاص بنا لأنه يتم حقنه الآن مباشرة في ملف index.css الخاص بنا. لذا، قم بإزالة هذا السطر:

import './App.css';

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

الخطوة 3: إنشاء فئة مكون زر جديدة باستخدام Tailwind

لا يأتي Tailwind مع فئات مكونات جاهزة، ولكنه يجعل من السهل إنشائها! سنستخدم زرنا الذي أنشأناه بالفعل كمثال لإنشاء مكون جديد. سنقوم بإنشاء فئة جديدة btn بالإضافة إلى معدل لون btn-purple لتحقيق ذلك.

أول شيء سنفعله هو فتح ملف App.css حيث سننشئ فئتنا الجديدة. داخل هذا الملف، لنضف:

.btn {
  @apply font-bold py-2 px-4 rounded;
}

إذا تذكرت من HTML الخاص بنا، فإننا نضمّن بالفعل نفس الفئات في عنصر <button> الخاص بنا. يتيح لنا Tailwind "تطبيق" أو تضمين الأنماط التي تشكل هذه الفئات المساعدة في فئة أخرى، في هذه الحالة، فئة .btn. والآن بعد أن أنشأنا هذه الفئة، دعنا نطبقها على زرنا:

<button className="btn text-white bg-purple-700 hover:bg-purple-800">Party with Slurm!</button>

وإذا فتحنا صفحتنا، يمكننا أن نرى أن زرنا لا يزال يبدو كما هو. إذا فحصنا العنصر، يمكننا أن نرى فئة .btn الجديدة التي تم إنشاؤها بهذه الأنماط.

بعد ذلك، لننشئ معدلاً للألوان. على غرار ما فعلناه للتو، سنضيف القواعد التالية:

.btn-purple {
  @apply bg-purple-700 text-white;
}
.btn-purple:hover {
  @apply bg-purple-800;
}

هنا، نضيف لون الخلفية ولون النص إلى فئة الزر. ونطبق أيضاً لون زر أغمق عند مرور المؤشر فوق الزر. سنحتاج أيضاً إلى تحديث زر HTML الخاص بنا لتضمين فئتنا الجديدة وإزالة الفئات التي طبقناها للتو:

<button className="btn btn-purple">Party with Slurm!</button>

ومع هذا التغيير، لا يزال بإمكاننا رؤية أنه لم يتغير شيء ولدينا فئة زرنا الجديدة!

تطبيق هذه المفاهيم على المزيد من المكونات

من خلال هذا الدليل، تعلمنا كيفية إنشاء فئة مكون جديدة باستخدام توجيه @apply في Tailwind. سمح لنا هذا بإنشاء فئات قابلة لإعادة الاستخدام تمثل مكوناً مثل الزر. يمكننا تطبيق هذا على أي عدد من المكونات في نظام التصميم الخاص بنا. على سبيل المثال، إذا أردنا دائماً عرض قوائمنا بالطريقة التي أعددناها هنا، يمكننا إنشاء فئة .list-ul تمثل قائمة غير مرتبة مع فئات Tailwind المساعدة list-disc list-inside my-5 pl-2 المطبقة عليها.

الخلاصة التقنية

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