محوّل Tailwind إلى CSS

حول هذه الأداة

توسّع الأداة أصناف Tailwind الشائعة إلى كتلة من قواعد CSS. أما الصيغ مثل hover: أو md: فتظهر في الملاحظات فقط، لأنها تحتاج محدّدًا مستقلًا أو استعلام وسائط.

طريقة الاستخدام

انسخ الأصناف من أحد المكوّنات، ثم شغّل التحويل وانقل التصريحات إلى ملف الأنماط أو قارنها برموز التصميم لديك. تبقى الأصناف غير المعروفة مذكورة في الملاحظات.

مثال

المثال الجاهز يجمع أصنافًا معتادة للتخطيط والمسافات.

إدخال

flex items-center gap-4 p-6 rounded-lg bg-white shadow-lg text-gray-900 font-semibold

مخرجات

.element {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.5rem;
  /* …mapped declarations… */
}

نصيحة

مفيدة لفهم CSS الكامن خلف كل صنف، خاصة إذا كان المشروع يحتفظ بطبقة CSS بجانب Tailwind.

معلومات مفيدة