أفضل الممارسات والأنماط الشائعة في Tailwind

أفضل الممارسات والأنماط الشائعة في Tailwind

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

اتفاقيات ترتيب الفئات

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

<!-- التخطيط ← نموذج الصندوق ← الطباعة ← المرئيات ← التفاعلية ← الاستجابة -->
<button class="
  flex items-center justify-center
  w-full px-6 py-3 mt-4
  text-lg font-semibold text-white
  bg-blue-600 rounded-lg shadow-md
  hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500
  sm:w-auto md:px-8 md:py-4
">
  انقر هنا
</button>

<!-- سيء: الترتيب العشوائي يجعل الفحص صعبًا -->
<button class="
  hover:bg-blue-700 text-white flex w-full md:px-8
  bg-blue-600 items-center px-6 focus:ring-2
  rounded-lg py-3 font-semibold sm:w-auto
">
  انقر هنا
</button>

تنظيم قوائم الفئات الطويلة

عندما يكون للمكونات العديد من فئات الأدوات، نظمها لتحسين القراءة.

<!-- قسّم قوائم الفئات الطويلة إلى مجموعات منطقية -->
<div class="
  relative flex flex-col
  w-full max-w-md mx-auto
  p-6 space-y-4
  bg-white rounded-xl shadow-lg
  border border-gray-200
  hover:shadow-xl hover:border-gray-300
  transition-all duration-300
  sm:max-w-lg md:max-w-xl
  dark:bg-gray-800 dark:border-gray-700
">
  <!-- محتوى البطاقة -->
</div>

npm install -D prettier prettier-plugin-tailwindcss

أنماط المكونات

تظهر بعض الأنماط بشكل متكرر في تطوير الويب. فيما يلي أنماط Tailwind الشائعة لاستخدامها كنقاط انطلاق.

<!-- حاوية قياسية مع عرض أقصى وحشوة أفقية -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
  <!-- المحتوى -->
</div>

<!-- قسم كامل العرض مع محتوى مقيد -->
<section class="w-full bg-gray-100">
  <div class="max-w-7xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
    <!-- المحتوى المقيد -->
  </div>
</section>

<!-- مكون بطاقة قياسي -->
<article class="
  bg-white rounded-lg shadow-md
  overflow-hidden
  hover:shadow-lg
  transition-shadow duration-300
">
  <img
    src="image.jpg"
    alt="صورة البطاقة"
    class="w-full h-48 object-cover"
  >
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">
      عنوان البطاقة
    </h3>
    <p class="text-gray-600 mb-4">
      وصف البطاقة يذهب هنا...
    </p>
    <button class="
      inline-flex items-center
      px-4 py-2
      bg-blue-600 text-white
      rounded-md
      hover:bg-blue-700
      transition-colors
    ">
      اعرف المزيد
    </button>
  </div>
</article>

<!-- استخدام space-y للإيقاع العمودي المتسق -->
<div class="space-y-4">
  <div class="p-4 bg-white rounded">العنصر 1</div>
  <div class="p-4 bg-white rounded">العنصر 2</div>
  <div class="p-4 bg-white rounded">العنصر 3</div>
</div>

<!-- مكدسات مستجيبة -->
<div class="space-y-4 md:space-y-6 lg:space-y-8">
  <!-- تزداد المسافات على الشاشات الأكبر -->
</div>

<!-- مكدس أفقي مع فجوة -->
<div class="flex gap-4">
  <div class="p-4 bg-white rounded">العنصر 1</div>
  <div class="p-4 bg-white rounded">العنصر 2</div>
  <div class="p-4 bg-white rounded">العنصر 3</div>
</div>

<!-- زر أساسي -->
<button class="
  px-4 py-2
  bg-blue-600 text-white
  font-medium rounded-md
  hover:bg-blue-700
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  disabled:opacity-50 disabled:cursor-not-allowed
  transition-colors
">
  زر أساسي
</button>

<!-- زر ثانوي -->
<button class="
  px-4 py-2
  bg-gray-200 text-gray-900
  font-medium rounded-md
  hover:bg-gray-300
  focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2
  transition-colors
">
  زر ثانوي
</button>

<!-- زر محدد -->
<button class="
  px-4 py-2
  border-2 border-blue-600
  text-blue-600
  font-medium rounded-md
  hover:bg-blue-50
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  transition-colors
">
  زر محدد
</button>

<!-- زر شبح -->
<button class="
  px-4 py-2
  text-blue-600
  font-medium rounded-md
  hover:bg-blue-50
  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
  transition-colors
">
  زر شبح
</button>

اتساق المسافات

استخدم مقياس المسافات في Tailwind بشكل متسق لإنشاء إيقاع وانسجام بصري.

<!-- قسم البطل مع مسافات متسقة -->
<section class="py-16 px-4 sm:py-24 sm:px-6 lg:py-32">
  <div class="max-w-7xl mx-auto">
    <div class="text-center space-y-6">
      <h1 class="text-4xl font-bold sm:text-5xl lg:text-6xl">
        العنوان الرئيسي
      </h1>
      <p class="text-xl text-gray-600 max-w-2xl mx-auto">
        نص العنوان الفرعي مع مسافات متسقة
      </p>
      <div class="flex gap-4 justify-center mt-8">
        <button class="px-6 py-3">زر 1</button>
        <button class="px-6 py-3">زر 2</button>
      </div>
    </div>
  </div>
