CSS → كلاسات Tailwind المساعدة
خصوصية بالتصميم — يعمل بالكامل في متصفحك
الصق تصاريح CSS في الجانب الأيسر، وانسخ كلاسات Tailwind المساعدة في الجانب الأيمن. يربط المحوّل المقاييس القياسية لـ spacing والألوان والطباعة والتخطيط بالكلاسات الأصلية، ويعود إلى صيغة الأقواس المعقوفة لأي قيمة لا يعرفها Tailwind محليًا.
الخصائص القابلة للربط
يستوعب المحوّل سطح CSS اليومي: مقياس spacing للحشو والهامش، أحجام الخطوط وثقلها، الألوان (نص وخلفية)، display، اتجاه ومحاذاة flex، border-radius، width وheight، position، gap. كل منها يهبط على اختصار Tailwind القانوني — p-4، text-lg، justify-between — فيقرأ الناتج وكأنه Tailwind مكتوب يدويًا.
لماذا تهم صيغة arbitrary
تعجّ المشاريع الحقيقية بقيم بلا اختصارات: حجم خط مخصص 13 بكسل، لون علامة تجارية بـ hex خاص، فجوة 1.7rem. عند مقابلتها يُخرج المحوّل صيغة Tailwind الحرة مثل text-[13px] أو bg-[#3b82f6]، ويظل الكلاس Tailwind صالحًا، ويتعامل معه JIT، ويعود إلى CSS عبر أداتنا العكسية بشكل نظيف.
متى يتجاوز التصريح كما هو
تُترك المحدِّدات المعقدة والحركات والتدرّجات وkeyframes بلا تحويل عمدًا، إذ تعيش في طبقات يغطيها Tailwind عبر الإضافات أو @apply، وأي تحويل تخميني سيكذب على الصحة. تظل هذه التصاريح حرفيًا داخل كلاسات [prop:value]، لكي تستعرضها لاحقًا دون فقد أي بيانات.
الأسئلة الشائعة
- ما خصائص CSS التي تُتعرَّف؟
- مقاييس spacing للحشو والهامش، ألوان النص والخلفية، display، محاذاة flex، أحجام الخطوط وثقلها، border-radius، width وheight، position وgap. ويُسقط ما تبقّى ضمن كلاس [prop:value] حر.
- ماذا لو كانت القيمة خارج المقياس الافتراضي؟
- يُخرج المحوّل صيغة حرة كـ p-[13px] أو bg-[#3b82f6]، يبنيها JIT، ويظل الكلاس Tailwind صالحًا دون أي تعديل يدوي.
- هل يتعامل مع متغيرات CSS المخصصة؟
- نعم. تُمرَّر القيم التي تحتوي var(--token) بين قوسين معقوفين، ويظل عليك تعريف الرمز في ثيمة tailwind.config أو في :root كخاصية مخصصة.
- هل التحويل بلا فقدان؟
- بالنسبة للأنماط الشائعة نعم. تبقى الحركات والتدرّجات والمحدِّدات الغريبة ككلاسات حرة، فتعيش لكنك قد ترغب بالاحتفاظ بـ CSS الأصلي.
- هل يمكن العودة عبر أداة Tailwind-to-CSS؟
- في الغالب نعم. ترجع كلاسات الـ utility البسيطة كما هي، وتنجو القيم الحرة، أما التصاريح غير المدعومة فتبقى حرة عند العودة.
- هل يُرفع أي شيء؟
- لا. تجري العملية كاملة في تبويب المتصفح، ولا يغادر محتوى ورقة الأنماط هذه الصفحة.