مُحول فئات Tailwind CSS إلى CSS بسيط

مُحول فئات Tailwind CSS إلى CSS بسيط

لصق سلسلة من مُتَّسِعات تَوِيلنْد v3 واحصل فورًا على القاعدة المُتَّسِعات البسيطة المُقابلة. يتم توسعة كل مُتَّسِع تَوِيلنْد إلى إعلان CSS الدقيق مع القيم الصحيحة لـ rem، px، والألوان من مُتَوَّجات التصميم الرسمية — لا تَخَيَّل، لا تُحَوَّل.

مفيد عند نقل مُكوِّن تَوِيلنْد إلى CSS بسيط، عند رغبتك في مراجعة الإعلانات الأساسية، أو عند الحاجة إلى نقل CSS يدوياً دون خطوة تَوِيلنْد.

كيفية استخدام

1. لصق سلسلة مُتَّسِعات تَوِيلنْد في مربع الإدخال (مثلاً flex items-center gap-4 p-6 bg-blue-500).
2. بديلًا، تغيير المُختَرِع — الافتراض هو .element.
3. اقرأ القاعدة المُتَّسِعات المُولَّدة في لوحة الإخراج. المُتَّسِعات المُتجاوبة (md:, lg:…) تُحَوَّل إلى مُتَّسِعات مُطابقة @media استفسارات؛ المُتَّسِعات المُتَحَوِّلة (hover:, focus:…) تُنتج مُختَرِعات خاصة بها.
4. نسخ النتيجة أو تنزيلها كـ .css ملف.

خصائص

• مقياس التَّبَسُّط الكامل – كل قيمة تَوِيلنْد للمسافة، التَّبَسُّط، الفجوة، العرض، والارتفاع تُحوَّل إلى الإخراج الدقيق للـ rem أو px.
• مُتَوَّج الألوان الكامل – جميع 22 عائلة لون مع ألوان 50-950 تُحوَّل إلى أكواد الـ hex الدقيقة للنص، الخلفية، الحدود، التعبئة، والرسم.
• المُتَّسِعات المُتجاوبة 0–9 (top row) sm:, md:, lg:, xl:و، و 2xl: تُحوَّل إلى مُتَّسِعات صحيحة @media (min-width: ...) مُتَّسِعات.
• المُتَّسِعات المُتَحَوِّلة 0–9 (top row) hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, before:, after: وغيرها تصبح مُتَّسِعات CSS أو استفسارات مُتَّسِعات.
• القيم المُتَّسِعات – نظام التَّسَمِّي المُتَّسِع مثل w-[37rem] أو bg-[#abc123] يُحوَّل إلى الإعلان المُقابل.
• المُتَّسِعات السالبة – أشكال البداية بـ خط مُتَّسِع مثل -mt-4 تُنتج القيم السالبة للـ rem بشكل صحيح.
• المُختَرِع المُخصِّص – اختر أي مُختَرِع للفصل حول القاعدة المُولَّدة (.card, #hero، إلخ).
• نسخ وتنزيل – نقرة واحدة لنسخ CSS أو حفظه كملف.