Chapter 33 — React va Tailwind CSS Integratsiyasi

Bu bob Tailwind'ning o'zini emas, uni React komponentlari bilan integratsiya qilish usullarini o'rgatadi.

---

33.1 Conditional Classes

Example

App.jsx
React JSXNusxalash
01function Button({ variant = "primary", children }) {
02  const base = "px-4 py-2 rounded font-medium";
03  const variants = {
04    primary: "bg-blue-600 text-white hover:bg-blue-700",
05    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",
06  };
07  return <button className={`${base} ${variants[variant]}`}>{children}</button>;
08}

33.2 Dark Mode va Responsive Komponentlar

Example

App.jsx
React JSXNusxalash
01<div className="bg-white dark:bg-gray-900 text-black dark:text-white p-4 md:p-8">
02  Kontent
03</div>

33.3 Reusable UI Komponentlar

Example

App.jsx
React JSXNusxalash
01function Card({ children, className = "" }) {
02  return (
03    <div className={`bg-white rounded-lg shadow-md p-6 ${className}`}>
04      {children}
05    </div>
06  );
07}

💡 Key Idea
className propini qabul qilib, uni standart klasslar bilan birlashtirish — komponentni moslashuvchan qiladi, tashqaridan qo'shimcha stil berish imkonini beradi.

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: primary, secondary, danger variantlariga ega Button komponenti yarating.

🐛 Debugging Challenge

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

Your Task: Bu Tailwind bilan ishlaydimi? Nega yoki nega yo'q?

<details> <summary>Solution</summary> Yo'q — Tailwind build vaqtida qaysi klasslar ishlatilganini statik tahlil qiladi. Dinamik ravishda yaratilgan (`alert-${type}`) klass nomlari Tailwind tomonidan aniqlanmaydi va CSS'ga qo'shilmaydi. Yechim — barcha mumkin bo'lgan klasslarni to'liq, statik yozish: ```jsx const styles = { success: "bg-green-100 text-green-800", error: "bg-red-100 text-red-800" }; <div className={styles[type]}>Xabar</div> ``` </details>

📌 Chapter Summary

Tailwind'ni React bilan integratsiya qilishda: conditional classes obyekt orqali, className propini qabul qilib composition'ga imkon berish, va dinamik klass nomlaridan saqlanish muhim.

🎯 Key Takeaways

• Variant obyektlari orqali dinamik stil tanlash
• className propi — komponentni moslashuvchan qiladi
• Tailwind klasslari to'liq, statik ko'rinishda yozilishi kerak (dinamik birlashtirilmasin)

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01const variants = { primary: "bg-blue-600", secondary: "bg-gray-200" };
02<button className={`base-classes ${variants[variant]}`}>...</button>
03function Card({ className = "" }) { return <div className={`card-base ${className}`}>...</div>; }

---