</section>

تجنب الأخطاء الشائعة

<!-- سيء: الكثير من القيم التعسفية -->
<div class="w-[347px] h-[219px] p-[23px] text-[17.5px]">
  المحتوى
</div>

<!-- جيد: استخدم قيم نظام التصميم -->
<div class="w-80 h-56 p-6 text-lg">
  المحتوى
</div>

<!-- إذا كنت بحاجة إلى قيم مخصصة بشكل متكرر، وسّع التكوين -->
<!-- tailwind.config.js -->
module.exports = {
  theme: {
    extend: {
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
      }
    }
  }
}

<!-- سيء: تكرار قوائم الفئات الطويلة -->
<button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
  زر 1
</button>
<button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
  زر 2
</button>
<button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
  زر 3
</button>

<!-- جيد: استخرج إلى مكون -->
<!-- Button.vue / Button.jsx -->
<button class="btn-primary">
  {{ text }}
</button>

<!-- أو استخدم @apply في CSS -->
<style>
.btn-primary {
  @apply px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg;
  @apply hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500;
}
</style>

Tailwind مع SASS (متى ولماذا)

بينما تم تصميم Tailwind لتقليل الحاجة إلى CSS مخصص، في بعض الأحيان يمكن أن يكون دمجه مع SASS مفيدًا.

// styles.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

// متغيرات SASS للتخصيص
$primary-color: #3b82f6;
$secondary-color: #8b5cf6;
$spacing-unit: 0.25rem;

// إنشاء مكونات مخصصة مع @apply
.card {
  @apply rounded-lg shadow-md overflow-hidden;

  &-header {
    @apply p-6 border-b border-gray-200;
    background-color: lighten($primary-color, 45%);
  }

  &-body {
    @apply p-6;
  }

  &-footer {
    @apply p-6 bg-gray-50 border-t border-gray-200;
  }
}

// حسابات المسافات المعقدة
.dynamic-spacing {
  padding: calc($spacing-unit * 6);

  @media (min-width: 768px) {
    padding: calc($spacing-unit * 8);
  }
}

// خلطات الموضوع
@mixin theme-button($color) {
  @apply px-4 py-2 rounded font-semibold transition-colors;
  background-color: $color;

  &:hover {
    background-color: darken($color, 10%);
  }
}

.btn-primary {
  @include theme-button($primary-color);
  @apply text-white;
}

.btn-secondary {
  @include theme-button($secondary-color);
  @apply text-white;
}

نصائح عقلية الأدوات أولاً

تبني نهج الأدوات أولاً يتطلب ممارسة. فيما يلي نصائح لمساعدتك على التفكير بالأدوات.

<!-- المشكلة: إنشاء قسم بطل متمركز -->

<!-- الخطوة 1: البنية (flex, items-center, justify-center) -->
<section class="flex items-center justify-center">
  <div>محتوى البطل</div>
</section>

<!-- الخطوة 2: الحجم (min-h-screen, max-w-4xl) -->
<section class="flex items-center justify-center min-h-screen">
  <div class="max-w-4xl">محتوى البطل</div>
</section>

<!-- الخطوة 3: المسافات (px-4, py-16) -->
<section class="flex items-center justify-center min-h-screen px-4 py-16">
  <div class="max-w-4xl">محتوى البطل</div>
</section>

<!-- الخطوة 4: الطباعة (text-center, space-y-6) -->
<section class="flex items-center justify-center min-h-screen px-4 py-16">
  <div class="max-w-4xl text-center space-y-6">
    <h1 class="text-5xl font-bold">عنوان البطل</h1>
    <p class="text-xl text-gray-600">وصف البطل</p>
  </div>
</section>

<!-- الخطوة 5: الألوان والتأثيرات (bg-gradient-to-r) -->
<section class="flex items-center justify-center min-h-screen px-4 py-16 bg-gradient-to-r from-blue-500 to-purple-600">
  <div class="max-w-4xl text-center space-y-6">
    <h1 class="text-5xl font-bold text-white">عنوان البطل</h1>
    <p class="text-xl text-blue-100">وصف البطل</p>
  </div>
</section>

<style>
.feature-card {
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}
.feature-card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}
</style>

<div class="feature-card">
  <h3>عنوان الميزة</h3>
  <p>وصف الميزة</p>
</div>

الخلاصة

اتباع أفضل الممارسات في Tailwind CSS يؤدي إلى قواعد كود أكثر قابلية للصيانة والاتساق:

• ترتيب الفئات: حافظ على الترتيب المنطقي (التخطيط ← المسافات ← الطباعة ← المرئيات ← التفاعلية ← الاستجابة)
• أنماط المكونات: تعرّف وأعد استخدام الأنماط الشائعة (الحاويات، البطاقات، الأزرار، المكدسات)
• اتساق المسافات: التزم بمقياس المسافات للتناغم البصري
• تجنب الأخطاء: لا تفرط في استخدام القيم التعسفية، استخرج المكونات عند الحاجة
• تكامل SASS: ادمج مع SASS فقط عندما تحتاج إلى ميزات متقدمة
• عقلية الأدوات أولاً: فكر بالطبقات، ابنِ البنية أولاً، ثم أضف التصميم

في الدرس التالي، سنستكشف ميزات إمكانية الوصول في Tailwind CSS ونتعلم كيفية بناء واجهات مستخدم شاملة.