Tailwind CSS

محتوى التوثيق

الدروس مرتّبة من الأساس إلى المتقدّم. اقرأها بالترتيب أو اقفز إلى ما تحتاجه.

1. 01

   الفصل 1

   البداية

   • 1مقدمة إلى Tailwind CSSتعرّف على Tailwind CSS، إطار العمل الذي تبني به واجهات احترافية بتركيب أصناف أدوات صغيرة مباشرة في HTML، وقارنه بكتابة CSS التقليدية وبإطار Bootstrap.
   • 2التثبيت والإعدادتعرّف على طرق تشغيل Tailwind: رابط Play CDN للتجربة السريعة، وأداة Tailwind CLI، والتثبيت مع Vite، ثم افهم دور الملف tailwind.config.js والتوجيهات @tailwind.
   • 3كيف تعمل أصناف الأدواتافهم العلاقة بين اسم الصنف وتصريح CSS الذي يولّده، وتشريح الأصناف مع البادئات، وكيف تتركب الأدوات لتبني مكوّنًا كاملًا، وما الذي تفعله تنسيقات Preflight.
2. 02

   الفصل 2

   الأدوات الأساسية

   • 4الألواناستخدم لوحة ألوان Tailwind الجاهزة بدرجاتها من 50 إلى 950 لتلوين النصوص والخلفيات والحدود، وتحكّم في الشفافية بصيغة الشرطة المائلة مثل bg-sky-500/50.
   • 5تنسيق النصوص والخطوطتحكّم في حجم الخط ووزنه، والمسافة بين الأسطر والحروف، والمحاذاة والتسطير، واقتطاع النصوص الطويلة، مع نصائح خاصة بالنصوص العربية.
   • 6المسافات: الحشوة والهامشتحكّم في المسافات داخل العناصر وحولها بأصناف p- وm-: سلّم المسافات، واختيار الجهات، والقيم السالبة، والتوسيط بـ mx-auto، والمسافات بين العناصر بـ space- وgap-.
   • 7الأبعاد: العرض والارتفاعحدّد عرض العناصر وارتفاعها بقيم ثابتة أو نسبية أو بحجم الشاشة، واستخدم max-w-* لبناء بطاقات متجاوبة، وsize-* لضبط العرض والارتفاع معًا.
   • 8الحدود والزوايا والحلقاتأضف حدودًا بالعرض واللون والنمط الذي تختاره، واجعل الزوايا مستديرة بأصناف rounded-*، واستخدم الحلقات ring-* لإبراز العناصر وحالات التركيز، والفواصل divide-* بين عناصر القوائم.
   • 9الظلال والشفافيةامنح العناصر عمقًا بمقياس الظلال من shadow-sm إلى shadow-2xl وبالظلال الملوّنة، وتحكّم في شفافية العناصر بأصناف opacity-*، واعرف متى تستخدم شفافية اللون بدلًا منها.
   • 10الخلفيات والتدرجات اللونيةأنشئ تدرجات لونية جذابة بأصناف bg-gradient-to-* وfrom- وvia- وto-، ولوّن النصوص بالتدرجات، وتحكّم في صور الخلفية، واصنع تأثير الزجاج الضبابي.
3. 03

   الفصل 3

   التخطيط

   • 11العرض والتموضعتحكّم في طريقة عرض العناصر بأصناف block وinline-block وhidden، وضع العناصر في أماكن دقيقة بأصناف التموضع relative وabsolute وfixed وsticky، ورتّب طبقاتها بأصناف z-*.
   • 12Flexbox في Tailwindرتّب العناصر في صف أو عمود بأصناف Flexbox: الاتجاه والتوزيع والمحاذاة والالتفاف والمسافات، وتحكّم في تمدد كل عنصر بأصناف مثل flex-1 وshrink-0.
   • 13التخطيط الشبكي Gridابنِ تخطيطات من صفوف وأعمدة بأصناف Grid: حدد عدد الأعمدة، ودع العناصر تمتد على أكثر من عمود أو صف، وأنشئ شبكات تتكيف تلقائيًا مع عرض الشاشة.
   • 14الحاوية والتوسيطاضبط عرض محتوى صفحتك بالصنف container أو بأصناف max-w-* مع mx-auto، وتعرّف على أشهر خمس طرق لتوسيط العناصر أفقيًا وعموديًا.
4. 04

   الفصل 4

   التجاوب والحالات

   • 15التصميم المتجاوباجعل تصميمك يعمل على الهاتف والحاسوب معًا ببادئات نقاط التحول sm: وmd: وlg: وxl: و2xl:، وافهم منهج «الهاتف أولًا» الذي يقوم عليه Tailwind.
   • 16حالات التفاعل: المرور والتركيز وغيرهانسّق العناصر بحسب حالتها ببادئات مثل hover: وfocus: وactive: وdisabled:، ونسّق الأبناء بحسب حالة الأب بـ group، والعناصر بحسب حالة شقيقها بـ peer.
   • 17الوضع الداكنأضف وضعًا داكنًا لموقعك بالبادئة dark:، واختر بين اتباع إعداد نظام المستخدم تلقائيًا أو التبديل اليدوي بزر عبر الإعداد darkMode: 'class'.
   • 18دعم العربية والاتجاه من اليمين إلى اليسارابنِ واجهات تعمل بالعربية والإنجليزية معًا: استخدم الأصناف المنطقية مثل ms- وpe- وstart- وtext-start التي تنقلب تلقائيًا، والبادئتين rtl: وltr: لما تبقى.
   • 19الانتقالات والحركاتامنح واجهتك حيوية بانتقالات سلسة بين الحالات عبر transition وduration-*، وبتحويلات مثل scale وrotate وtranslate، وحركات جاهزة مثل animate-spin وanimate-pulse، مع احترام تفضيلات تقليل الحركة.
5. 05

   الفصل 5

   بناء الواجهات

   • 20أنماط واجهات شائعةطبّق ما تعلمته لبناء أشهر مكوّنات الواجهات بـ Tailwind: الأزرار بأنواعها، والبطاقات، وشريط التنقل المتجاوب، ونماذج الإدخال.
   • 21تخصيص الثيمخصّص Tailwind ليطابق هوية مشروعك: أضف ألوانك وخطوطك ومسافاتك في theme.extend، وافهم الفرق بين التوسيع والاستبدال، واستخدم القيم الحرة مثل w-[37px] عند الحاجة.
   • 22التوجيهان @apply و@layerاجمع أصناف الأدوات المتكررة في صنف واحد بالتوجيه @apply، ونظّم تنسيقاتك المخصصة في طبقات Tailwind الثلاث بالتوجيه @layer، واعرف متى يفيد ذلك ومتى يضر.
   • 23أفضل الممارساتاكتب كود Tailwind نظيفًا يسهل صيانته: رتّب الأصناف، واستخرج المكوّنات بدلًا من التكرار، واكتب أسماء الأصناف كاملة، وتجنّب التعارض، واهتم بإمكانية الوصول والأداء.
   • 24مشروع: صفحة الأسعارابنِ صفحة أسعار احترافية ومتجاوبة خطوة بخطوة: عنوان القسم، ثم بطاقة الخطة، ثم شبكة كاملة بخطة مميزة وزر للتبديل بين الدفع الشهري والسنوي.