Tailwind CSS qo'llanma — utility-first, responsive, dark mode (1.7-bob)

1-QISM — HTML, CSS va zamonaviy stillar · 7-mavzu

1. Kirish va motivatsiya

Oldingi boblarda CSS 1.2-bob va SCSS 1.6-bob yozdik — har biri uchun alohida class o'ylab topdik (.karta, .tugma), keyin alohida faylda uslub berdik. Tailwind bu jarayonni butunlay teskari qiladi.

Tailwind CSS — utility-first (utility-birinchi) CSS framework. Bu nima degani? Tailwind sizga minglab kichik, bitta vazifali utility class'lar beradi (flex, pt-4, text-center, bg-blue-500), va siz ularni to'g'ridan-to'g'ri HTML'da birlashtirib, dizayn yasaysiz — alohida CSS fayl deyarli yozmaysiz (tailwindcss.com).

<!-- An'anaviy: class o'yla + CSS yoz -->
<button class="tugma">Bos</button>          <!-- + .tugma {...} CSS'da -->

<!-- Tailwind: to'g'ridan-to'g'ri HTML'da -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Bos</button>

O'xshatish: an'anaviy CSS — har taom uchun alohida retsept yozish. Tailwind — oldindan tayyorlangan masalliqlar tokchasi (tuz, qalampir, yog'...): retsept yozmaysiz, keraklisini olib, joyida aralashtirasiz. Boshida g'alati tuyuladi ("HTML iflos ko'rinadi"), lekin tezda — juda tez ishlashni ko'rasiz.

Nega Tailwind shunchalik mashhur?

• Tezlik: fayl almashtirib o'tirmaysiz, class nomi o'ylamaysiz — to'g'ridan-to'g'ri yozasiz.
• Izchillik: ranglar/masofalar oldindan belgilangan shkala (p-1...p-12) — "sehrli raqamlar" yo'q.
• Kichik CSS: ishlatilmagan class'lar olib tashlanadi (purge) — yakuniy CSS juda kichik.
• React/Next (11, 13) bilan a'lo ishlaydi — komponent + utility class'lar.

2. Nazariya — chuqur tushuntirish

2.1. Utility-first falsafasi

An'anaviy CSS'da "semantik class" yozasiz: .karta, .asosiy-tugma. Tailwind'da esa prezentatsion (ko'rinish) utility'lar: har class bitta CSS xususiyatini beradi:

  p-4        →  padding: 1rem;
  mt-2       →  margin-top: 0.5rem;
  flex       →  display: flex;
  text-center→  text-align: center;
  bg-red-500 →  background-color: #ef4444;
  rounded-lg →  border-radius: 0.5rem;

Dizaynni bu kichik bloklardan HTML'da yig'asiz.

E'tiroz: "HTML iflos bo'lib ketadi-ku!" — bu haqiqat, class ko'p bo'ladi. Lekin afzalliklar og'irroq keladi: kontekst almashmaysiz, eski CSS "o'lik kod" yig'ilmaydi, izchil shkala. Va React'da (11) komponentga bo'lib, takrorlanishni yo'qotasiz.

2.2. Spacing va o'lcham shkalasi

Tailwind'ning kuchi — izchil shkala (tailwindcss.com). Masofa/o'lcham 0.25rem (4px) qadamlarida:

Yo'nalish prefikslari: t(top) b(bottom) l(left) r(right) x(chap+o'ng) y(yuqori+past). Masalan px-4 py-2.

2.3. Ranglar shkalasi

Tailwind ranglari 50–950 ohanglarda (kichik = ochroq):

  bg-blue-50   (eng ochiq) ... bg-blue-500 (o'rta) ... bg-blue-900 (eng to'q)
  text-gray-700   border-red-300   bg-green-500

text-* (matn rangi), bg-* (fon), border-* (chegara) — hammasi shu shkalada.

2.4. Layout utility'lari (1.3–1.4 ning Tailwind ko'rinishi)

Flexbox va Grid — to'g'ridan-to'g'ri class sifatida:

  Flexbox 1.3-bob:
  flex  flex-col  justify-center  items-center  gap-4  flex-wrap

  Grid 1.4-bob:
  grid  grid-cols-3  gap-4  col-span-2  row-span-2

<!-- Markazlash 1.3-bob — bir qatorda -->
<div class="flex justify-center items-center h-screen"> ... </div>

