_

بواسطة |

مهندس برمجيات متخصص في تطوير تطبيقات الويب والجوال . شغوف بالتعلم المستمر وتطوير حلول مبتكرة لتحديات البرمجة المعاصرة.
للرجوع
9 دقائق للقراءة
٧ مارس ٢٠٢٥

تطوير الواجهات بسهولة باستخدام Tailwind CSS

البدايه

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

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

في هذا المقال، راح نغطي:

✅ التثبيت

✅ المفاهيم الأساسية لاستخدامها

✅ مقارنة بين CSS العادية و Tailwind

✅ السلبيات والايجابيات

التثبيت

تثبيت Tailwind سهل جدا وله عدة طرق يعتمد على مشروعك.

1. بإستخدام CDN (ينفع للمشاريع البسيطه وعشان تجرب)

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body></body>
</html>

2. الثتبيت باستخدام npm

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

راح يضيف لك ملف tailwind.config.js يساعدك تخصص الثيمنق وكل شيء باللي يناسبك ويناسب مشروعك.

3. لو كنت تستخدم next.js

npx create-next-app my-app -e with-tailwindcss

بعد الثتبيث يمديك تبدا تستخدم Tailwind بالمشروع بسهولة

المفاهيم الاساسيه

Tailwind تقدم مفاهيم جديده علينا عند تطوير الواجهات بمقارنه مع ال css العاديه، راح نتطرق لهذي المفاهيم بهذا القسم

1. الاعتماد على كلاسات جاهزه

توفر Tailwind كلاسات جاهزه مثل text-blue-500, bg-gray-100, and p-4 عشان تنسق التصميم وتطوره مباشره دون الحاجه لكتابة التصاميم بنفسك بإستخدام css عاديه.

2. التخصيص باستخدام tailwind.config.js

Tailwind تساعدك تخصص الثيم اللي يجي جاهز معها عشان يناسب تصميمك ويكون مخصص لك بإستخدام ملف tailwind.config.js.

مثال:

module.exports = {
  theme: {
    extend: {
      colors: {
        customBlue: '#1E40AF',
      },
    },
  },
};

3. متغيرات للتحكم بالتصميم بناء مقاس الشاشه

Tailwind تسهل لنا التحكم بالتصميم وتغييره بناء على حجم الشاشات بإستخدام sm:, md:, lg:, وغيرها.

مثال:

المفروض هنا الكتابه تكبر معنا كلما كبر حجم الشاشه المستخدمه

<div class="text-base sm:text-lg md:text-xl lg:text-2xl">
    Responsive Text
</div>

4. متغيرات للتحكم بالحالة (Hover, Focus, Dark Mode, etc.)

هنا مثلا لو لمسنا الزر راح يصير اغمق اللون ولو ركزنا عليه بيحط بوردر ولون معين للبوردر

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 ring-blue-300">
    Hover Me
</button>

5. مزايا اضافية

توفر Tailwind اشياء مثل @apply لو كنت مدمن css ومزعجك طول الكلاسات لان احيانا ممكن يصير السطر طويل جدا يمديك تفصلها لملف css وتستخدم @apply و @layer و @variants لتحقيق هالشيء.

اساسيات CSS وكيف نطبقها بTailwind

بهذا القسم راح نشوف اهم اساسيات CSS وكيف كنا نسويها لو بCSS لحال او لو مع Tailwind.

1. تنسيق الصفحة

مثال CSS:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

<div class="container">Centered Content</div>

مثال Tailwind:

<div class="flex justify-center items-center h-screen">Centered Content</div>

مثال تطبيقي:

export default function Example() {
return (
<div class="flex justify-center items-center h-screen">Centered Content</div>
)
}
Open on CodeSandboxOpen Sandbox

2. تنسيق الخطوط والكتابة

مثال CSS:

h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
}

<h1 class="heading">Hello World</h1>

مثال Tailwind:

<h1 class="text-2xl font-bold text-gray-800">Hello World</h1>

مثال تطبيقي:

export default function Example() {
return (
<h1 class="text-2xl font-bold text-gray-800">Hello World</h1>
)
}
Open on CodeSandboxOpen Sandbox

3. التحريك

مثال CSS:

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-in {
    animation: fadeIn 1s ease-in-out;
}

<div class="fade-in">Fade In Effect</div>

مثال Tailwind:

<div class="animate-fadeIn">Fade In Effect</div>

مثال تطبيقي:

export default function AnimationExample() {
return (
<div className="flex flex-col items-center gap-4 p-8">
  <button 
    className="px-4 py-2 bg-green-500 text-white rounded hover:scale-110 transition-transform duration-300"
  >
  اضغط هنا
  </button>
  
</div>
)
}
Open on CodeSandboxOpen Sandbox

(تحتاج بس تثبت هذي الاضافه وراح تعطيك القدره على اضافة تحريكات بسطه @tailwindcss/animations.)

4. التغيير بناء على حجم الشاشه

مثالCSS:

