محول HTML/CSS إلى Tailwind

الصق HTML و CSS، وعاين الجزء المعروض، ثم صدّر Tailwind CSS نظيفًا إلى Tailwind Play أو إلى قاعدة الكود الخاصة بك.

لا توجد معاينة للمصدر

تظهر معاينة المصدر عندما يكون الإدخال صالحًا.

Tailwind v4

لا يوجد إخراج حتى الآن

يظهر مخرجات Tailwind التي تم إنشاؤها هنا تلقائيًا.

لا توجد معاينة Tailwind

تظهر معاينة Tailwind التي تم إنشاؤها هنا بعد التحويل.

محول Tailwind مثالي للبكسل

تحويل HTML و CSS إلى Tailwind CSS النظيف

يقرأ HTML و CSS معًا
يتم حل المحددات والفئات والأنماط المضمنة والقواعد المتداخلة مقابل العلامات الفعلية قبل إنشاء الأدوات المساعدة Tailwind.
يحتفظ بعلامات ذات معنى
تظل البنية الدلالية والسمات والنص والروابط وعناصر النموذج في HTML المُصدَّر بينما ينتقل التصميم إلى الأدوات المساعدة.
التحويل المدعوم بالمعاينة
تسهل المعاينات المصدرية والمولدة مقارنة الجزء الأصلي بمخرجات Tailwind.
تغطية العناصر المتداخلة
يتم تحويل العناصر الفرعية و SVG والأيقونات وأجزاء واجهة المستخدم المكونة مع سياق النمط المحيط.
مفيد لإعادة بناء المكونات
قم بترحيل أجزاء واجهة المستخدم المنسوخة والنماذج الأولية والمقتطفات الثابتة إلى مكونات Tailwind دون فقدان شكل HTML الأصلي.
إرسال إلى Tailwind Play
يمكن فتح Tailwind CSS الذي تم إنشاؤه مباشرة في Tailwind Play لإجراء تعديلات سريعة وتجارب ومشاركة.

دليل المحول HTML/CSS

تحويل HTML و CSS إلى Tailwind

محول HTML/CSS إلى Tailwind مصمم لأجزاء UI الملصقة، وأقسام صفحات الهبوط، والنماذج الأولية، والقوالب القديمة التي تتوزع فيها الأنماط بين المحددات والفئات والتصريحات المضمنة.

يعرض Tailfind الـ markup مع CSS الخاص به، ويقرأ النتيجة المحسوبة، ثم يصدّر HTML مناسبًا لـ Tailwind حتى تتمكن من نقل البنية نفسها إلى مشاريع Tailwind دون تحويل كل تصريح يدويًا.

استخدمه عندما تحتاج إلى تحويل سريع من HTML إلى Tailwind CSS، أو تسليم أنظف إلى Tailwind Play، أو نقطة بداية لإعادة بناء مكونات ثابتة في Angular أو React أو Vue أو Svelte أو HTML عادي.

هل يمكن لـ Tailfind تحويل HTML و CSS إلى Tailwind CSS؟
نعم. الصق جزء HTML و CSS الخاص به، وسيعرض Tailfind النتيجة قبل تصدير HTML عادي مع فئات Tailwind.
هل يحتفظ المحول بقيم CSS المخصصة؟
يفضل Tailfind فئات Tailwind الافتراضية عندما تتطابق القيم مع مقياس الإطار، ويستخدم قيم arbitrary واضحة للألوان والتباعد والظلال والأحجام المخصصة.
ما هو نوع HTML الذي يعمل بشكل أفضل؟
تعمل أجزاء واجهة المستخدم الصغيرة المستقلة بشكل أفضل، بما في ذلك البطاقات والنماذج والأقسام والنماذج الأولية والمقتطفات القديمة حيث يمكن لصق CSS ذي الصلة مع العلامة.

تخطي التحويل اليدوي

حوّل أي صفحة مباشرة إلى Tailwind CSS نظيف

Tailfind يجلب المحول إلى متصفحك، حتى تتمكن من التقاط واجهة مستخدم الإنتاج مباشرة من الصفحة التي تعرضها.

مزيد من المعلومات تحميل
لقطة شاشة للتطبيق