<!-- 3 ustunli grid 1.4-bob -->
<div class="grid grid-cols-3 gap-4"> ... </div>

2.5. Responsive variantlar (1.5 ning Tailwind ko'rinishi)

Tailwind mobile-first 1.5-bob — breakpoint prefikslari bilan (tailwindcss.com):

<!-- mobil: 1 ustun; md (≥768): 2; lg (≥1024): 3 — aynan 1.5'dagi mantiq! -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> ... </div>

Prefikssiz class — base (mobil); prefikslar esa o'sha breakpointdan boshlab qo'llanadi.

2.6. Holat variantlari (hover, focus, dark)

Holatlar ham prefiks bilan (tailwindcss.com):

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 active:scale-95">Bos</button>
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">Dark mode</div>

hover:, focus:, active:, disabled:, dark: — va ular bir-biri va responsive bilan stacklanadi: md:hover:bg-blue-600 (tailwindcss.com).

group va peer — ota va qardosh holatiga qarab uslublash. Ba'zan element o'zining emas, ota yoki qo'shni element holatiga qarab o'zgarishi kerak (masalan, kartaga hover qilganda ichidagi matn rangi o'zgarsin). Buni group/peer hal qiladi (tailwindcss.com):

<!-- group: otaga group qo'yiladi, bolada group-hover: ishlatiladi -->
<a href="#" class="group block p-4 rounded hover:bg-blue-50">
  <h3 class="font-bold group-hover:text-blue-600">Sarlavha</h3>
  <p class="text-gray-500 group-hover:text-gray-700">Otaga hover bo'lsa, men o'zgaraman</p>
</a>

<!-- peer: oldingi qardoshga peer qo'yiladi, keyingisida peer-* ishlatiladi -->
<input type="email" class="peer border p-2" required>
<p class="hidden peer-invalid:block text-red-500 text-sm">To'g'ri email kiriting</p>

group-hover:, group-focus: — ota holatiga; peer-invalid:, peer-checked:, peer-focus: — DOM'da oldin turgan qardosh holatiga qarab ishlaydi. CSS'da bu narsa qiyin (:hover > .child, ~ selektorlari) — Tailwind uni soddalashtiradi.

2.7. O'rnatish va konfiguratsiya

Tailwind buildda ishlaydi (0.7: npm). Zamonaviy (v4) CSS-first yondashuv:

npm install tailwindcss @tailwindcss/vite   # Vite bilan (11.3)

/* main.css — Tailwind'ni ulash */
@import "tailwindcss";

/* Mavzuni (rang, breakpoint) sozlash — @theme (v4) */
@theme {
  --color-brand: #3b5bdb;        /* endi bg-brand, text-brand ishlatib bo'ladi */
  --breakpoint-3xl: 1920px;      /* yangi breakpoint */
}

Eslatma (versiyalar): Tailwind v4 (zamonaviy) @import "tailwindcss" + @theme (CSS-first) ishlatadi. v3 (hali keng tarqalgan) esa tailwind.config.js fayl + @tailwind base/components/utilities direktivalari ishlatadi. Loyiha qaysi versiyada ekanini tekshiring; tushunchalar bir xil.

2.8. @apply va maxsus class'lar

Agar bir xil utility to'plami ko'p takrorlansa (masalan tugma), @apply bilan ularni bitta class'ga yig'ish mumkin:

.btn {
  @apply bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600;
}

Maslahat: @applyni kam ishlating — Tailwind falsafasiga zid (yana CSS yozishga qaytasiz). React'da esa takrorlanishni komponent bilan hal qiling (<Button>), @apply bilan emas (11). @apply faqat juda ko'p takrorlangan kichik narsalar uchun.

@layer — maxsus class'larni to'g'ri qatlamga qo'yish. Tailwind CSS'ni uch qatlamga ajratadi: base (HTML tag'larining sukutdagi uslublari), components (qayta ishlatiladigan class'lar — tugma, karta) va utilities (eng kichik utility'lar). O'z class'ingizni @layer ichida e'lon qilsangiz, u to'g'ri qatlamga tushadi — bu muhim, chunki qatlam tartibi class'lar ustuvorligini (specificity konfliktlarini) hal qiladi:

@layer components {
  .btn {                                    /* components qatlamiga tushadi */
    @apply bg-blue-500 text-white px-4 py-2 rounded;
  }
}

@layer utilities {
  .text-balance {                           /* utilities qatlamiga */
    text-wrap: balance;
  }
}

@layer ishlatmasangiz, class oddiy CSS bo'lib qoladi va utility'lar uni bekor qila olmaydi (<button class="btn bg-red-500">da bg-red-500 ishlamasligi mumkin). @layer components ichida bo'lsa esa, utility doim ustun keladi — Tailwind'ning kutilgan mantig'i.

2.9. "Iflos HTML" muammosi va yechimi

Tailwind'ning eng katta tanqidi — HTML'da class juda ko'p bo'lib ketadi. Yechimlar:

• Komponentlarga bo'lish (React/Vue — 11): bir marta yozing, qayta ishlating.
• Editor kengaytmasi: "Tailwind CSS IntelliSense" 0.7-bob — avto-to'ldirish, rang ko'rsatish.
• Prettier plugin: prettier-plugin-tailwindcss — class'larni avtomatik tartiblaydi.
• Arbitrary qiymatlar: shkalada yo'q qiymat kerak bo'lsa — w-[137px], bg-[#1da1f2] (kvadrat qavs bilan).

2.10. Dinamik class'lar: clsx, tailwind-merge va mashhur cn() yordamchisi

Real React va Next.js loyihalarida komponentlar har doim tashqaridan qo'shimcha class (className) qabul qiladi. Masalan:

function Tugma({ className }) {
  return <button className={`px-4 py-2 bg-blue-500 ${className}`}>Bos</button>;
}

Lekin kimdir <Tugma className="px-8 bg-red-500" /> deb chaqirsa, natijada HTML'da px-4 py-2 bg-blue-500 px-8 bg-red-500 hosil bo'ladi. Katta muammo: CSS'da qaysi class ustun kelishi HTML'dagi tartibga emas, Tailwind'ning ichki CSS faylidagi tartibiga bog'liq! Natijada siz px-8 bergan bo'lsangiz ham, ekranda px-4 ishlab qolishi mumkin (sinflar to'qnashuvi — conflict).

Sanoat yechimi: clsx + tailwind-merge:

1. clsx — shartli class'larni oson yozish (isActive && "bg-blue-500").
2. tailwind-merge (twMerge) — to'qnash kelgan Tailwind sinflarini to'g'ri hal qiladi (px-4 bilan px-8 kelsa, avtomatik px-8 ni qoldiradi).

Barcha zamonaviy kutubxonalar (masalan shadcn/ui) loyiha boshida bitta lib/utils.ts faylini ochadi:

// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Endi har qanday komponentda buni xavfsiz ishlatasiz:

<button className={cn(
  "px-4 py-2 rounded-lg font-medium transition",
  faol ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700",
  className // tashqaridan kelgan har qanday o'zgartirish toza ustun keladi
)}>
  Tugma
</button>

Bu cn() funksiyasi — butun React (11-QISM) va Next.js (13-QISM) dunyosining de-fakto standartiga aylangan.

2.11. Komponent variantlari arxitekturasi: cva (class-variance-authority)

Komponentlar loyihada hech qachon bitta ko'rinishda bo'lmaydi: tugmaning primary, secondary, outline, destructive, ghost kabi ko'rinishlari (variants), shuningdek sm, md, lg kabi o'lchamlari (sizes) bo'ladi.

Buni qo'lda if/switch yoki obyeklar bilan qilish — chalkash va xatolarga moyil. Sanoat standarti — cva (class-variance-authority) kutubxonasi (npm install class-variance-authority). Aynan shu kutubxona butun shadcn/ui dizayn tizimining asosini tashkil qiladi:

// components/ui/button.tsx
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

// 1. Variantlar xaritasini e'lon qilamiz:
export const buttonVariants = cva(
  // Asosiy (har doim qo'llanadigan) sinflar:
  "inline-flex items-center justify-center rounded-lg font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]",
  {
    variants: {
      variant: {
        default: "bg-blue-600 text-white hover:bg-blue-700 shadow-sm",
        destructive: "bg-red-600 text-white hover:bg-red-700 shadow-sm",
        outline: "border border-gray-300 bg-transparent hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-800 text-gray-900 dark:text-white",
        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100",
        ghost: "hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-200",
        link: "text-blue-600 underline-offset-4 hover:underline",
      },
      size: {
        sm: "h-8 px-3 text-xs",
        md: "h-10 px-4 text-sm",
        lg: "h-12 px-6 text-base",
        icon: "h-10 w-10 p-0", // Faqat ikonka uchun kvadrat tugma
      },
    },
    // Sukut bo'yicha qiymatlar:
    defaultVariants: {
      variant: "default",
      size: "md",
    },
  }
);

// 2. TypeScript turlari avtomatik chiqariladi:
export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <button
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  );
}

