1.7-bob: Tailwind CSS — utility-first

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: class'larni avtomatik tartiblaydi.
• Arbitrary qiymatlar: shkalada yo'q qiymat kerak bo'lsa — w-[137px], bg-[#1da1f2] (kvadrat qavs bilan).

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>

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 tanla; Tailwind loyihasida Tailwind bilan ishla -->

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 qil (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 foydalan (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'rnat; loyihada Tailwind config/CSS bo'lsin.

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

Sababi: class'lar tasodifiy tartibda. Yechimi: "prettier-plugin-tailwindcss" o'rnat — 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 ishlat; 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)