Chapter 4 — Matn Boshqaruvi

---

4.1 Shrift Hajmi va Qalinligi

Example

index.html
HTMLNusxalash
01<h1 class="text-4xl font-extrabold text-gray-900">Sarlavha</h1>
02<p class="text-gray-600 leading-relaxed">Paragraf matni.</p>

Mental Model

🧠 text-xs dan text-9xl gacha hajm, font-thin dan font-black gacha qalinlik — ikkalasi mustaqil o'zgaruvchan.

4.2 Truncate va Line-Clamp

Example

index.html
HTMLNusxalash
01<p class="truncate w-48">Bu juda uzun matn karta ichiga sig'maydi</p>
02<h3 class="line-clamp-2">Uzun sarlavha ikki qatorga cheklanadi</h3>

⚠️ Common Mistake
Sarlavha va paragraf uchun bir xil rang ishlatish — vizual ierarxiya yo'qoladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: text-3xl font-bold text-gray-900 bilan sarlavha yarating.

🟡 Exercise 2 — Medium

Task: Blog karta sarlavhasi yarating: text-xl font-bold line-clamp-2, ostida sana text-sm text-gray-400.

🔴 Exercise 3 — Hard

Task: To'liq maqola header'ini yarating: katta sarlavha, muallif ismi, qisqacha tavsif — barchasi mos rang ierarxiyasi bilan.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<p class="line-clamp-3">Qisqa matn.</p>

Your Task: Agar @tailwindcss/line-clamp plagini eski Tailwind versiyasida o'rnatilmagan bo'lsa, bu klass ishlamaydi. Buni qanday tuzatasiz?

<details> <summary>Solution</summary> Tailwind v3.3+ da `line-clamp` built-in bo'lib kiritilgan, plagin kerak emas. Eski versiyalarda esa `@tailwindcss/line-clamp` plaginini `tailwind.config.js`ga qo'shish kerak. </details>

---

📌 Chapter Summary

Matn hajmi text-xs dan text-9xl gacha, qalinligi font-thin dan font-black gacha. truncate bitta qatorga, line-clamp-N esa N qatorga cheklaydi.

🎯 Key Takeaways

• Hajm va qalinlik mustaqil klasslar
• line-clamp va truncate — UI'da matn "portlashi"ning oldini oladi
• Rang to'qligi vizual ierarxiya yaratadi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Hajm:      text-xs ... text-9xl
02Qalinlik:  font-thin ... font-black
03Cheklash:  truncate, line-clamp-2

---