Ishlatish juda toza va tip-xavfsiz:

<Button variant="destructive" size="sm">O'chirish</Button>
<Button variant="outline" size="icon"><TrashIcon className="h-4 w-4" /></Button>
<Button className="w-full">To'liq enli</Button>

2.12. Konteyner so'rovlari: @container bilan haqiqiy modulli dizayn

1.5-bobda ko'rganimizdek, ekranga qarab emas (@media), komponent joylashgan o'z ota-konteyneriga qarab moslashuv — zamonaviy UI'ning eng muhim yutug'idir. Tailwind'da bu rasmiy @tailwindcss/container-queries plagini (v4 da esa o'rnatilgan holda) orqali ishlaydi:

1. Ota elementga @container sinfini bering:

<div class="@container">
  <!-- Bola element o'z konteyneri eniga qarab shaklini o'zgartiradi -->
  <article class="flex flex-col @sm:flex-row @lg:grid @lg:grid-cols-3 gap-4 p-4">
    <img src="..." class="w-full @sm:w-48 @lg:w-full rounded-lg" />
    <div class="@lg:col-span-2">
      <h3 class="text-base @sm:text-lg @lg:text-2xl font-bold">Karta sarlavhasi</h3>
      <p class="hidden @sm:block text-gray-600">Bu matn tor konteynerda yashirinadi, kengayganda chiqadi.</p>
    </div>
  </article>
