Softonic

من CSS إلى Tailwind

خطوة 1 / 2
تحويل إلى Tailwind

يُعد نقل ورقة أنماط قديمة إلى Tailwind قاعدةً تلو الأخرى أمرًا مُرهقًا. يأخذ هذا المحول كتلة من CSS العادي، سواء بمحددات وأقواس معقوفة أو بدونها، ويعيد كتابة كل تعريف كفئة مساعدة في Tailwind. تُربَط الأزواج المعروفة بفئات مساعدة مسماة مثل flex أو items-center أو rounded-lg، وأي شيء آخر يعود إلى صيغة القيم العشوائية في Tailwind وهي [property:value]، بحيث لا يُحذف أي شيء بصمت.

كيف يعالج المحول ملف CSS الخاص بك

  1. 1

    الصق ملف CSS

    الصق قاعدة كاملة مثل `.card { padding: 16px; border-radius: 8px; }` أو التعريفات الموجودة داخل الأقواس المعقوفة فقط.

  2. 2

    المحلل يزيل التعليقات

    تُزال التعليقات الكتلية `/* ... */` قبل تقسيم التعريفات عند الفواصل المنقوطة.

  3. 3

    يُربَط كل تعريف

    تُربَط الخصائص الشائعة بفئات Tailwind المساعدة الحقيقية (التباعد، ونصف القطر، وحجم الخط، وflex، والعرض، ومحاذاة النص)؛ أما غير المعروفة فتعود إلى `[prop:value]`.

  4. 4

    انسخ وطبّق

    الصق قائمة الفئات في السمة `class` الخاصة بعنصر HTML المطابق.

ما الذي يُربَط بالفئات المساعدة المسماة

لا يمكن للسمة الافتراضية في Tailwind أن تغطي كل قيمة CSS ممكنة، لذا يعطي المحول الأولوية للقيم التي توجد لها فئة مساعدة مسماة، ويستخدم القيم العشوائية في كل مكان آخر.

الروابط المباشرة

تعريف CSS فئة Tailwind المساعدة
display: flex flex
display: grid grid
display: none hidden
justify-content: center justify-center
align-items: center items-center
text-align: center text-center
font-weight: bold font-bold
cursor: pointer cursor-pointer
overflow: hidden overflow-hidden

الروابط المراعية للمقياس

تُقسَّم قيم padding وmargin والعرض والارتفاع والأبعاد الدنيا/القصوى كلها على 4 لإنتاج خطوة تباعد في Tailwind، فيصبح padding: 16px هو p-4، ويصبح width: 32px هو w-8. أما القيم التي لا تقع على خطوة نظيفة فتعود إلى قيم عشوائية على الفئة المساعدة المطابقة، فمثلًا يصبح width: 37px هو w-[37px].

يُربَط border-radius بأقرب فئة مساعدة مسماة (rounded-sm وrounded-md وrounded-lg وrounded-xl وrounded-2xl). وتصبح الأحجام التي تتجاوز 16px هي rounded-full، وهو أمر مفيد للعناصر ذات الشكل الكبسولي (pill) لكنه غير صحيح لأنصاف الأقطار الكبيرة على نحو غير معتاد، افحص المخرجات قبل النشر.

يُصنَّف font-size ضمن نطاق من text-xs إلى text-3xl وفق عتبات البكسل.

أمور يجب الانتباه لها

  • لا تُترجَم الفئات الزائفة واستعلامات الوسائط والمحددات؛ بل تُترجَم التعريفات الموجودة داخل الأقواس المعقوفة فقط. وستظل بحاجة إلى إضافة متغيرات مثل hover: أو md: بنفسك.
  • تؤول الألوان إلى قيم عشوائية مثل text-[#1f2937] لأن المحول لا يعرف لوحة ألوان سمة Tailwind الخاصة بك. استبدلها يدويًا بـ text-gray-800 أو رمزًا مخصصًا.
  • الخصائص المختصرة التي نادرًا ما تستخدمها (border وbackground وtransition) تُخرَج حرفيًا بصيغة [property:value]، تحقق منها قبل النشر.

الأسئلة الشائعة

تستخدم المخرجات أسماء فئات مساعدة مستقرة في كل من Tailwind v3 وv4. كما أن القيم العشوائية بين الأقواس المربعة صالحة في كليهما. وقد ترغب بعد اللصق في إعادة ترميز الألوان إلى لوحة @theme في الإصدار v4.

لا يستطيع المحول رؤية مقياس الألوان في ملف tailwind.config.js الخاص بك، لذا يُخرِج اللون كقيمة عشوائية على الفئة المساعدة المطابقة (text-[#1f2937]). اربطه يدويًا بأقرب رمز في اللوحة، مثل text-gray-800 أو رمز علامة تجارية عرّفته بنفسك.

نعم، الصق عدة قواعد. ستُخرِج الأداة قائمة فئات واحدة لكل محدد، مفصولة بتعليق /* selector */ حتى تتمكن من مطابقتها مع HTML المقابل.

يُرسَل ملف CSS إلى خادمنا ليقوم المحول بتحويله إلى فئات Tailwind. لا يُخزَّن ولا يظهر في رابط الصفحة.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

عدّاد FPS

قِس معدل الإطارات FPS في المتصفح عبر requestAnimationFrame: تنعيم، وأدنى وأقصى معدل إطارات، وحد تنبيه، ورسم بياني اختياري. يعمل محليًا بلا رفع ملفات وبلا API.

منسق JSON

الصق JSON لتنسيقه بمسافتين أو أربع مسافات، أو تصغيره إلى ناتج مضغوط، أو فحص بنيته بسرعة قبل نسخ النتيجة.

مولد لوحة الألوان

أنشئ لوحات ألوان أحادية أو متجاورة أو مكملة أو ثلاثية أو رباعية من لون HEX أساسي، ثم صدّر متغيرات CSS جاهزة للنسخ.

الأداة متاحة بلغات أخرى