أفضل الممارسات في Tailwind CSS

مقدمة عن Tailwind CSS

Tailwind CSS هو إطار عمل CSS حديث يوفر مجموعة من classes جاهزة لبناء التصاميم:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  مرحباً بك
</div>

بدلاً من تكرار نفس الـ classes:

@layer components {
  .btn {
    @apply px-4 py-2 rounded bg-blue-500 text-white hover:bg-blue-600 transition;
  }
}

<!-- صغير أولاً -->
<div class="text-sm md:text-base lg:text-lg">
  النص
</div>

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#FF6B6B'
      }
    }
  }
}

<!-- جيد ✓ -->
<div class="grid grid-cols-3 gap-4">

<!-- سيء ✗ -->
<div class="flex flex-row flex-wrap justify-between">

استخدام Tailwind بحكمة يجعل مشاريعك أنظف وأسهل للصيانة.