من حدود CSS إلى Tailwind

border: 1px solid → border + border-color. border-radius: 0.5rem → rounded-lg.

يتوزع الحد في Tailwind على جزأين: الأداة border تحدد السماكة، وأداة أخرى تحدد اللون. أما الاستدارة فمباشرة، إذ يقابل border-radius: 0.5rem الصنف rounded-lg. النقطة الحساسة هي حالة التركيز، لأن حلقات Tailwind تحل محل الحد الافتراضي، وفقدان هذا المؤشر يضر بإمكانية الوصول.

العرض والنمط واللون

border: 1px solid #e5e7eb غالبًا border border-gray-200. افصل الجوانب إن لم يكن CSS منتظمًا.

الأقطار

0.5rem → rounded-lg. أقطار علامة نادرة → rounded-[…].

مخطط التركيز

بعد التحويل راجع focus-visible: كثير من انحدارات a11y تعيش على حد التركيز.

جرّب

فتح المحوّل

.example { display: flex; gap: 1rem; padding: 1rem; }

ملاحظة ثقة: تحقق بصريًا من النتيجة. المحوّل مسودة مساعدة للمطوّرين.