.container {
    width: 100%;
}
@media (min-width: 640px) {
    .container { width: 75%; }
} 

<div class="container">Responsive Box</div>

مثال Tailwind:

 <div className="p-4">
      <div className="bg-blue-500 text-white p-4 text-center sm:bg-green-500 md:bg-yellow-500 lg:bg-red-500 xl:bg-purple-500">
        Resize the screen to see the background color change!
      </div>
    </div>

عشان يوضح معك المثال ادخل هنا

كيفية عمل Tailwind من الداخل

Tailwind تعمل بشكل مختلف عن مكتبات CSS التقليدية. بدلاً من تحميل ملف CSS كامل، تستخدم نظام توليد ديناميكي للكلاسات. خلينا نشوف كيف يتم هذا:

1. مرحلة التوليد 🏗️

/* الكلاس اللي تكتبه */
<div class="text-blue-500 hover:text-blue-700">

/* يتحول في النهاية إلى */
.text-blue-500 {
  color: rgb(59, 130, 246);
}

.hover\:text-blue-700:hover {
  color: rgb(29, 78, 216);
}

2. نظام Just-in-Time (JIT) ⚡

Tailwind يستخدم نظام JIT اللي يقوم بتوليد الكلاسات المستخدمة فقط:

<!-- الكود اللي تكتبه -->
<div class="mt-4 text-center">
  <h1 class="text-2xl">عنوان</h1>
</div>

<!-- الكلاسات المولدة فقط -->
.mt-4 {
  margin-top: 1rem;
}
.text-center {
  text-align: center;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

3. تحسين الأداء 📊

مثال على كيف يتم تحسين حجم CSS:

/* قبل التحسين - حجم كبير */
.text-red-100 { color: rgb(254, 226, 226); }
.text-red-200 { color: rgb(254, 202, 202); }
.text-red-300 { color: rgb(252, 165, 165); }
... (مئات الكلاسات)

/* بعد التحسين - فقط الكلاسات المستخدمة */
.text-red-500 { color: rgb(239, 68, 68); }
.hover\:text-red-700:hover { color: rgb(185, 28, 28); }

تعلم CSS عن طريق Tailwind

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

ايجابيات وسلبيات Tailwind

✅ ايجابيات:

  • تخصيص عالي وسهل مع tailwind.config.js
  • سرعة تطوير بسبب اختصارات الكلاسات
  • سهولة التغيير بناء على حجم الشاشات والحالات
  • ممتاز مع الاطارات مثل React and Next.js
  • حجم موقع خفيف بسبب خاصية اسمها tree-shaking

❌ سلبيات:

  • يبيلها تعلم بالبدايه بسبب الكلاسات الجاهزه اللي بتحتاج تعرفها
  • يمكن ينحاس الملف اذا كانت الكلاسات كثيره، لها حل بإستخدام @apply و @layer و @variants
  • مب شرط مناسب للمشاريع الصغيره، احيانا يمكن بس تحتاج كم كلاس بسيط وتنتهي

نظره سريعه بسيطه ل Headless UI

Headless UI مكتبه مطوره من فريق Tailwind تعطيك مكونات جاهزه مثل الازرار و modalas و الdropwdowns وغيرها بدال لاتكتبها بنفسك وبنفس الوقت حجمها خفيف بدال لاتحمل مكتبات ضخمه ماتحتاج اغلبها

مثال تطبيقي :

import { Switch } from '@headlessui/react'
import { useState } from 'react'

export default function Example() {
const [enabled, setEnabled] = useState(false)

return (
<div className="flex justify-center items-center h-screen bg-black">
<Switch
  checked={enabled}
  onChange={setEnabled}
  className="group relative flex h-7 w-14 cursor-pointer rounded-full bg-white/10 p-1 transition-colors duration-200 ease-in-out focus:outline-none data-[focus]:outline-1 data-[focus]:outline-white data-[checked]:bg-white/10"
>
  <span
    aria-hidden="true"
    className="pointer-events-none inline-block size-5 translate-x-0 rounded-full bg-white ring-0 shadow-lg transition duration-200 ease-in-out group-data-[checked]:translate-x-7"
  />
</Switch>
</div>
)
}
Open on CodeSandboxOpen Sandbox

الخاتمه

Tailwind راح تسهل علينا كمطورين تحويل اي تصميم لواقع وواجهة بسهوله وسلاسه وبدون تعقيد وايضا مناسبه لمختلف احجام المشاريع ضخمه او صغيره، حبيت في هدا المقال اعطي مقدمه بسيطه عنها وعن مزاياها لاي شخص ممكن يكون جديد عليها وماكان يعرفها قبل.

عشان تدرب اكثر طبق اللي اخذناه هنا وادخل هنا Tailwind Playground

إذا كنت مهتم تتعلم اكثر عنها أنصحك تستكشف الموقع الرسمي:
🔗 Tailwind CSS
🔗 Headless UI

اشترك في النشرة البريدية

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