</div>

Natija: bir xil karta komponentini tor yon panelga (sidebar) qo'ysangiz vertikal bo'ladi, keng markaziy qismga qo'ysangiz darhol gorizontal shaklga o'tadi — media query yozish umuman shart emas!

2.13. Group, Peer va qudratli :has() modifikatorlari

Ko'pincha bitta elementning holati boshqa elementning stillariga ta'sir qilishi kerak bo'ladi.

1. group (ota element holatiga qarab bolani stillash):

<!-- Kartaning ustiga sichqoncha borganda ichidagi matn va ikonka o'zgaradi -->
<div class="group p-6 rounded-xl border border-gray-200 hover:border-blue-500 hover:shadow-lg transition">
  <h3 class="text-lg font-semibold group-hover:text-blue-600 transition">
    Interaktiv Karta
  </h3>
  <!-- Ikonka o'ngga suriladi -->
  <span class="inline-block transform group-hover:translate-x-1 transition text-gray-400 group-hover:text-blue-600">
    →
  </span>
</div>

2. peer (yonma-yon turgan qardosh element holatiga qarab stillash): Masalan, chiroyli floating label yoki maxsus checkbox yasashda:

<div class="relative">
  <input
    type="text"
    id="ism"
    placeholder=" "
    class="peer h-10 w-full border-b-2 border-gray-300 placeholder-transparent focus:border-blue-600 focus:outline-none"
  />
  <label
    for="ism"
    class="absolute left-0 -top-3.5 text-xs text-gray-500 transition-all 
           peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400
           peer-focus:-top-3.5 peer-focus:text-xs peer-focus:text-blue-600"
  >
    Ismingizni kiriting
  </label>
</div>

3. has-* (CSS tarixidagi eng inqilobiy selektor — :has()): Ota elementni o'zining ichidagi bola element holatiga qarab stillash:

<!-- Agar ichidagi checkbox belgilangan bo'lsa, butun ota div ko'k ramka va fonga ega bo'ladi -->
<label class="flex items-center gap-3 p-4 rounded-lg border border-gray-200 has-[:checked]:border-blue-600 has-[:checked]:bg-blue-50/50 cursor-pointer">
  <input type="checkbox" class="h-4 w-4 text-blue-600" />
  <span class="text-sm font-medium text-gray-900">Premium obunani yoqish</span>
</label>

2.14. Rasmiy plaginlar: @tailwindcss/typography va @tailwindcss/forms

Tailwind deyarli hamma stillarni boshida tozalab (reset) tashlaydi. Bu ilovalar uchun yaxshi, lekin:

