Chapter 22 — Tailwind Debugging Laboratoriyasi

Bu bob — to'plangan bilimlarni real "nosozliklarni topish" mashqlari orqali mustahkamlash uchun.

---

🐛 Bug 1: Class Umuman Ishlamayapti

index.html
HTMLNusxalash
01<div class="bg-blue-500 txt-white p-4">Salom</div>

Diagnosis: Matn oq bo'lishi kerak edi, lekin qora bo'lib qolmoqda.

<details> <summary>Why?</summary> `txt-white` — bunday klass Tailwind'da MAVJUD EMAS (to'g'risi `text-white`). Yozuvdagi xato tufayli brauzer bu klassni e'tiborsiz qoldiradi. </details> <details> <summary>Fix</summary> ```html <div class="bg-blue-500 text-white p-4">Salom</div> ``` </details>

🐛 Bug 2: Responsive Class Ishlamayapti

index.html
HTMLNusxalash
01<div class="hidden md:flex">Menu</div>

Diagnosis: Bu element 768px'dan katta ekranda ham ko'rinmayapti.

<details> <summary>Why?</summary> Ehtimoliy sabab: `tailwind.config.js`dagi `content` ro'yxatida shu fayl yo'q, shuning uchun bu klass yakuniy CSS'ga umuman qo'shilmagan. </details> <details> <summary>Fix</summary> `content` ro'yxatiga tegishli fayl yo'lini qo'shish va dev serverni qayta ishga tushirish. </details>

🐛 Bug 3: Hover Ishlamayapti

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

Diagnosis: Hover paytida rang o'zgarmayapti.

<details> <summary>Why?</summary> `hover-bg-blue-700` — bu yerda defis (`-`) ishlatilgan, lekin Tailwind variant sintaksisi **ikki nuqta** (`:`) talab qiladi: `hover:bg-blue-700`. </details> <details> <summary>Fix</summary> ```html <button class="bg-blue-500 hover:bg-blue-700">Bosing</button> ``` </details>

🐛 Bug 4: Dark Mode Ishlamayapti

script.js
JavaScriptNusxalash
01// tailwind.config.js
02export default { /* darkMode sozlamasi yo'q */ }

index.html
HTMLNusxalash
01<div class="bg-white dark:bg-gray-900">Test</div>

Diagnosis: dark klassi <html>ga qo'shilgan, lekin fon o'zgarmayapti.

<details> <summary>Why?</summary> `darkMode` sozlamasi config'da umuman ko'rsatilmagan — default holatda Tailwind `media` strategiyasini ishlatishi mumkin, bu esa faqat OS sozlamasiga qaraydi, qo'lda qo'shilgan `dark` klassini e'tiborga olmaydi. </details> <details> <summary>Fix</summary> ```javascript export default { darkMode: 'class' } ``` </details>

🐛 Bug 5: Z-index Ishlamayapti

index.html
HTMLNusxalash
01<div class="z-50 bg-red-500">Tepada bo'lishi kerak</div>

Diagnosis: Element hali ham boshqa elementlar ortida qolmoqda.

<details> <summary>Why?</summary> `z-index` faqat `position` (`relative`, `absolute`, `fixed`, `sticky`) berilgan elementlarda ishlaydi. Agar element `static` (default) bo'lsa, `z-50` hech qanday ta'sir qilmaydi. </details> <details> <summary>Fix</summary> ```html <div class="relative z-50 bg-red-500">Tepada bo'lishi kerak</div> ``` </details>

🐛 Bug 6: Flex Alignment Noto'g'ri

index.html
HTMLNusxalash
01<div class="flex-col justify-center items-center h-64">
02  <div>A</div><div>B</div>
03</div>

Diagnosis: Elementlar markazlanmayapti.

<details> <summary>Why?</summary> `flex-col` yozilgan, lekin `flex` klassi (asosiy `display: flex`) unutilgan! `flex-col` faqat yo'nalishni belgilaydi, konteynerni flex qilmaydi. </details> <details> <summary>Fix</summary> ```html <div class="flex flex-col justify-center items-center h-64"> ``` </details>

📌 Chapter Summary

Eng ko'p uchraydigan Tailwind xatolari: yozuv xatosi (txt- vs text-), noto'g'ri variant sintaksisi (- vs :), content konfiguratsiyasi muammosi, position unutilishi va asosiy flex/grid klassini unutish.

🎯 Key Takeaways

• Har doim klass nomini rasmiy hujjatdan tekshiring — kichik yozuv xatosi silent failure beradi
• Variant sintaksisi doim : bilan, defis bilan emas
• z-index uchun position shart
• flex-col/flex-row — flex klassisiz ma'nosiz

⚡ Quick Cheat Sheet — Debugging Checklist

code.text
TEXTNusxalash
011. Klass to'g'ri yozilganmi? (typo tekshirish)
022. content ro'yxatida shu fayl bormi?
033. Variant sintaksisi to'g'rimi? (variant:class)
044. position kerakli joyda berilganmi? (z-index uchun)
055. Asosiy display klassi (flex/grid) unutilmaganmi?

---