المفردات الأساسية

افتح تصميم واجهة قائمة وقِس الهوامش الداخلية لإطاراتها: 12 و16 و15 و20 و14 و24 بكسل. لم يقرر أحد اعتماد الرقم 15 ولا الرقم 14. ظهرا لأن نصًا ما كان يتجاوز حدوده ببكسلين ذات يوم، وأن padding: 15px حلّ المشكلة أسرع من التفكير في الشبكة. وحين تتراكم هذه الفروق، بكسل أو بكسلان، على مدى عامين من التصحيحات، تنتج واجهة يراها الجميع مختلة قليلًا دون أن يعرفوا السبب.

يجعل Tailwind هذا الانزلاق صعبًا، لأنه لا يقترح عليك طيفًا متصلًا من القيم بل سلّمًا محددًا. فـ p-3 تساوي 12 بكسل، وp-4 تساوي 16، ولا شيء بينهما. أول ما يخطر عند الحاجة إلى 15 بكسل هو البحث عن طريقة لفرض القيمة. أما الأسلم فهو اختيار 16: في 95% من الحالات لن يلاحظ أي مستخدم الفرق، وقد كسبتَ للتو واجهة متناسقة. يعرض هذا الدرس المفردات الأساسية، لكن موضوعه الحقيقي هو هذا: أن تعرف متى تبقى داخل السلّم ومتى تخرج منه.

المسافات

وحدة واحدة تحكم الشبكة كلها: 1 تساوي 0.25rem، أي 4 بكسل في الإعداد الافتراضي. اضرب في الرقم المكتوب في الصنف.