ما هو Tailwind CSS؟

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

وصف الأداة

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

أمثلة

Input (CSS):

.button {
  display: flex;
  padding: 16px;
  background-color: #3b82f6;
  color: white;
  border-radius: 8px;
}

Output (Tailwind):

.button
flex p-4 bg-blue-500 text-white rounded-lg

Input (CSS):

.container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

Output (Tailwind):

.container
max-w-7xl mx-auto text-center

الميزات

  • تحويل أحادي الاتجاه من CSS إلى Tailwind
  • التحقق التلقائي من صحة الصياغة
  • الحفاظ على أسماء المحددات في الناتج
  • معالجة قواعد CSS متعددة في آن واحد
  • دعم خصائص وقيم CSS الشائعة

حالات الاستخدام

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