1. Markdown yoki Blog matnlari: Backenddan yoki CMS dan kelgan HTML (<h1>, <p>, <ul>, <blockquote>) ga har bir tegiga qo'lda class berib chiqolmaysiz.
   • Yechim: @tailwindcss/typography plagini. U bitta prose sinfini beradi:
   html

   <!-- Ichidagi butun HTML (sarlavhalar, jadvallar, ro'yxatlar) avtomatik mukammal kitob darajasida stillanadi -->
   <article class="prose prose-slate lg:prose-lg dark:prose-invert max-w-none">
     <h1>Markdown sarlavha</h1>
     <p>Bu matn chiroyli satrlar orasi va optimal o'qish kengligiga ega bo'ladi.</p>
   </article>

2. Formalarni normallashtirish: Har xil brauzerlarda <select>, <input type="checkbox"> larni bir xil zamonaviy ko'rinishga keltirish uchun @tailwindcss/forms ishlatiladi.

2.15. Dizayn tokenlari, CSS Variables va Zamonaviy UI Temalash

Zamonaviy professional loyihalarda (shu jumladan Wisar platformasida va shadcn/ui da) ranglar to'g'ridan-to'g'ri #3b5bdb deb qattiq yozilmaydi. Ular CSS Custom Properties (o'zgaruvchilar) va HSL rang modeli orqali boshqariladi:

/* globals.css */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
  --primary-foreground: 210 40% 98%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --border: 217.2 32.6% 17.5%;
}

Tailwind konfiguratsiyasida (tailwind.config.ts) bu o'zgaruvchilar ulanadi:

theme: {
  extend: {
    colors: {
      background: "hsl(var(--background) / <alpha-value>)",
      foreground: "hsl(var(--foreground) / <alpha-value>)",
      primary: {
        DEFAULT: "hsl(var(--primary) / <alpha-value>)",
        foreground: "hsl(var(--primary-foreground) / <alpha-value>)",
      },
      muted: {
        DEFAULT: "hsl(var(--muted) / <alpha-value>)",
        foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
      },
    },
  },
}

Natija: HTML kodingizda shunchaki bg-background text-foreground hover:bg-muted deb yozasiz. Tizim Dark modega o'tishi bilan butun ilovaning ranglari bir millisekundda avtomatik o'zgaradi!

2.16. Tailwind CSS v4: Kelajak arxitekturasi

Tailwind CSS v4 frameworkning butunlay yangi avlodi bo'lib, quyidagi tub o'zgarishlarni olib keldi:

1. JavaScript configsiz (No tailwind.config.js): Barcha konfiguratsiya to'g'ridan-to'g'ri CSS faylda @theme direktivasi orqali amalga oshiriladi:
   css

   @import "tailwindcss";
   
   @theme {
     --color-brand: #3b5bdb;
     --font-display: "Inter", sans-serif;
     --breakpoint-3xl: 1920px;
   }

2. Oxide Engine (Rust asosida): Yangi kompilyator Rust tilida yozilgan bo'lib, eski JavaScript-asosli v3 ga nisbatan 10 barobargacha tezroq ishlaydi va xotirani deyarli yemaydi.
3. Avtomatik aniqlash (Content detection): content: ["..."] massivini yozish shart emas, v4 loyihadagi barcha shablon fayllarni avtomatik skanerlab, classlarni yig'adi.

3. Sintaksis — tez ma'lumotnoma

