Chapter 0 — CSS Asoslari Tailwind uchun

Tailwind CSS - bu CSS'ning o'zi emas, balki uning ustiga qurilgan qisqartma tizim. Shuning uchun Tailwind'ni chuqur tushunish uchun avval oddiy CSS qanday ishlashini bilish kerak.

---

0.1 CSS qanday ishlaydi (Selector, Property, Value)

Simple Explanation

CSS qoidasi uchta qismdan iborat: Selector (qaysi elementga), Property (nimani o'zgartirish), Value (qanday qiymat).

Why Does It Exist?

Brauzer HTML'ni o'qib, har bir elementga mos CSS qoidalarini qo'llaydi - shu orqali vizual ko'rinish belgilanadi.

Example

styles.css
CSSNusxalash
01p {
02  color: blue;
03}

How It Works

Tailwind'da bu xuddi shu narsa, faqat qisqartirilgan holda: text-blue-500 klassi ichida color: #3b82f6; degan CSS qoida yashiringan.

0.2 Box Model

Simple Explanation

Har bir HTML element 4 qatlamli "quti": content, padding, border, margin.

Mental Model

🧠 Qutini tasavvur qiling: markazda kontent, uni o'rab turgan bo'shliq (padding), keyin chegara (border), va tashqarida boshqa elementlar bilan orasidagi masofa (margin).

Example

styles.css
CSSNusxalash
01margin > border > padding > content

Tailwind'da: p-4 (padding), border-2 (border), m-4 (margin).

0.3 Display, Position, Flexbox, Grid (Qisqacha Kirish)

Simple Explanation

• Display — element qanday "oqimda" turishini belgilaydi (block, inline, flex, grid).
• Position — elementni normal oqimdan chiqarib, aniq joyga qo'yadi.
• Flexbox — bir o'lchamli joylashtirish tizimi.
• Grid — ikki o'lchamli joylashtirish tizimi.

Real-world Usage

Deyarli har qanday zamonaviy layout Flexbox yoki Grid asosida quriladi — bular Part 9 va Part 10'da chuqur o'rganiladi.

0.4 Responsive Design va Media Query

Simple Explanation

An'anaviy CSS'da @media (min-width: 768px) { .card { width: 50%; } } yozish kerak. Tailwind'da xuddi shu narsa md:w-1/2 klassi orqali, @media yozmasdan amalga oshiriladi.

⚠️ Common Mistake
CSS asoslarini bilmasdan Tailwind spacing/responsive klasslarini yodlashga urinish — bu tushunishni chuqurlashtirmaydi, faqat sirtqi yodlashga olib keladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Oddiy <div> yarating va unga faqat CSS (Tailwind'siz) yordamida padding: 16px; margin: 8px; border: 1px solid black; bering.
Hint: <style> tegidan yoki alohida CSS faylidan foydalaning.

🟡 Exercise 2 — Medium

Task: Brauzer DevTools (Inspect Element) orqali istalgan saytning bitta elementini oching va uning box model diagrammasida margin/border/padding qiymatlarini toping.
Hint: Chrome DevTools'da "Computed" tab'ida box model diagrammasi ko'rinadi.

🔴 Exercise 3 — Hard

Task: Bitta HTML sahifa yarating: mobil uchun (@media yozmasdan) bitta rang, 768px'dan katta ekranlar uchun boshqa rang bilan fon bering — faqat oddiy CSS media query orqali.
Hint: @media (min-width: 768px) { body { background: ...; } }

---

🔮 Predict the Output

styles.css
CSSNusxalash
01.box { padding: 10px; border: 5px solid black; margin: 20px; }

Agar .box elementining content kengligi 100px bo'lsa, uning umumiy egallagan joyi (border-box hisobga olinmasa) qancha bo'ladi?

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> Content (100px) + padding (10px x2 = 20px) + border (5px x2 = 10px) = 130px (margin bu hisobga kirmaydi, chunki u elementning o'zi emas, atrofidagi bo'shliq)

Why?
Standart box model'da (box-sizing: content-box) width faqat content'ga tegishli, padding va border qo'shimcha qo'shiladi.

</details>

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.card { width: 300px; padding: 20px; border: 2px solid gray; }

Your Task: Bu kartochka nega kutilganidan (300px) kengroq ko'rinadi? Sababini tushuntiring va tuzating.

<details> <summary>Solution</summary> Muammo: standart `box-sizing: content-box` bilan padding va border width'ga QO'SHILADI, shuning uchun haqiqiy kenglik 300+40+4=344px bo'ladi.

Yechim:

styles.css
CSSNusxalash
01.card { box-sizing: border-box; width: 300px; padding: 20px; border: 2px solid gray; }

</details>

📌 Chapter Summary

CSS uch narsadan iborat: selector, property, value. Box model 4 qatlamli: content, padding, border, margin. Tailwind bu tushunchalarni klass sifatida taqdim etadi, CSS'ni bekor qilmaydi.

🎯 Key Takeaways

• Tailwind — CSS'ning o'rnini bosuvchi sehr emas, balki qisqartirilgan yozuvi
• Box model tushunilmasa, spacing klasslari (p-*, m-*) mantiqsiz tuyuladi
• border-box — Tailwind'ning standart (preflight) box-sizing qiymati
• Media query mantig'i sm:, md:, lg: prefikslari ortida yashiringan

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Selector { Property: Value; }
02Box Model: content < padding < border < margin
03Tailwind: p-* (padding), m-* (margin), border-* (border)
04Responsive: md:{class} = @media (min-width: 768px)

---