🎨 Tailwind CSS للتنسيق

📖 سلسلة تعلم React و Next.js | المقال 4

🎨 Tailwind CSS في Next.js

Tailwind CSS يجعل التنسيق سهلاً وسريعاً - بدون كتابة CSS!

✅ Tailwind موجود تلقائياً في Next.js - لا تحتاج تثبيت!

📊 مقارنة: CSS عادي vs Tailwind

❌ بدون Tailwind

<div style={{
  minHeight: '100vh',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  padding: '2rem',
  backgroundColor: '#3B82F6'
}}>

✅ مع Tailwind

<div className="min-h-screen 
  flex flex-col 
  items-center 
  justify-center 
  p-8 
  bg-blue-500">

🎨 الألوان

خلفية بلون واحد:

bg-red-500

bg-orange-500

bg-yellow-500

bg-green-500

bg-blue-500

bg-purple-500

خلفية متدرجة (Gradient):

bg-gradient-to-r from-pink-500 to-yellow-500

bg-gradient-to-b from-blue-500 to-purple-600

// أفقي →
<div className="bg-gradient-to-r from-pink-500 to-yellow-500">

// عمودي ↓
<div className="bg-gradient-to-b from-blue-500 to-purple-600">

// قطري ↘
<div className="bg-gradient-to-br from-green-400 to-blue-600">

📐 الحجم

Class	يعادل
p-4	padding: 16px
px-4	padding left/right: 16px
py-4	padding top/bottom: 16px
m-4	margin: 16px
text-xl	نص كبير

📦 Flexbox

// Container
<div className="flex">              // display: flex
<div className="flex-col">          // flex-direction: column
<div className="flex-wrap">         // flex-wrap: wrap

// محاذاة أفقية
<div className="justify-center">   // center
<div className="justify-between">  // space-between
<div className="justify-around">   // space-around

// محاذاة عمودية
<div className="items-center">     // center
<div className="items-start">      // start
<div className="items-end">        // end

// المسافات
<div className="gap-4">            // gap: 16px

🎯 مثال عملي: Navbar

<nav className="bg-gray-900 text-white p-4">
  <div className="container mx-auto flex justify-between items-center">
    
    {/* Logo */}
    <div className="text-xl font-bold">
      MyApp
    </div>
    
    {/* Links */}
    <div className="flex gap-6">
      <a href="/" className="hover:text-blue-400 transition">
        Home
      </a>
      <a href="/about" className="hover:text-blue-400 transition">
        About
      </a>
    </div>
    
  </div>
</nav>

✨ Hover & Transitions

// زر مع hover
<button className="
  bg-blue-500 
  text-white 
  px-6 py-2 
  rounded-lg 
  hover:bg-blue-600 
  transition 
  duration-300
">
  اضغط هنا
</button>

📊 ملخص Classes المهمة

الفئة	أمثلة
الألوان	bg-red-500 text-white
الحجم	p-4 m-4 text-xl
Flexbox	flex justify-center items-center
Border	border rounded-lg
Hover	hover:bg-blue-600 transition

💡 نصيحة: استخدم توثيق Tailwind للبحث عن أي class!

📌 تسميات: Tailwind CSS تعلم برمجة

✨ ← المقال السابق | المقال التالي: State & Events → ✨

سلسلة تعلم React و Next.js مع Ahmed Issa