<!-- ضيف الـ script ده جوا head -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- وتقدر تضيف config مباشرةً -->
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#39ff14',
        }
      }
    }
  }
</script>

# 1. تثبيت Tailwind
npm install -D tailwindcss
npx tailwindcss init

# 2. في tailwind.config.js حدد الـ files
# content: ["./src/**/*.{html,js}"]

# 3. في input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

# 4. شغّل الـ build
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

<!-- بطاقة بسيطة بـ Tailwind -->
<div class="bg-white rounded-2xl shadow-xl p-6 max-w-sm mx-auto">
  <img class="w-full h-48 object-cover rounded-xl mb-4"
       src="photo.jpg" alt="صورة"/>
  <h2 class="text-2xl font-bold text-gray-800 mb-2">العنوان</h2>
  <p class="text-gray-500 text-sm leading-relaxed">
    نص الوصف هنا...
  </p>
  <button class="mt-4 w-full bg-blue-500 hover:bg-blue-600
                text-white font-semibold py-2 px-4 rounded-lg
                transition duration-300">
    اعرف أكتر
  </button>
</div>

<!-- لون النص -->
<p class="text-blue-500">أزرق</p>
<p class="text-gray-400">رمادي فاتح</p>
<p class="text-emerald-600">أخضر</p>

<!-- لون الخلفية -->
<div class="bg-slate-900">خلفية داكنة</div>
<div class="bg-yellow-400">أصفر</div>

<!-- Gradient -->
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-8 text-white">
  Gradient رائع!
</div>

<!-- Gradient الـ diagonal -->
<div class="bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-600">
  Gradient بـ 3 ألوان
</div>

<!-- Opacity -->
<div class="bg-blue-500 bg-opacity-50">شبه شفاف</div>
<!-- أو الطريقة الجديدة -->
<div class="bg-blue-500/50">50% opacity</div>

<!-- أحجام الخط (text-xs → text-9xl) -->
<p class="text-xs">12px</p>
<p class="text-sm">14px</p>
<p class="text-base">16px (الافتراضي)</p>
<p class="text-lg">18px</p>
<p class="text-xl">20px</p>
<p class="text-2xl">24px</p>
<p class="text-4xl font-bold">عنوان كبير</p>
<p class="text-8xl font-black">HERO</p>

<!-- وزن الخط -->
<p class="font-thin">100</p>     <!-- 100 -->
<p class="font-normal">عادي</p>  <!-- 400 -->
<p class="font-semibold">متوسط</p><!-- 600 -->
<p class="font-bold">سميك</p>    <!-- 700 -->
<p class="font-black">أسمك</p>   <!-- 900 -->

<!-- تنسيق النص -->
<p class="uppercase tracking-widest">PHINEX</p>
<p class="italic line-through">محذوف</p>
<p class="underline decoration-2 decoration-blue-400">بخط تحته</p>
<p class="leading-loose">مسافة بين السطور كبيرة</p>

<!-- Text Gradient -->
<h1 class="text-4xl font-black bg-gradient-to-r from-cyan-400
            to-purple-400 bg-clip-text text-transparent">
  نص ملوّن بـ Gradient!
</h1>

<!-- px = padding horizontal (left + right) -->
<div class="px-8 py-4">padding أفقي وعمودي</div>

<!-- pt, pb, pr, pl = top, bottom, right, left -->
<div class="pt-8 pb-4 pr-6 pl-2">padding منفصل</div>

<!-- mx-auto = margin auto (توسيط أفقي) -->
<div class="max-w-4xl mx-auto px-6">
  Container مركزي
</div>

<!-- Width -->
<div class="w-1/2">50%</div>
<div class="w-full">100%</div>
<div class="w-screen">100vw</div>
<div class="w-48">192px</div>
<div class="min-w-0 max-w-7xl">min و max</div>

<!-- Height -->
<div class="h-screen">100vh</div>
<div class="h-64">256px</div>
<div class="min-h-screen">min-height: 100vh</div>

<!-- Arbitrary values -->
<div class="w-[350px] h-[200px]">قيم مخصصة</div>