SPACING:  p-4 px-4 py-2 m-2 mt-4 gap-4
SIZE:     w-full h-screen max-w-lg min-h-screen
FLEX:     flex flex-col justify-center items-center flex-wrap 1.3-bob
GRID:     grid grid-cols-3 col-span-2 gap-4 1.4-bob
TEXT:     text-center text-lg font-bold text-gray-700 leading-relaxed
COLOR:    bg-blue-500 text-white border-red-300
BORDER:   border rounded-lg shadow-md
RESPONSIVE: md:flex lg:grid-cols-4 (1.5, mobile-first)
STATE:    hover:bg-blue-600 focus:ring-2 dark:bg-gray-800
ARBITRARY: w-[137px] bg-[#1da1f2] top-[3px]

4. Batafsil kod namunalari

Misol 1 — Karta (sof Tailwind)

<div class="max-w-sm rounded-xl shadow-md overflow-hidden bg-white">
  <!-- max-w-sm: max kenglik; rounded-xl: yumaloq; shadow-md: soya -->
  <img class="w-full h-48 object-cover" src="rasm.jpg" alt="Tavsif">
  <!-- w-full: to'liq en; h-48: balandlik; object-cover: kesib to'ldirish -->
  <div class="p-6">                          <!-- ichki padding 2.2-bob -->
    <h3 class="text-xl font-bold text-gray-800 mb-2">Sarlavha</h3>
    <p class="text-gray-600 leading-relaxed">Tavsif matni.</p>
    <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition">
      Batafsil
    </button>
  </div>
</div>

Misol 2 — Responsive grid (1.4 + 1.5 birga)

<!-- mobil: 1; sm: 2; lg: 3; xl: 4 ustun — mobile-first 2.5-bob -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 p-6">
  <div class="bg-white rounded-lg shadow p-4">Karta 1</div>
  <div class="bg-white rounded-lg shadow p-4">Karta 2</div>
  <div class="bg-white rounded-lg shadow p-4">Karta 3</div>
  <div class="bg-white rounded-lg shadow p-4">Karta 4</div>
</div>

Misol 3 — Responsive navbar (1.3 + 1.5)

<nav class="flex flex-col md:flex-row md:justify-between md:items-center p-4 bg-white shadow">
  <!-- mobil: ustun; md: gorizontal (2.4, 2.5) -->
  <div class="font-bold text-xl text-blue-600">MySite</div>
  <div class="flex flex-col md:flex-row gap-2 md:gap-6 mt-2 md:mt-0">
    <a href="#" class="text-gray-700 hover:text-blue-600">Bosh</a>
    <a href="#" class="text-gray-700 hover:text-blue-600">Xizmatlar</a>
    <a href="#" class="text-gray-700 hover:text-blue-600">Aloqa</a>
  </div>
</nav>

Misol 4 — Markazlangan hero 1.3-bob + dark mode (2.6)

<section class="flex flex-col justify-center items-center min-h-screen text-center
                bg-gray-50 dark:bg-gray-900 px-4">
  <h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-4">
    Xush kelibsiz
  </h1>
  <p class="text-lg text-gray-600 dark:text-gray-300 max-w-xl mb-6">
    Tailwind bilan tez va chiroyli.
  </p>
  <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg text-lg transition">
    Boshlash
  </button>
</section>

Misol 5 — cva va cn() yordamida Badge (nishon) komponenti

import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const badgeVariants = cva(
  "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
  {
    variants: {
      status: {
        success: "bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-950/50 dark:text-emerald-400 dark:border-emerald-800",
        warning: "bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-950/50 dark:text-amber-400 dark:border-amber-800",
        danger: "bg-rose-50 text-rose-700 border border-rose-200 dark:bg-rose-950/50 dark:text-rose-400 dark:border-rose-800",
        neutral: "bg-gray-100 text-gray-800 border border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700",
      },
    },
    defaultVariants: {
      status: "neutral",
    },
  }
);

interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}

export function Badge({ className, status, children, ...props }: BadgeProps) {
  return (
    <span className={cn(badgeVariants({ status }), className)} {...props}>
      <span className="h-1.5 w-1.5 rounded-full bg-current" />
      {children}
    </span>
  );
}

// Ishlatilishi:
// <Badge status="success">Faol</Badge>
// <Badge status="danger" className="animate-pulse">Xato yuz berdi</Badge>

Misol 6 — @container va group-hover: bilan interaktiv blog post kartasi

<div class="@container max-w-2xl mx-auto p-4">
  <article class="group relative flex flex-col @md:flex-row items-center gap-6 p-6 rounded-2xl bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 shadow-sm hover:shadow-xl transition-all duration-300">
    <div class="w-full @md:w-48 h-48 rounded-xl overflow-hidden bg-gray-100 dark:bg-gray-700 flex-shrink-0">
      <img
        src="blog-cover.jpg"
        alt="Post rasmi"
        class="w-full h-full object-cover group-hover:scale-105 transition duration-500"
      />
    </div>
    
    <div class="flex-1 flex flex-col justify-between">
      <div>
        <span class="text-xs font-semibold uppercase tracking-wider text-blue-600 dark:text-blue-400">
          Frontend
        </span>
        <h2 class="mt-2 text-xl @lg:text-2xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">
          Tailwind CSS v4 va zamonaviy UI arxitekturasi
        </h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
          Endi JavaScript konfiguratsiyasiga hojat yo'q: toza CSS, Rust dvigateli va maksimal unumdorlik.
        </p>
      </div>

      <div class="mt-4 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
        <span>5 daqiqa o'qish</span>
        <span class="inline-flex items-center gap-1 font-semibold text-blue-600 group-hover:translate-x-1 transition duration-200">
          O'qish →
        </span>
      </div>
    </div>
  </article>
