تحويل CSS إلى Tailwind

حوّل تصريحات CSS الشائعة إلى فئات Tailwind تساعدك على ترحيل مكوّن أو تنظيف نموذج أولي قبل النشر.

CSS المدخل

.card {
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
}

الناتج المحوّل

لا توجد نتائج بعد

ما الذي يساعدك على تحويله

حوّل padding وmargin وwidth وheight إلى فئات أقرب إلى نظام Tailwind.

استخرج القيم التي تحتاج مراجعة داخل theme أو كقيمة مخصصة عند عدم وجود بديل مباشر.

حوّل قواعد التخطيط الأساسية حتى تستطيع مقارنة المخرجات قبل دمجها في الصفحة.

displaypositionmarginpaddingwidthheightcolorbackgroundborder-radiusfont-sizeflexboxz-indexopacity

راجع الناتج يدويًا، فبعض القيم تحتاج theme مخصصًا أو فئة arbitrary value.

استخدمه عند تحويل مكوّن قديم أو نموذج HTML/CSS إلى مشروع يستخدم Tailwind.

نعم، خصوصًا عندما تريد تنظيف CSS سريعًا قبل رفع صفحة هبوط أو واجهة ثابتة.

راجع المدخلات والنتيجة يدويًا، ولا تستخدم أسرارًا أو بيانات شخصية في أدوات عامة أو صفحات منشورة.

لا. الأداة تعمل داخل المتصفح، ودورها تحويل CSS لا تشغيل التطبيق أو التحقق من سلوكه.