Chapter 20 — Dynamic Classes va Conditional Styling

---

20.1 Conditional Classes

Simple Explanation

JavaScript orqali holatga (state) qarab turli klasslarni tanlash — masalan tugma bosilganda yoki xato bo'lganda rangini o'zgartirish.

Example

script.js
JavaScriptNusxalash
01const isActive = true;
02const className = `px-4 py-2 rounded-lg ${isActive ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-700"}`;

20.2 Content Detection Muammosi

⚠️ Critical Warning

Tailwind JIT engine kodni matn sifatida skanerlaydi, JavaScript'ni ishga tushirmaydi. Shuning uchun dinamik (runtime'da yig'iladigan) klass nomlari ba'zan ANIQLANMAYDI.

Example (Xato)

script.js
JavaScriptNusxalash
01// ❌ ISHLAMAYDI - Tailwind bu klassni "ko'rmaydi"
02const color = "blue";
03const className = `bg-${color}-500`;

Example (To'g'ri)

script.js
JavaScriptNusxalash
01// ✅ ISHLAYDI - klass nomlari to'liq matn sifatida mavjud
02const colorMap = {
03  blue: "bg-blue-500",
04  red: "bg-red-500",
05};
06const className = colorMap[color];

20.3 clsx / classnames Kutubxonasi

Example

script.js
JavaScriptNusxalash
01import clsx from "clsx";
02const className = clsx(
03  "px-4 py-2 rounded-lg",
04  isActive && "bg-blue-500 text-white",
05  isDisabled && "opacity-50 cursor-not-allowed"
06);

Real-world Usage

clsx yoki classnames kutubxonasi ko'p shartli klasslarni boshqarishda kodni ancha o'qilishli qiladi, ayniqsa 3+ shart bo'lganda.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Ternar operator yordamida "Faol/Nofaol" holatiga qarab rangini o'zgartiradigan tugma yarating.

🟡 Exercise 2 — Medium

Task: 3 xil status (success, warning, error) uchun lookup obyekt yarating va Badge componentida ishlating.

🔴 Exercise 3 — Hard

Task: clsx kutubxonasidan foydalanib, 4 xil shartga bog'liq (active, disabled, loading, size) Button componentini yarating.

---

🐛 Debugging Challenge

script.js
JavaScriptNusxalash
01function Alert({ type }) {
02  return <div className={`bg-${type}-100 border-${type}-500 text-${type}-700`}>Xabar</div>;
03}

Your Task: Bu component production build'da nega uslubsiz chiqadi?

<details> <summary>Solution</summary> `bg-${type}-100` kabi template literal'lar JIT tomonidan aniqlanmaydi, chunki ular runtime'da yig'iladi, kod faylida to'liq klass sifatida ko'rinmaydi. Yechim: har bir `type` qiymati uchun to'liq klass satrlarini o'z ichiga olgan lookup obyekt yaratish kerak, masalan `{ success: "bg-green-100 border-green-500 text-green-700", error: "bg-red-100 border-red-500 text-red-700" }`. </details>

---

📌 Chapter Summary

JavaScript bilan dinamik klasslar yaratish mumkin, lekin Tailwind JIT klass nomlarini to'liq matn sifatida qidirgani uchun "yarim yig'ilgan" (masalan template literal ichida interpolatsiya qilingan) klass nomlari ishlamaydi. Yechim — lookup obyektlar yoki clsx kabi kutubxonalar.

🎯 Key Takeaways

• Tailwind JIT statik matn skaneri, JavaScript'ni bajarmaydi
• Dinamik ranglar/klasslar uchun har doim to'liq klass nomli lookup obyekt yarating
• clsx/classnames ko'p shartli holatlarni tozalaydi

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01// Xato:
02`bg-${color}-500`
03// To'g'ri:
04{ blue: "bg-blue-500", red: "bg-red-500" }[color]
05// clsx bilan:
06clsx("base-class", condition && "conditional-class")

---