لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

محول CSS إلى Tailwind CSS

مطورنص

إعلان · حذف؟

مدخل

عملية تلقائية

انتاج

جانب العميل

إعلان · حذف؟

مرشد

محول CSS إلى Tailwind CSS

يقوم محوّل CSS إلى Tailwind CSS بتحويل إعلانات CSS العادية الخاصة بك فورًا إلى فئات Tailwind المساعدة. الصق أي كود CSS واحصل على فئات Tailwind المكافئة المعينة تلقائيًا - لا تخمين، ولا حفظ أسماء الفئات. يتعامل المحوّل مع التباعد، والطباعة، والألوان، والتخطيط، و flexbox، و grid، والحدود، والظلال، والانتقالات، والمزيد.

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

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

خصائص

تحويل في الوقت الفعلي – يتم تحليل CSS وتحويله إلى فئات Tailwind أثناء الكتابة
دعم شامل للخصائص – يتعامل مع الهامش، والحشو، والعرض، والارتفاع، وحجم الخط، ووزن الخط، واللون، والخلفية، والحدود، ونصف قطر الحدود، والعرض، والمرونة، والشبكة، والموضع، ومحاذاة النص، والعتامة، وظل المربع، والانتقالات، وغير ذلك الكثير
توسيع الاختصارات – يتعامل بشكل صحيح مع الاختصارات متعددة القيم مثل margin: 0 auto تتحول إلى mx-auto my-0
مطابقة رموز التصميم – يقرب قيم البكسل و rem إلى مقياس رموز تصميم Tailwind (على سبيل المثال، 16px تصبح text-base)
التعرف على الألوان – يعين قيم الألوان الشائعة في CSS إلى لوحة ألوان Tailwind
تحذيرات الخصائص غير المطابقة – يضع علامة واضحة على خصائص CSS التي ليس لها مكافئ مباشر في Tailwind
نسخ بنقرة واحدة – انسخ جميع فئات Tailwind التي تم إنشاؤها إلى الحافظة الخاصة بك على الفور
العملية فقط من جانب العميل – تتم جميع عمليات التحويل في متصفحك دون الحاجة إلى رحلة ذهاب وعودة إلى الخادم

إعلان · حذف؟

 التعليمات

ما هو Tailwind CSS وكيف يختلف عن CSS التقليدي؟

Tailwind CSS هو إطار عمل CSS يركز على الأدوات المساعدة (utility-first) ويوفر فئات جاهزة للاستخدام أحادية الغرض مثل p-4 و text-center و bg-blue-500. بدلاً من كتابة قواعد CSS مخصصة في ورقة أنماط منفصلة، يمكنك تجميع التصميمات عن طريق تطبيق فئات الأدوات المساعدة مباشرة في HTML الخاص بك. يقلل هذا النهج من تبديل السياق بين الملفات وينتج تصميمات أكثر اتساقًا وقابلية للصيانة مقارنة بكتابة CSS المخصص.
هل يمكن تحويل جميع خصائص CSS إلى فئات Tailwind المساعدة؟

لا يوجد لكل خاصية CSS ما يعادلها بنسبة 1:1 في Tailwind. يغطي Tailwind الخصائص الأكثر استخدامًا - مثل التباعد، والطباعة، والألوان، والتخطيط، و flexbox، و grid، والحدود، والتأثيرات. قد لا تحتوي بعض الخصائص المتقدمة أو المتخصصة مثل clip-path أو mask أو الرسوم المتحركة المعقدة على فئات مساعدة مباشرة وتتطلب CSS مخصصًا أو مكونات إضافية لـ Tailwind.
كيف يتعامل Tailwind مع التصميم المتجاوب مقارنة باستعلامات الوسائط في CSS؟

يستخدم Tailwind بادئات متجاوبة مثل sm: و md: و lg: و xl: والتي تتوافق مع نقاط التوقف المتوافقة مع الجوّال أولاً. بدلاً من كتابة استعلامات @media في ورقة أنماط، يمكنك إضافة هذه البادئات مباشرة إلى فئات الأدوات المساعدة (مثل md:flex تعني display: flex عند نقطة التوقف المتوسطة وما فوق). هذا النهج يحافظ على منطق التصميم المتجاوب متجاورًا مع العنصر الذي يؤثر عليه.
ما هو نهج الأدوات المساعدة أولاً ولماذا يحظى بشعبية؟

نهج الأدوات المساعدة أولاً يعني بناء الواجهات عن طريق الجمع بين فئات CSS صغيرة أحادية الغرض بدلاً من كتابة أسماء فئات دلالية بأنماط مخصصة. وهو شائع لأنه يلغي إرهاق التسمية، ويقلل من CSS غير المستخدم في الإنتاج (مع التنقية)، ويجعل إعادة الهيكلة أكثر أمانًا نظرًا لأن الأنماط مقيدة بالعنصر، ويوفر نظام تصميم متسقًا من خلال رموز تصميم مقيدة.