الأدلة

• CSS مقابل Tailwind — يتفوق CSS التقليدي في المحددات المعقدة والرسوم. يتفوق Tailwind بوضع القرارات البصرية مع الـ markup. معظم الفرق تستخدم الاثنين.
• من تباعد CSS إلى Tailwind — padding: 1.5rem يصبح p-6. الاختصارات تتوسع لأدوات الجوانب. خارج المقياس: p-[13px].
• من تنسيق النصوص في CSS إلى Tailwind — font-size: 1.5rem → text-2xl. font-weight: 700 → font-bold. اللون عبر text-*.
• من CSS Flexbox إلى Tailwind — display:flex → flex. flex-direction:column → flex-col. justify-content:space-between → justify-between. gap:1rem → gap-4.
• من CSS Grid إلى Tailwind — grid-template-columns: repeat(3, 1fr) → grid-cols-3. المسارات المخصصة بقيم اختيارية.
• من ألوان CSS إلى Tailwind — قيم hex المعروفة → text-gray-900. المجهولة → bg-[#1a2b3c].
• من حدود CSS إلى Tailwind — border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.
• من CSS المتجاوب إلى Tailwind — @media (min-width: 768px) → md:. 1024px → lg:. الاستعلامات المعقدة تحتاج مراجعة.
• من ظلال CSS إلى Tailwind — الظلال الشائعة → shadow / shadow-lg. الفريدة → قيم اختيارية.
• من تموضع العناصر في CSS إلى Tailwind — position:absolute → absolute. الجوانب → top/right/bottom/left. z-index مخصص → اختياري.
• استراتيجيات ترحيل CSS — فضّل الترحيل التدريجي: مكوّنات جديدة بـ Tailwind ثم المسارات الحارة مع الإبقاء على CSS القديم حتى الاستبدال.

فتح المحوّل