<!-- ── الاتجاه (flex-direction) ── -->
<div class="flex">أفقي (الافتراضي)</div>
<div class="flex flex-col">عمودي</div>
<div class="flex flex-row-reverse">عكسي</div>

<!-- ── المحاذاة الأفقية (justify-content) ── -->
<div class="flex justify-start">يسار</div>
<div class="flex justify-center">وسط</div>
<div class="flex justify-end">يمين</div>
<div class="flex justify-between">مسافات بالطرفين</div>
<div class="flex justify-around">مسافات متساوية</div>

<!-- ── المحاذاة العمودية (align-items) ── -->
<div class="flex items-start">أعلى</div>
<div class="flex items-center">وسط</div>
<div class="flex items-end">أسفل</div>

<!-- ── التوسيط الكامل ── -->
<div class="flex items-center justify-center h-screen">
  وسط الشاشة تماماً! 🎯
</div>

<!-- ── Gap (المسافة بين العناصر) ── -->
<div class="flex gap-4">
  <div>عنصر 1</div>
  <div>عنصر 2</div>
  <div>عنصر 3</div>
</div>

<!-- ── Flex children classes ── -->
<div class="flex">
  <div class="flex-1">بياخد باقي المساحة</div>
  <div class="flex-none w-32">ثابت 128px</div>
  <div class="self-end">هو بيتحاذى لوحده تحت</div>
</div>

<!-- ── Flex Wrap ── -->
<div class="flex flex-wrap gap-3">
  <!-- العناصر هتنزل لسطر جديد لو ضاقت المساحة -->
</div>

<!-- Grid بـ 3 أعمدة -->
<div class="grid grid-cols-3 gap-6">
  <div>عمود 1</div>
  <div>عمود 2</div>
  <div>عمود 3</div>
</div>

<!-- Grid بأعمدة Responsive -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- موبايل: عمود / تابلت: عمودين / لاب: 4 أعمدة -->
</div>

<!-- عنصر بياخد عمودين -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">بياخد نصف الشبكة</div>
  <div class="col-span-1">ربع</div>
  <div class="col-span-1">ربع</div>
</div>

<!-- Grid auto-fit (زي masonry) -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6">
  <!-- Columns بتتعمل أوتوماتيك حسب المساحة -->
</div>

<!-- Grid Template Areas (Arbitrary) -->
<div class="grid grid-rows-3 grid-cols-3">
  <div class="col-start-1 col-end-3 row-start-1">Header</div>
</div>

<!-- نص صغير على الموبايل، كبير على اللاب -->
<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">
  عنوان Responsive
</h1>

<!-- Grid Responsive -->
<div class="grid
  grid-cols-1
  sm:grid-cols-2
  lg:grid-cols-3
  xl:grid-cols-4
  gap-4">
  <!-- موبايل: 1 عمود → sm: 2 → lg: 3 → xl: 4 -->
</div>

<!-- إخفاء/إظهار حسب الشاشة -->
<div class="hidden md:block">مش بان على الموبايل</div>
<div class="block md:hidden">مش بان على الديسكتوب</div>

<!-- Responsive flex direction -->
<div class="flex flex-col md:flex-row gap-6">
  <!-- موبايل: عمودي، تابلت: أفقي -->
</div>

<!-- Responsive padding/margin -->
<div class="p-4 md:p-8 lg:p-16">
  Padding بيكبر مع الشاشة
</div>

<!-- ── Borders ── -->
<div class="border">حد عادي 1px</div>
<div class="border-2 border-blue-500">حد أزرق 2px</div>
<div class="border-t-4 border-green-400">حد فوق بس</div>
<div class="border border-dashed border-gray-400">منقط</div>

<!-- Rounded Corners -->
<div class="rounded">4px</div>
<div class="rounded-lg">8px</div>
<div class="rounded-2xl">16px</div>
<div class="rounded-full">دائرة / capsule</div>
<div class="rounded-tl-3xl rounded-br-3xl">زوايا محددة</div>

