Chapter 2 — Tailwind Rang Tizimi

---

2.1 Rang Tizimi qanday qurilgan

Simple Explanation

Tailwind har bir rang oilasida (red, blue, green...) 50 dan 950 gacha 11 ta soya (shade) beradi.

Why Does It Exist?

Bu dizaynerlarga cheksiz rang tanlash o'rniga, oldindan tekshirilgan, bir-biriga mos keladigan palitradan foydalanish imkonini beradi.

Example

index.html
HTMLNusxalash
01<div class="bg-blue-500 text-white p-4 rounded">Ko'k fon, oq matn</div>

2.2 Opacity va Gradient

Example

index.html
HTMLNusxalash
01<div class="bg-blue-500/50">50% shaffof ko'k fon</div>
02<div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500"></div>

Real-world Usage

Gradient banner'lar SaaS landing sahifalarining hero bo'limida juda ko'p ishlatiladi.

⚠️ Common Mistake
Fon va matn rangini bir xil to'qlikda tanlash (masalan bg-blue-500 text-blue-600) — bu kontrastni yo'qotadi.

2.3 Eng ko'p qo'llaniladigan formulalar

Mental Model

🧠 -500 — asosiy rang, -50/-100 — yengil fon, -700/-900 — matn yoki hover holatlar uchun.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: bg-green-100 text-green-700 rounded-full px-3 py-1 text-sm font-medium bilan "Faol" degan status badge yarating.

🟡 Exercise 2 — Medium

Task: 3 xil status badge yarating: Faol (yashil), Kutilmoqda (sariq), Bekor qilingan (qizil) — barchasi bir xil shaklda (rounded-full px-3 py-1).

🔴 Exercise 3 — Hard

Task: from-indigo-500 via-purple-500 to-pink-500 gradient banner yarating va ichiga sarlavha + CTA tugma joylashtiring, matn kontrastini tekshiring.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<button class="bg-blue-600 text-blue-500">Bosing</button>

Your Task: Bu tugmadagi matn nega deyarli ko'rinmaydi?

<details> <summary>Solution</summary> Fon (`blue-600`) va matn (`blue-500`) bir-biriga juda yaqin to'qlikda — kontrast yetarli emas. Yechim: matnni `text-white` yoki juda och rangga (`text-blue-50`) o'zgartirish. </details>

---

📌 Chapter Summary

Har bir rang 50-950 oralig'ida 11 soyaga ega. -500 asosiy, -50/-100 fon uchun, -700/-900 matn/hover uchun. Gradient va opacity zamonaviy dizaynda tez-tez ishlatiladi.

🎯 Key Takeaways

• Rang tanlashda soya darajasi (shade) muhim, faqat nom emas
• Kontrast tekshirish har doim majburiy
• Gradient 3 qism: yo'nalish, from-*, to-* (ixtiyoriy via-*)

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01text-{color}-{shade}   → matn rangi
02bg-{color}-{shade}     → fon rangi
03{color}-{shade}/{opacity} → shaffoflik
04bg-gradient-to-{r|l|t|b} from-* via-* to-*

---