انتقل إلى المحتوى
Numio

تحويل CSS إلى فئات TailwindCSS — Numio

حوّل تصريحات CSS إلى أصناف أدوات Tailwind CSS، معروضة كقواعد @apply لكل محدد. استخدمه للبحث عن الأدوات المطابقة أثناء ترحيل الأنماط الحالية. يستهدف المحوّل Tailwind CSS v3.

إيجاد أدوات Tailwind المطابقة لقواعد CSS الحالية أثناء الترحيل.

CSS

TailwindCSS 3.x

متى تستخدمها

  • إيجاد أدوات Tailwind المطابقة لقواعد CSS الحالية أثناء الترحيل.
  • تعلّم أسماء أصناف Tailwind بتحويل CSS تعرفه مسبقًا.

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

  1. الصق قواعد CSS.
  2. عدّل قيمة rem الأساسية أو إعدادات Tailwind إذا كان مشروعك يستخدم إعدادات مخصصة.
  3. انسخ الأصناف الواردة بعد @apply إلى الترميز أو ورقة الأنماط، ثم تحقق من النتيجة في مشروع Tailwind الخاص بك.

إدخال CSS

.card { display: flex; padding: 1rem; }

مخرجات Tailwind (المقياس الافتراضي)

.card {
  @apply flex p-4;
}

التفاصيل والقيود

تتبع أسماء الأصناف والمقاييس Tailwind CSS v3. ولا يُضمن التوافق مع إعدادات Tailwind CSS v4 وصياغته.

قد لا تتحول القيم المخصصة والمحددات المعقدة والعناصر الزائفة. ولا يُضمن أن يبدو الناتج مطابقًا، لذا تحقق منه على الصفحة الفعلية.

يُقيَّم حقل الإعدادات المخصصة كـ JavaScript في متصفحك. لا تلصق إعدادات لا تثق بها.

FAQ

هل يدعم Tailwind CSS v4؟

يستخدم أسماء أصناف Tailwind CSS v3 ومقاييسه. تحتفظ أدوات كثيرة مثل flex وp-4 وtext-sm بأسمائها في v4، لكن v4 ينقل الإعدادات إلى CSS ويعيد تسمية بعض الأدوات، لذا تحقق من المخرجات في مشروعك على v4.

كيف أستخدم أسماء الأصناف بدلًا من @apply؟

انسخ القائمة الواردة بعد @apply إلى سمة class في العنصر، مثل class="flex p-4". يجمع شكل @apply الأصناف حسب المحدد الأصلي.

هل يمكنه تحويل أصناف Bootstrap إلى Tailwind؟

لا. فهو يحوّل تصريحات CSS، لا أسماء أصناف من إطار عمل آخر. الصق قواعد CSS التي يقوم عليها مكوّن Bootstrap لرؤية الأدوات المطابقة.

لماذا لا تتحول بعض التصريحات؟

قد لا تكون هناك أداة مباشرة للقيم الخارجة عن مقياس Tailwind والمحددات المعقدة والعناصر الزائفة. أبقِها في CSS أو أضفها إلى إعدادات Tailwind.