<!-- ── Shadows ── -->
<div class="shadow-sm">ظل صغير</div>
<div class="shadow-md">ظل متوسط</div>
<div class="shadow-xl">ظل كبير</div>
<div class="shadow-2xl">ظل ضخم</div>

<!-- Colored Shadow (Tailwind v3+) -->
<div class="shadow-lg shadow-blue-500/50">ظل أزرق</div>
<div class="shadow-xl shadow-purple-500/40">ظل بنفسجي</div>

<!-- Ring (border بـ box-shadow) -->
<button class="ring-2 ring-blue-500 ring-offset-2 focus:ring-4">
  Ring Effect
</button>

<!-- Blur Effects -->
<div class="blur-sm">blur صغير</div>
<div class="backdrop-blur-lg bg-white/10">Glass Effect!</div>

<!-- زر بـ hover animation -->
<button class="
  bg-blue-500 text-white px-6 py-3 rounded-xl
  transition-all duration-300 ease-in-out
  hover:bg-blue-700 hover:scale-105 hover:shadow-lg
  active:scale-95
">اضغطني</button>

<!-- بطاقة بـ hover كامل -->
<div class="
  bg-gray-800 rounded-2xl p-6
  transition-all duration-500 ease-out
  hover:-translate-y-3
  hover:shadow-2xl hover:shadow-blue-500/30
  cursor-pointer group
">
  <h3 class="text-white font-bold
    transition-colors duration-300
    group-hover:text-blue-400">
    العنوان بيتلوّن على hover الـ parent!
  </h3>
</div>

<!-- Transition على property محددة -->
<div class="transition-colors duration-200">لون بس</div>
<div class="transition-transform duration-500">حركة بس</div>
<div class="transition-opacity duration-700">opacity بس</div>

<!-- Loading Spinner -->
<div class="w-8 h-8 border-4 border-blue-500 border-t-transparent
            rounded-full animate-spin"></div>

<!-- Notification Ping -->
<span class="relative">
  <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-ping"></span>
  🔔
</span>

<!-- Skeleton Loading -->
<div class="space-y-3">
  <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
  <div class="h-4 bg-gray-700 rounded animate-pulse w-5/6"></div>
  <div class="h-4 bg-gray-700 rounded animate-pulse w-3/4"></div>
</div>

<!-- Custom Animation بـ tailwind.config -->
<!-- في tailwind.config.js: -->
// extend: {
//   keyframes: {
//     wiggle: {
//       '0%, 100%': { transform: 'rotate(-3deg)' },
//       '50%': { transform: 'rotate(3deg)' },
//     },
//     fadeIn: {
//       '0%': { opacity: '0', transform: 'translateY(20px)' },
//       '100%': { opacity: '1', transform: 'translateY(0)' },
//     }
//   },
//   animation: {
//     wiggle: 'wiggle 1s ease-in-out infinite',
//     fadeIn: 'fadeIn 0.5s ease-out both',
//   }
// }
<div class="animate-wiggle">يتمايل</div>
<div class="animate-fadeIn">يظهر بسلاسة</div>

/* perspective: كلما قل الرقم كلما زاد التأثير */
perspective: 1000px;    /* بعيد - تأثير خفيف */
perspective: 400px;     /* قريب - تأثير قوي */

/* دوران على محور X (أعلى/أسفل) */
transform: rotateX(45deg);

/* دوران على محور Y (يمين/شمال) */
transform: rotateY(45deg);

/* preserve-3d = خلي الـ children تحافظ على الـ 3D */
transform-style: preserve-3d;

/* backface-visibility = إخفاء الوجه الخلفي */
backface-visibility: hidden;

<!-- CDN لازم يكون في الـ head -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
  .flip-card { perspective: 1000px; }
  .flip-inner {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
  }
  .flip-card:hover .flip-inner {
    transform: rotateY(180deg);
  }
  .flip-front, .flip-back {
    backface-visibility: hidden;
    position: absolute;
    inset: 0;
  }
  .flip-back {
    transform: rotateY(180deg);
  }
</style>

