يقوم خيار "النسخ كـ Tailwind" بجسر الفجوة بين التصميم المرئي وكود Tailwind CSS. انقر على أي عنصر في صفحة الويب واحصل فورًا على فئات خدمات Tailwind المكافئة المُنشأة من أنماط CSS المحسوبة الخاصة به — جاهزة للصق في قالب JSX أو Vue أو ملف HTML الخاص بك.
عندما تقوم بالبناء باستخدام Tailwind CSS، فإنك تفكر في فئات utility بدلاً من كتابة CSS مخصص. ولكن عندما تشير إلى تصميم تم إنشاؤه مسبقًا — سواء كانت صفحة هبوط لأحد المنافسين، أو نظام تصميم تم إنشاؤه باستخدام vanilla CSS، أو موقع الويب الحالي لأحد العملاء — فإن ترجمة الأنماط المرئية إلى فئات Tailwind يدويًا أمر ممل وعرضة للخطأ. أداة "النسخ كـ Tailwind" تقوم بأتمتة ذلك بالكامل. فهي تقرأ الأنماط المحسوبة في المتصفح لأي عنصر وتربط كل خاصية بأقرب فئة Tailwind تعادلها باستخدام المقياس الافتراضي. تتم مطابقة الألوان مع أقرب لون في لوحة Tailwind، وتنطبق قيم التباعد على أقرب فئة مستندة إلى rem، ويتم تعيين الطباعة لفئات text-* وfont-*. المخرجات عبارة عن سلسلة نصية واحدة وواضحة يمكنك لصقها مباشرة في المكون الخاص بك.
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
انقر على أي عنصر وقم بتحليل CSS المحسوبة الخاصة به في الوقت الفعلي. يتم تعيين كل خاصية قابلة للتطبيق للفئة المماثلة في Tailwind — من bg-purple-600 إلى rounded-lg إلى font-semibold. يحدث التحويل على الفور بدون تأخير في التحميل أو المعالجة.
الأداة لا تقتصر على استبدال السلاسل النصية وحسب — فهي تفهم نظام التصميم الخاص بـ Tailwind. حيث يتم تعيين الحجم 12 بكسل للمسافة الداخلية (padding) كـ p-3 (وليس كقيمة مخصصة)، وتتطابق الألوان مع أقرب درجة من ألوان Tailwind (مثل #7c3aed الذي يصبح purple-600)، ويتم تعيين مقاسات الخط كـ text-sm، text-base، text-lg وهكذا.
يتم عرض فئة Tailwind المُنشأة في لوحة مخرجات أنيقة. انقر على زر النسخ مرة واحدة وسيكون النص الكامل في الحافظة الخاصة بك — جاهزًا للصق كـ className="..." في React أو class="..." في HTML أو :class="..." في Vue.
لعمل أسرع، انقر بزر الماوس الأيمن على أي عنصر في الصفحة للوصول إلى "النسخ كـ Tailwind" مباشرة من قائمة سياق المتصفح. لا توجد حاجة لفتح لوحة DevSuite — فقط انقر بزر الماوس الأيمن، واضغط على الخيار، وستجد الفئات في الحافظة.
الأداة تتجاوز التعيينات البسيطة. فهي تتعامل مع ظلال الصناديق (shadow-md، shadow-lg)، التدرجات، أنماط الحدود، فئات تخطيط Flex/Grid، قيم الشفافية، وحتى الخصائص سريعة الاستجابة كـ max-width ونسب العرض إلى الارتفاع.
تتضمن الفئات التي تختلف عن إعدادات المتصفح الافتراضية فقط — بدون فئات لخدمات زائدة عن الحاجة. المخرجات موجزة وجاهزة للاستخدام في الإنتاج، وغير مزدحمة بفئات موروثة أو قيم افتراضية.
النسخ كـ Tailwind covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorهل تعيد بناء موقع ويب من Vanilla CSS أو Bootstrap إلى Tailwind؟ انقر على كل مكون رئيسي في الموقع الحالي، وانسخ فئات Tailwind الخاصة به، واستخدمها كنقطة انطلاق لمكوناتك الجديدة في Tailwind. هذا يوفر ساعات من الترجمة اليدوية.
هل وجدت بطاقة مصممة بشكل جميل، أو قسم بطل للصفحة (hero section)، أو شريط تنقل في موقع ويب آخر؟ انقر عليها، واحصل على فئات Tailwind واستخدمها كمرجع لإنشاء نسختك الخاصة بحيث لم تعد مضطراً لتفحص العشرات من خصائص CSS بنفسك.
عند إنشاء مكونات جديدة لـ Tailwind من نموذج Figma أو PSD مبدئي، قم بتطبيق التصميم في المتصفح أولاً باستخدام DevTools، ثم انقر على العنصر باستخدام "النسخ كـ Tailwind" للحصول على الفئات الصحيحة بدلًا من كتابتها يدويًا.
تحقق من أن القيم المُدخلة من قِبَل المُستخدم في الـ CSS تتطابق فعليًا مع قيم المقياس الافتراضية الصحيحة في Tailwind. فإذا قمت بكتابة مسافة حشو: 14 بكسل على سبيل المثال، فسوف تخبرك الأداة ما إذا كان سيتم تعيينها כـ p-3 (12 بكسل) أو كـ p-3.5 (14 بكسل) — لاكتشاف التناقضات قبل حدوثها.
لست معتادًا على Tailwind؟ انقر على أي عنصر في صفحة الويب لتشاهد كيف يتم ترجمة خصائص الـ CSS التقليدية إلى فئات utility، وتُعد هذه طريقة تعليمية تفاعلية لفهم نظام تسمية الفئات عبر أمثلة عملية من الحياة الواقعية.
افتح لوحة DevSuite Pro العائمة وانقر على أيقونة "النسخ كـ Tailwind". تعمل الأداة ويتغير مؤشرك إلى شكل التقاطع، للإشارة إلى أنه بإمكانك الآن الضغط على العناصر.
انقر على أي عنصر في الصفحة — زر، بطاقة، عنوان، أو شريط تنقل. يتم تمييز العنصر وتحليل CSS المحسوبة الخاصة به. ثم تظهر لوحة عائمة تُظهر سلسلة نصية بفئة Tailwind المنشأة.
تُظهر اللوحة سلسلة نصية فئة Tailwind كاملة مقسمة إلى مجموعات منطقية. يمكنك أن ترى بدقة أي خاصية CSS تم تعيينها لأي نوع من فئات Tailwind. قم بالتمرير فوق أي فئة لرؤية قيمة CSS الأساسية التي تمثلها.
انقر على مفتاح "نسخ" لأخذ السلسلة النصية للفئة بالكامل. قم بلصقها بشكل مباشر على الـ className التابع للمُكوِن الخاص بك، أو أسلوب class، أو القالب الخاص بك. ستعمل الفئات بشكل فوري مع إعدادات Tailwind القياسية.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.