Chapter 24 — React Componentlarida Tailwind

---

24.1 Props + Tailwind

Example

App.jsx
React JSXNusxalash
01function Avatar({ src, size = "md" }) {
02  const sizes = { sm: "w-8 h-8", md: "w-12 h-12", lg: "w-20 h-20" };
03  return <img src={src} className={`${sizes[size]} rounded-full object-cover`} />;
04}

24.2 State-based Styling

Example

App.jsx
React JSXNusxalash
01function Accordion({ title, children }) {
02  const [isOpen, setIsOpen] = useState(false);
03  return (
04    <div className="border rounded-lg">
05      <button onClick={() => setIsOpen(!isOpen)} className="w-full flex justify-between items-center p-4">
06        <span>{title}</span>
07        <span className={`transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`}>▼</span>
08      </button>
09      {isOpen && <div className="p-4 border-t">{children}</div>}
10    </div>
11  );
12}

⚠️ Common Mistake
State'ga bog'liq klasslarni to'g'ridan-to'g'ri template literal ichida yozishga urinish (masalan bg-${color}-500) — bu Part 20'da ko'rilgan content-detection muammosiga olib keladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Avatar componentiga 4-chi o'lcham (xl) qo'shing.

🟡 Exercise 2 — Medium

Task: Accordion componentini kengaytirib, bir vaqtda faqat bitta bo'lim ochiq turadigan qilib yasang (parent state orqali).

🔴 Exercise 3 — Hard

Task: Tabs componentini yarating — bir nechta tab, faol tab boshqacha stil bilan (border-b-2 border-blue-500 text-blue-600) ko'rsatiladi.

---

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function Toast({ type }) {
02  return <div className={`bg-${type}-500`}>Xabar</div>;
03}

Your Task: type="success" uzatilganda ranglar nega ishlamayapti?

<details> <summary>Solution</summary> Bu Part 20'dagi content-detection muammosi — `bg-${type}-500` runtime'da yig'iladi, JIT buni tanimaydi. Yechim: lookup obyekt: `{ success: "bg-green-500", error: "bg-red-500" }[type]`. </details>

---

📌 Chapter Summary

React'da Tailwind — props orqali variant tanlash (lookup obyekt), state orqali shartli klass qo'shish (ternar/&&) va conditional rendering bilan birlashadi.

🎯 Key Takeaways

• Lookup obyektlar — props asosida klass tanlashning eng xavfsiz usuli
• State o'zgarishi ko'pincha ternar orqali klass almashtirishga olib keladi
• Content-detection muammosi React'da ham xuddi shunday amal qiladi

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01const sizes = { sm: "...", md: "...", lg: "..." };
02className={sizes[size]}
03className={`base ${condition ? "a" : "b"}`}
04{condition && <Component />}

---