<div class="flip-card w-64 h-64 cursor-pointer">
  <div class="flip-inner relative w-full h-full">

    <!-- الوجه الأمامي -->
    <div class="flip-front bg-gradient-to-br from-blue-500 to-purple-600
                  rounded-2xl flex items-center justify-center text-white text-2xl">
      🎴 الأمام
    </div>

    <!-- الوجه الخلفي -->
    <div class="flip-back bg-gradient-to-br from-orange-400 to-pink-600
                  rounded-2xl flex items-center justify-center text-white text-2xl">
      ✨ الخلف
    </div>

  </div>
</div>

<style>
  .scene {
    width: 120px;
    height: 120px;
    perspective: 400px;
  }
  .cube {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 8s linear infinite;
  }
  @keyframes rotateCube {
    from { transform: rotateX(0) rotateY(0); }
    to   { transform: rotateX(360deg) rotateY(360deg); }
  }
  .cube-face {
    position: absolute;
    width: 120px; height: 120px;
    border: 2px solid rgba(56,189,248,0.5);
    background: rgba(56,189,248,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
  }
  .front  { transform: translateZ(60px); }
  .back   { transform: rotateY(180deg) translateZ(60px); }
  .right  { transform: rotateY(90deg) translateZ(60px); }
  .left   { transform: rotateY(-90deg) translateZ(60px); }
  .top    { transform: rotateX(90deg) translateZ(60px); }
  .bottom { transform: rotateX(-90deg) translateZ(60px); }
</style>

<div class="scene">
  <div class="cube">
    <div class="cube-face front">🌐</div>
    <div class="cube-face back">⚡</div>
    <div class="cube-face right">🎨</div>
    <div class="cube-face left">🔥</div>
    <div class="cube-face top">✨</div>
    <div class="cube-face bottom">💎</div>
  </div>
</div>

<!-- بطاقة بتتميل مع الماوس بـ JavaScript -->
<div id="tilt-card" class="
  w-72 h-48 bg-gradient-to-br from-blue-600 to-purple-700
  rounded-2xl flex items-center justify-center text-white text-2xl
  cursor-pointer select-none"
  style="transform-style:preserve-3d;perspective:800px;transition:transform 0.1s"
>
  🎴 حرّك الماوس فوقي!
</div>

<script>
  const card = document.getElementById('tilt-card');
  card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    // نحسب موقع الماوس بالنسبة لمركز البطاقة
    const x = (e.clientX - rect.left - rect.width / 2) / (rect.width / 2);
    const y = (e.clientY - rect.top - rect.height / 2) / (rect.height / 2);
    // نطبق الـ rotation
    card.style.transform = `
      perspective(800px)
      rotateY(${x * 20}deg)
      rotateX(${-y * 20}deg)
      scale(1.05)
    `;
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = 'perspective(800px) rotateY(0) rotateX(0) scale(1)';
  });
</script>

<!-- في tailwind.config -->
// darkMode: 'class'  // أو 'media'

<!-- استخدام Dark Mode -->
<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-800 dark:text-gray-100">نص</p>
  <button class="bg-blue-500 dark:bg-blue-800">زر</button>
</div>

<!-- Toggle Dark Mode بـ JavaScript -->
<button onclick="document.documentElement.classList.toggle('dark')">
  تبديل الوضع المظلم
</button>

<!-- أي قيمة بين [] بتشتغل مباشرة! -->
<div class="w-[337px]">عرض مخصص</div>
<div class="bg-[#ff6b35]">لون مخصص</div>
<div class="top-[117px]">موضع محدد</div>
<div class="grid-cols-[1fr_2fr_1fr]">Grid مخصص</div>
<div class="[clip-path:polygon(0_0,100%_0,85%_100%,0_100%)]">
  أي CSS property!
</div>

<!-- Plugin مثال: Typography plugin -->
// npm install @tailwindcss/typography
<article class="prose prose-lg dark:prose-invert">
  <!-- نص HTML عادي بيتنسق أوتوماتيك بشكل جميل -->
  <h1>مقالة</h1>
  <p>محتوى المقالة هنا...</p>
</article>

<!-- Plugin مثال: Forms plugin -->
// npm install @tailwindcss/forms
<input type="text" class="form-input"/>
<select class="form-select"></select>