</div>

5. To'g'ri va noto'g'ri holatlar

1) Tailwind'ni an'anaviy CSS bilan aralashtirib chalkashtirish

<!-- ❌ ham Tailwind, ham qo'lda CSS — chalkash, konfliktli -->
<div class="flex" style="display: block">

<!-- ✅ bitta yondashuvni tanlang; Tailwind loyihasida Tailwind bilan ishlang -->

2) @apply ni haddan ko'p ishlatish

/* ❌ hamma narsani @apply qilib, yana CSS faylga qaytish 2.8-bob */
.karta { @apply ...; } .tugma { @apply ...; } /* ... */

/* ✅ takrorlanishni KOMPONENT bilan hal qiling (React — 11) */

3) "Sehrli raqamlar" (arbitrary'ni suiiste'mol)

<!-- ❌ shkalani buzib, har joyda har xil qiymat -->
<div class="p-[13px] mt-[7px] mb-[19px]">

<!-- ✅ shkaladan foydalaning (izchillik — 2.2) -->
<div class="p-3 mt-2 mb-4">

4) Mobile-first'ni teskari tushunish

<!-- ❌ md: ni "faqat md" deb o'ylash -->
<!-- md:flex = "≥768px da flex"; base (prefikssiz) = barcha ekran 2.5-bob -->

<!-- ✅ base = mobil; prefiks = o'sha breakpointdan boshlab -->
<div class="block md:flex">

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Class'lar ishlamayapti (uslub yo'q)

