Chapter 21 — Production uchun Optimallashtirish

---

21.1 CSS Generatsiyasi va content

Simple Explanation

Tailwind production build paytida faqat content ro'yxatidagi fayllarda topilgan klasslarni yakuniy CSS fayliga qo'shadi — qolgan minglab mumkin klasslar chiqarib tashlanadi.

Example

script.js
JavaScriptNusxalash
01export default {
02  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
03}

21.2 Class Organization va Component Reuse

Mental Model

🧠 Katta loyihalarda bir xil 15-20 klassli kombinatsiyalarni har joyda qayta yozish — CSS fayl hajmiga ta'sir qilmaydi (chunki JIT baribir bir xil klasslarni bitta marta generatsiya qiladi), lekin kod yozish va o'qishni qiyinlashtiradi.

⚠️ Common Mistake
"Tailwind katta CSS fayl yaratadi" degan noto'g'ri tushuncha — aslida JIT faqat ishlatilgan, unikal klasslarni bir marta qo'shadi, natijada yakuniy fayl odatda juda kichik (ko'pincha 10-50kb) bo'ladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: O'z loyihangizdagi tailwind.config.js faylida content ro'yxatini tekshiring va barcha component papkalari kiritilganini tasdiqlang.

🟡 Exercise 2 — Medium

Task: Production build yarating (npm run build) va yakuniy CSS fayl hajmini tekshiring — u necha KB?

🔴 Exercise 3 — Hard

Task: Katta (50+ komponentli) loyihada takrorlanuvchi klass kombinatsiyalarini toping va ularni qayta ishlatiluvchi componentlarga ajrating.

---

🐛 Debugging Challenge

script.js
JavaScriptNusxalash
01// tailwind.config.js
02export default {
03  content: ["./src/**/*.js"], // faqat .js, .jsx yo'q!
04}

Your Task: React loyihasida .jsx fayllardagi klasslar nega ishlamayapti?

<details> <summary>Solution</summary> `content` glob pattern faqat `.js` kengaytmali fayllarni qamrab oladi, `.jsx` kiritilmagan. Yechim: `"./src/**/*.{js,jsx,ts,tsx}"` kabi barcha kerakli kengaytmalarni qo'shish. </details>

---

📌 Chapter Summary

Tailwind production build'da faqat ishlatilgan klasslarni o'z ichiga oladi, shuning uchun yakuniy CSS fayl odatda juda kichik bo'ladi. content ro'yxatini to'g'ri sozlash — bu jarayonning eng muhim qismi.

🎯 Key Takeaways

• CSS hajmi klasslar SONIGA emas, UNIKAL klasslar soniga bog'liq
• content ro'yxati barcha kerakli fayl turlarini (.jsx, .tsx va h.k.) qamrab olishi kerak
• Component reuse — code quality uchun, CSS hajmi uchun emas

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"]
02CSS hajmi ∝ unikal klasslar soni (takrorlanish hajmga ta'sir qilmaydi)

---