Chapter 12 — Mobile-First Tafakkur

---

12.1 Mobile-First Tushunchasi

Simple Explanation

Prefikssiz klass barcha ekranlarga qo'llanadi. Prefiksli klass faqat shu va undan katta ekranlarga qo'shimcha qoida qo'shadi.

Example

index.html
HTMLNusxalash
01<h1 class="text-2xl md:text-4xl lg:text-6xl font-bold">Responsive Sarlavha</h1>

12.2 Breakpoint Jadvali va Responsive Navbar

Example

index.html
HTMLNusxalash
01<nav class="flex justify-between items-center p-4">
02  <span class="font-bold text-xl">Logo</span>
03  <div class="hidden md:flex gap-6"><a href="#">Bosh sahifa</a></div>
04  <button class="md:hidden">Menu</button>
05</nav>

⚠️ Common Mistake
Desktop-first yozish (avval lg: klasslarini yozib, keyin mobil uchun override qilish) — bu Tailwind falsafasiga zid va ko'proq kod talab qiladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Matn hajmini responsive qiling: text-base md:text-xl lg:text-2xl.

🟡 Exercise 2 — Medium

Task: Responsive Navbar yarating (mobilda hamburger, desktopda to'liq menyu).

🔴 Exercise 3 — Hard

Task: To'liq responsive Hero Section yarating — mobilda vertikal (rasm pastda), desktopda gorizontal (rasm o'ngda) joylashuv, flex-col lg:flex-row yordamida.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="lg:flex">

Your Task: Nega bu element mobilda flex bo'lmayapti (garchi shunday kerak bo'lsa ham)?

<details> <summary>Solution</summary> `lg:flex` faqat 1024px va undan katta ekranlarga qo'llanadi. Agar mobilda ham flex kerak bo'lsa, prefikssiz `flex` klassi qo'shilishi kerak: `flex lg:flex-row`. </details>

---

📌 Chapter Summary

Tailwind mobile-first: prefikssiz = barcha, md: = shu va undan katta. Breakpoint tanlashda "kontent qachon sinadi" mantig'iga amal qiling.

🎯 Key Takeaways

• Responsive dizayn — bu klass yodlash emas, layout thinking
• Har doim mobil holatni birinchi yozing
• Breakpoint — qurilma emas, kontent talabiga qarab tanlanadi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01sm: 640px   md: 768px   lg: 1024px   xl: 1280px   2xl: 1536px
02Format: {property}-{value} {breakpoint}:{property}-{value}

---