Sababi: (a) Tailwind to'g'ri ulanmagan (@import "tailwindcss" yo'q); (b) build ishlamayapti; (c) v3'da content yo'lida HTML fayl ko'rsatilmagan (purge fayllarni topmaydi). Yechimi: o'rnatish va ulashni tekshiring 2.7-bob; dev server (npm run dev) ishlayotganini; v3 bo'lsa tailwind.config.jsdagi contentni.

Xato 2 — Ishlab chiqarishda (production) class'lar yo'qoldi

Sababi: Tailwind ishlatilmagan class'larni olib tashlaydi; agar class nomi dinamik (JS bilan) yig'ilsa (bg-${rang}-500), Tailwind uni topmay, o'chirib yuboradi. Yechimi: to'liq class nomini yozing (rang === 'red' ? 'bg-red-500' : 'bg-blue-500'), bo'laklab emas; yoki safelist ishlating.

Xato 3 — IntelliSense (avto-to'ldirish) ishlamayapti

Sababi: "Tailwind CSS IntelliSense" kengaytmasi yo'q 0.7-bob. Yechimi: VS Code'da o'rnating; loyihada Tailwind config/CSS bo'lsin.

Xato 4 — HTML class'lar tartibsiz, o'qishsiz

Sababi: class'lar tasodifiy tartibda. Yechimi: "prettier-plugin-tailwindcss" o'rnating — class'larni avtomatik, izchil tartiblaydi 15.3-bob.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• CSS/SCSS (1.2, 1.6): Tailwind — muqobil yondashuv; aslida shu CSS xususiyatlari utility ko'rinishida.
• Flexbox/Grid (1.3, 1.4): flex, grid-cols-* — to'g'ridan-to'g'ri class.
• Responsive 1.5-bob: sm:/md:/lg: — mobile-first media query'lar.
• React/Next (11, 13): Tailwind + komponentlar — eng mashhur kombinatsiya; takrorlanishni komponent hal qiladi.
• shadcn/ui 12.6-bob: Tailwind ustiga qurilgan komponent kutubxonasi.
• Build (0.7, 11.3): Vite/PostCSS orqali; ishlatilmagan CSS olib tashlanadi.
• Dark mode 1.5-bob: dark: varianti.

8. Eng yaxshi amaliyotlar (best practices)

• Shkalada qoling (p-4, text-lg) — arbitrary (p-[13px])ni faqat zarurda (2.2, 2.9).
• Takrorlanishni komponent bilan hal qiling (React — 11), @apply bilan emas 2.8-bob.
• Mobile-first yozing — base mobil, prefiks kattaga 2.5-bob.
• IntelliSense + Prettier plugin o'rnating — tezlik va tartib 2.9-bob.
• Dinamik class nomini bo'laklab yasamang — to'liq yozing (purge — 6-bo'lim).
• Mavzuni @theme/config'da markazlashtiring (brand rang, breakpoint) 2.7-bob.
• Bitta yondashuvni tanlang — Tailwind yoki an'anaviy CSS, aralashtirmang.
• dark: bilan dark mode'ni boshidan o'ylang 1.5-bob.

9. Amaliy loyiha: "Tailwind bilan To'liq Landing Page"

1.5'dagi landing page'ni endi Tailwind bilan qayta quring — ikki yondashuvni (SCSS vs Tailwind) o'z tajribangizda solishtirasiz.

Maqsad

Utility-first yondashuvni amalda his qilish; responsive, dark-mode-li, izchil dizaynli sahifani CSS fayl deyarli yozmay qurish.

Talablar (requirements)

1. O'rnatish: Tailwind'ni loyihaga ulang (Vite yoki CDN bilan tezkor sinov — 2.7). VS Code IntelliSense kengaytmasi.
2. Responsive navbar: mobil ustun, md: gorizontal (Misol 3).
3. Hero bo'lim: markazlangan (flex justify-center items-center min-h-screen), fluid sarlavha (text-4xl md:text-6xl) (Misol 4).
4. Karta galereyasi: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 (Misol 2). Kamida 6 karta.
5. Tugmalar: hover:, transition, rounded, shadow bilan kamida 2 xil.
6. Dark mode: dark: variantlari bilan (Misol 4).
7. Faqat shkalada qoling — arbitrary qiymatlarni ishlatmang (yoki minimal).
8. (Bonus) @theme/config'da brand rang qo'shing va bg-brand sifatida ishlating.

Maslahatlar (hint)

• Tezkor sinov uchun CDN: <script src="https://cdn.tailwindcss.com"></script> (faqat o'rganish uchun; production'da build).
• IntelliSense bilan class'larni avto-to'ldiring — minglab class'ni yodlamang.
• Mobile-first: avval prefikssiz (mobil), keyin md:/lg: qo'shing.
• object-cover — rasmni nisbatni buzmasdan kesib to'ldiradi.
• Dark mode'ni sinash uchun OS qora rejimini yoqing yoki class="dark"ni <html>ga qo'ying.

"Tayyor" mezonlari (acceptance criteria)

• Tailwind ulangan, IntelliSense ishlaydi.
• Navbar mobil/desktop'da har xil (md: prefiks).
• Hero markazlangan, fluid sarlavha.
• Galereya: 1 → 2 → 3 ustun (responsive).
• Tugmalarda hover: + transition.
• Dark mode dark: bilan ishlaydi.
• Asosan shkala ishlatilgan (arbitrary minimal).
• Hech bir ekranda gorizontal skroll yo'q.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda zamonaviy stil yozishning ikkinchi yo'lini — **Tailwind CSS (utility-first)**ni o'rgandik:

• Tailwind — utility-first: kichik, bitta vazifali class'lar (flex, p-4, bg-blue-500)ni HTML'da birlashtirib dizayn yasaysiz.
• Izchil shkala (spacing p-1..p-12, rang 50..950) — sehrli raqamlarni tugatadi.
• Layout (flex, grid-cols-* — 1.3/1.4), responsive (md:, lg: — mobile-first, 1.5), holatlar (hover:, dark:) — hammasi prefiks bilan, stacklanadi.
• O'rnatish: @import "tailwindcss" + @theme (v4) yoki config (v3). @applyni kam ishlating; takrorlanishni komponent hal qiladi.
• "Iflos HTML" — komponent, IntelliSense va Prettier plugin bilan hal qilinadi.

Keyingi bob — 1.8-bob: Figma asoslari (dizayndan kodga). Hozirgacha kodni yozdik; lekin real ishda avval dizayn (Figma'da) tayyorlanadi, keyin dasturchi uni kodga aylantiradi. Figma'ni o'qish, o'lcham/rang/shriftni olish va dizaynni aniq kodga ko'chirish — frontend dasturchining kunlik ko'nikmasi.

Foydalanilgan rasmiy/ishonchli manbalar

• tailwindcss.com — Styling with utility classes, responsive design, theme variables, functions & directives
• tailwindcss.com — dark mode, hover/focus/state variants, configuration (@theme)
• MDN Web Docs — utility CSS xususiyatlari (taglar ortidagi asl CSS)