الصق كتلة تصريحات CSS وحوّل العينة المعروضة إلى فئات Tailwind يمكنك نسخها إلى المكونات.

CSS
Tailwind v4

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

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

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

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

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

دليل محول CSS

حوّل تصريحات CSS إلى فئات Tailwind

يحوّل محول CSS إلى Tailwind كتلة التصريحات إلى أقرب فئات Tailwind قابلة للنقل. يفيد ذلك مع design tokens لمرة واحدة، وتنظيف الأنماط المضمنة، ونقل مقتطفات CSS الصغيرة إلى ترميز المكونات.

يطبق Tailfind التصريحات على عنصر عينة قبل التحويل، لذلك تُفسَّر قيم التخطيط والتباعد واللون والحدود والظل والطباعة والحجم عبر مسار العرض نفسه في المتصفح الذي يستخدمه الامتداد.

استخدمه لتحويل خصائص CSS إلى فئات Tailwind، ومعرفة القيم التي تطابق المقياس الافتراضي في Tailwind، وإبقاء القيم المخصصة واضحة كفئات عشوائية.

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

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

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

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

لقطة شاشة للتطبيق