Chapter 1 — Tailwind CSS'ga Kirish

---

1.1 Tailwind CSS nima?

Simple Explanation

Tailwind CSS — utility-first CSS freymvork. Bootstrap kabi tayyor komponentlar o'rniga, kichik bir-vazifali klasslar beradi.

Why Does It Exist?

An'anaviy CSS'da har bir komponent uchun alohida klass nomi o'ylab topish va CSS yozish kerak. Tailwind bu jarayonni HTML ichida to'g'ridan-to'g'ri klass kombinatsiyasi bilan almashtiradi.

Example

index.html
HTMLNusxalash
01<div class="p-4 rounded-lg shadow-md bg-white">Salom</div>

Real-world Usage

Zamonaviy startuplar va katta kompaniyalar (masalan GitHub, Shopify qismlari) Tailwind'dan foydalanadi, chunki u tez prototiplashtirish va izchil dizayn beradi.

1.2 Tailwind vs An'anaviy CSS

Example

index.html
HTMLNusxalash
01<!-- An'anaviy -->
02<div class="card">Salom</div>
03<style>.card { padding: 16px; border-radius: 8px; }</style>
04 
05<!-- Tailwind -->
06<div class="p-4 rounded-lg">Salom</div>

Class Mental Model

🧠 Har bir klass shu zanjirga amal qiladi:

code.text
TEXTNusxalash
01Class → CSS Property → CSS Value → Visual Result
02p-4 → padding → 1rem (16px) → Content atrofida bo'sh joy

⚠️ Common Mistake
Tailwind'ni inline style bilan aralashtirish. Tailwind klasslari oldindan belgilangan design-system qiymatlaridan foydalanadi, tasodifiy piksel emas.

1.3 O'rnatish usullari

How It Works

Vite/PostCSS integratsiyasi JIT (Just-In-Time) engine orqali faqat ishlatilgan klasslarni skanerlab, yakuniy CSS faylga qo'shadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Vite yordamida yangi loyiha yarating, Tailwind'ni o'rnating, text-3xl font-bold underline klasslari bilan sarlavha yozing.
Hint: npm create vite@latest, keyin Tailwind hujjatiga amal qiling.

🟡 Exercise 2 — Medium

Task: "An'anaviy CSS vs Tailwind" kartasini o'zingiz qayta yozing, lekin rangini yashilga (bg-green-500) o'zgartiring.

🔴 Exercise 3 — Hard

Task: CDN va Vite o'rtasidagi farqni ko'rsatadigan ikkita mini-loyiha yasang, ikkalasida ham bir xil natija chiqishini tekshiring, keyin build hajmini solishtiring.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<script src="https://cdn.tailwindcss.com"></script>
02<div class="p-4 bg-blue-500">Test</div>

Your Task: Bu kod ishlaydi, lekin production'da tavsiya etilmaydi. Nega?

<details> <summary>Solution</summary> CDN versiyasi butun Tailwind kutubxonasini brauzerda ishga tushiradi (bir necha MB), JIT optimallashtirish yo'q. Production uchun Vite/PostCSS orqali faqat kerakli klasslarni o'z ichiga olgan kichik CSS fayl yaratish kerak. </details>

---

📌 Chapter Summary

Tailwind — utility-first freymvork, tayyor komponent bermaydi. Har bir klass CSS property'ga to'g'ridan-to'g'ri mos keladi. JIT engine faqat ishlatilgan klasslarni yakuniy CSS'ga qo'shadi.

🎯 Key Takeaways

• Utility-first ≠ inline style — dizayn tokenlariga asoslangan
• Production'da har doim Vite/PostCSS, CDN faqat demo uchun
• Class Mental Model: Class → Property → Value → Visual

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Setup: npm install tailwindcss @tailwindcss/vite
02Test class: p-4 rounded-lg shadow-md
03Mental model: Class → Property → Value → Visual

---