تايلوند CSS وshadcn والذكاء الاصطناعي في التطبيق العملي: الكود والأوامر التي تهم حقًا
CSS Tailwind shadcn IA: الأساسيات في مقال واحد — كود حقيقي، مخططات وخطوات ملموسة، مقتطفات من دورة تضم 46 درسًا.
لا نظرية طويلة مملة هنا: نفتح الطرفية ونمارس عمليًا. إليك الأساسيات من CSS Tailwind shadcn IA، مستخرجة مباشرة من دورة كاملة تضم 46 درسًا — مع كود حقيقي يمكنك نسخه ولصقه الآن.
- المقدمة والإعداد
- أساسيات CSS3 الفانيليا الصلبة
- إتقان Flexbox
- CSS Grid المتقدم
- الرسوم المتحركة والانتقالات في CSS
الإضافات: Typography وForms وAspect Ratio
@apply بحكمة.الأهداف التعليمية
- تثبيت وتسجيل إضافة رسمية
- تنسيق المحتوى الغني باستخدام الفئة
prose - توحيد النماذج باستخدام إضافة Forms
- الحفاظ على نسبة الصورة باستخدام
aspect-ratio - استخدام
@applyدون إعادة إنشاء CSS تقليدي
تثبيت الإضافات الرسمية
إعداد Tailwind باستخدام بناء حديث
content، والتأكد من أن محرك JIT يولّد الفئات فورًا.الأهداف التعليمية
- إنشاء مشروع Vite بسيط
- تثبيت Tailwind وتهيئته
- فهم توجيهات
@tailwind - تهيئة مفتاح
contentلفحص الفئات - معرفة سبب خفة ملف CSS النهائي (JIT)
الخطوة 1: إنشاء المشروع
Vite هو الـbundler الموصى به في 2025: سريع، بسيط، ومتوافق مع React وVue وHTML النقي. نبدأ بمشروع vanilla.
الخطوة 3: تهيئة فحص الملفات
يخبر مفتاح content Tailwind أين يبحث عن الفئات المستخدمة. إنه العنصر الأساسي: بدونه لن تُولَّد أي فئة.
الطباعة السائلة باستخدام clamp()
clamp() لإنشاء طباعة تكبر وتصغر بسلاسة مع حجم الشاشة، دون قفزات مفاجئة ودون تكثير استعلامات الوسائط.الأهداف التعليمية
- فهم المعاملات الثلاثة لـ
clamp() - الجمع بين rem ووحدات viewport (vw)
- إنشاء عنوان سائل بدون media query
- تطبيق
clamp()على خصائص أخرى (padding، gap) - استخدام النوع السائل في Tailwind
مشكلة النص المتدرج
بدون طباعة سائلة، نغيّر حجم النص عند كل نقطة توقف: 24px على الجوال، 32px على التابلت، 48px على سطح المكتب. يقفز النص فجأة عند كل عتبة، وبين نقطتي توقف غالبًا ما يكون صغيرًا جدًا أو كبيرًا جدًا. الطباعة السائلة تلغي هذه القفزات: ينمو النص باستمرار.
الدالة clamp()
clamp() تأخذ ثلاث قيم: الحد الأدنى، القيمة المفضلة (غالبًا مرتبطة بـviewport)، والحد الأقصى. يحتفظ المتصفح بالقيمة المفضلة طالما بقيت ضمن الحدود.
العرض السائل
النوع السائل في Tailwind
يقبل Tailwind القيم الاعتباطية بين قوسين، مما يجعل clamp() قابلًا للاستخدام مباشرة.
تغطي هذه المقالة المقتطفات الأكثر فائدة — الدورة الكاملة CSS Tailwind shadcn IA (11 فصول، 46 درسًا، تمارين مصححة ومشروع نهائي) تأخذك حتى النهاية.
./acceder-au-cours-complet cours gratuit : Vibe Codingالأسئلة الشائعة
كم من الوقت يلزم لتعلم CSS Tailwind shadcn IA؟
هل هناك متطلبات سابقة؟
من أين نبدأ عمليًا؟
📬 هل تريد تلقي هذا النوع من الأدلة كل أسبوع؟ اشترك مجانًا — كود حقيقي، بدون كلام زائد.