The Code Fix
...ابدأ مجانًا

🌬️ شرح Tailwind CSS

مقدمة في Tailwind CSS

❯ Tailwind CSSالتالي ❮

ما هو Tailwind CSS؟

Tailwind CSS إطار CSS عملي (utility-first): بدل كتابة CSS منفصل، تنسّق العناصر مباشرة بفئات جاهزة داخل HTML.

CSS تقليدي مقابل Tailwind

<!-- تقليدي: كتابة CSS منفصل -->
<div class="card">عنوان</div>
<style>
.card { padding: 16px; background: blue; border-radius: 8px; }
</style>

<!-- Tailwind: فئات جاهزة -->
<div class="p-4 bg-blue-500 rounded-lg">عنوان</div>

لماذا Tailwind؟

  • سرعة: تنسّق بلا مغادرة ملف HTML.
  • اتساق: نظام تصميم موحّد (مسافات، ألوان).
  • لا أسماء كلاسات: تتخلّص من معاناة تسمية الكلاسات.
  • حجم صغير: يحذف الفئات غير المستخدمة تلقائيًا.

التثبيت (مع مشروع)

npm install tailwindcss

ثم في ملف CSS:

@import "tailwindcss";

💡 هذا الموقع (The Code Fix) نفسه مبني بـ Tailwind CSS!

مثال سريع

<button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
  اضغطني
</button>

🎯 التالي: الفئات الأساسية (المسافات والألوان).

❯ Tailwind CSSالتالي ❮