Tailwind CSS 1: utility-first falsafasi va o'rnatish

Qisqacha: Tailwind CSS — minglab kichik, bitta vazifali class'lar to'plami: stil CSS faylda emas, HTML'da yoziladi — class="p-4 rounded-lg border-2 border-green-700". Bu yondashuv utility-first deyiladi. Tailwind v4 (hozir 4.3.3) bitta qator bilan ishga tushadi: CSS faylga @import "tailwindcss";, terminalda npx @tailwindcss/cli -i kirish.css -o chiqish.css. U HTML fayllaringizni o'qib, faqat ishlatilgan class'larning CSS'ini yasaydi. Masofa 0.25rem qadamli shkaladan (p-4 = 1rem), ranglar 50–950 darajali oklch() palitradan olinadi.

Bu darsda

• Utility-first va semantik CSS farqini bitta karta misolida tushuntira olasiz.
• Tailwind v4'ni CLI orqali o'rnatib, haqiqiy chiqish faylini o'qiy olasiz.
• Tailwind qaysi fayllarni "o'qishini" va nega class nomini bo'laklab yozish mumkin emasligini bilasiz.
• Masofa, rang, layout va tipografiya class'larini yozib, ularning ortidagi CSS'ni ayta olasiz.
• Preflight nimani o'zgartirishini va Tailwind qachon kerakligini bilasiz.

Oldin bilishingiz kerak: CSS metodologiyalari, Mobile-first, CSS freymvorklar, npm'ga birinchi qadam.

1. Nega bu kerak?

CSS metodologiyalari darsidagi Sherzodni eslang: u narxni qizil qilmoqchi edi, ertasiga butun menyudagi narxlar qizarib ketdi. U darsdan uchta og'riqni olib chiqdik:

1. Nom topish qiyin. .taom-karta__narx, .aksiya-bloki__sarlavha — har element uchun ma'noli nom o'ylash kerak.
2. CSS fayli faqat o'sadi. Eski class'ni o'chirishga qo'rqasiz: "boshqa joyda ishlatilgan bo'lsa-chi?"
3. Ikki fayl orasida yugurish. HTML'da nomni ko'rasiz, stilini topish uchun CSS faylini ochasiz.

CSS freymvorklar darsida Bootstrap'ning utility'larini ko'rdik: mt-3, d-flex. Ular Bootstrap'da yordamchi edi. Savol: agar hamma stil shunday kichik class'lar bilan yozilsa-chi?

Hayotiy o'xshatish: haykaltarosh yog'ochdan bitta ot o'yadi — chiroyli, lekin boshqa narsaga aylantirib bo'lmaydi. Lego'da esa tayyor g'ishtchalar bor: ulardan ot ham, uy ham, mashina ham yig'iladi. G'ishtchalar soni cheklangan, lekin birikmalari cheksiz. Tailwind — CSS uchun Lego: p-4, rounded-lg, text-green-700 — har biri bitta g'ishtcha.

04-qismda "Tailwind kabi vositalar div va span larga ko'p klass beradi: class="p-4 rounded shadow"" degan gapni o'qigan edingiz. Bugun o'sha yozuvning ichiga kiramiz.

2. Utility-first va semantik CSS

2.1 Bitta karta — ikki yo'l

«Bahor» taom kartasi. Avval tanish, semantik yo'l: class nomi — "bu nima" (taom-karta, narx), ko'rinish — CSS faylda.

<style>
  body { font-family: system-ui, sans-serif; }
  .taom-karta {
    max-width: 20rem;
    padding: 1rem;
    border: 2px solid #2f6b3a;
    border-radius: 0.5rem;
  }
  .taom-karta h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
  }
  .narx {
    margin: 0;
    color: #b4461a;
    font-weight: bold;
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p class="narx">35 000 so'm</p>
</article>

Endi xuddi shu kartani utility-first yo'l bilan. Class nomi — "bu qanday ko'rinadi". CSS fayl yo'q; natija oynasida Tailwind'ning brauzer versiyasi ulangan (pastda tushuntiramiz):

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<article class="m-2 max-w-xs rounded-lg border-2 border-green-700
  p-4 font-sans">
  <h3 class="mb-2 text-xl">Osh</h3>
  <p class="font-bold text-orange-700">35 000 so'm</p>
</article>

Nimaga qarang: ikkala karta deyarli bir xil — yashil ramka, yumaloq burchak, qizg'ish qalin narx. Ikkinchisida bironta ham CSS qoida yozilmadi. Farqlar ham bor: Tailwind'ning green-700 va orange-700 ranglari «Bahor»ning #2f6b3a va #b4461a idan biroz boshqa — bu Tailwind'ning standart palitrasi. O'z ranglarimizni Tailwind CSS 3 darsida qo'shamiz. Yana bir farq: ikkinchi kartada "Osh" qalin emas. Tailwind'ning reseti sarlavhalarni oddiy matnga aylantiradi — bu haqda "Preflight" bo'limida.

Class'larni o'qiymiz:

2.2 "Bu inline stil-ku!"

Birinchi qarashda Tailwind style="padding: 1rem" ga o'xshaydi. Lekin uchta muhim farq bor:

1. Cheklangan tanlov. style ga istalgan son yoziladi: 13px, 17px, 15.5px. Tailwind'da masofa — shkaladan: p-3, p-4, p-5. Bu — Dizayn tokenlari darsidagi g'oya: cheklov interfeysni tekis qiladi.
2. Holat va ekran. style ichida :hover yoki media query yozib bo'lmaydi. Tailwind'da — hover:bg-green-50, md:grid-cols-2 (Tailwind CSS 2).
3. Oddiy CSS fayl. Tailwind oxirida haqiqiy .css fayl yasaydi va u <link> bilan ulanadi. «Bahor»dagi qat'iy CSP inline stilni to'sadi, Tailwind class'larini esa to'smaydi.

2.3 Tanqid va javob

Tailwind'ni hamma ham yaxshi ko'rmaydi. Eng ko'p aytiladigan e'tirozlar:

• "HTML iflos bo'ladi." Rost: bitta tugmada o'nta class bo'lishi mumkin. Javob: real loyihada tugma bir marta komponent sifatida yoziladi va qayta ishlatiladi (Tailwind CSS 4: komponent naqshlari).
• "Semantik nom yo'qoladi." class="taom-karta" HTML'da "bu nima" ni aytadi. Tailwind'da buni teg (article), atribut yoki komponent nomi aytadi.
• "Yana bir narsa o'rganish kerak." Rost. Lekin class nomlari CSS xususiyatlariga yaqin: flex — display: flex, items-center — align-items: center. CSS'ni bilgan odam ularni tez o'qiydi.

Yutuqlari: nom o'ylash yo'q, CSS fayl deyarli o'smaydi (p-4 butun saytda bitta qoida), class'ni o'chirsangiz — faqat shu element o'zgaradi. CSS-in-JS darsidagi atomar CSS g'oyasi aynan shu — faqat siz class'larni o'zingiz yozasiz.

Tekshirib ko'ring: Saytda 200 ta element p-4 ishlatadi. Chiqish CSS faylida .p-4 qoidasi necha marta bo'ladi? Semantik CSS'da 200 xil komponent o'z padding: 1rem ini yozsa-chi?

3. O'rnatish

3.1 Brauzer versiyasi — faqat sinash uchun

Yuqoridagi natijada Tailwind shunday ulandi:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>

Bu skript sahifadagi class'larni o'qiydi va CSS'ni brauzerning o'zida yasaydi. Rasmiy hujjat uni "Play CDN" deb ataydi va aniq yozadi: faqat ishlab chiqish uchun, production (haqiqiy sayt) uchun emas. Sabab — CSS-in-JS darsidagi runtime narxi: har tashrifchi Tailwind dvigatelini yuklaydi va uning brauzeri CSS'ni har safar qayta yasaydi.

Bizning darslarda natija oynalari aynan shu yo'l bilan ishlaydi — tez sinash uchun ideal. Haqiqiy loyihada esa CLI kerak.

3.2 CLI bilan: to'rt qadam

CLI (command-line interface) — terminalda ishlaydigan dastur. Mashq papkasi kurs/mashqlar/06/tailwind/ da (npm — 16-qismda to'liq, hozir buyruqlarni aynan takrorlang):

1. O'rnatish:

npm init -y
npm install tailwindcss @tailwindcss/cli

Ikki paket: tailwindcss — dvigatelning o'zi, @tailwindcss/cli — uni terminaldan ishga tushiradigan buyruq. Bizda ikkalasi 4.3.3 versiyada o'rnatildi (package.json da "^4.3.3").

2. Kirish CSS fayli — src/kirish.css:

@import "tailwindcss";

Bitta qator. Tailwind v3 va undan oldingi versiyalarda tailwind.config.js sozlama fayli va uchta @tailwind ko'rsatmasi kerak edi — eski maqolalarda ko'rasiz. v4 da sozlama ham CSS faylda (Tailwind CSS 3).

3. Kompilyatsiya:

npx @tailwindcss/cli -i ./src/kirish.css -o ./dist/chiqish.css

-i — kirish (input) fayli, -o — chiqish (output). Terminalda:

≈ tailwindcss v4.3.3

Done in 45ms

"45 millisekundda tayyor". Ish paytida --watch bayrog'ini qo'shing — Sass/SCSS 1 dagi kuzatuvchi rejim kabi: fayl saqlanganda CSS o'zi qayta yasaladi. Saytga yuklashdan oldin — --minify (siqish).

4. HTML'da ulash — index.html ning head ida, oddiy CSS fayl kabi:

<link rel="stylesheet" href="dist/chiqish.css">

Uzun buyruqlarni package.json skriptlariga yozish odatiy (Sass/SCSS 1 darsidagidek):

{
  "scripts": {
    "css": "tailwindcss -i src/kirish.css -o dist/chiqish.css -w",
    "build": "tailwindcss -i src/kirish.css -o dist/chiqish.css -m"
  }
}

-w va -m — --watch va --minify ning qisqa shakli (CLI yordamida shunday yozilgan). Skript ichida npx @tailwindcss/cli o'rniga qisqa tailwindcss yetarli — paket shu nomli buyruqni node_modules/.bin ga qo'yadi, npm skriptlari uni o'zi topadi.

3.3 Vite bilan

Real loyihalarning ko'pi Vite (tez build vositasi, Vite I — 16-qism) ishlatadi. Unda CLI o'rniga @tailwindcss/vite plagini ulanadi — natija bir xil, faqat CSS'ni Vite yasaydi. Hozir bilish shart emas: g'oya o'sha — @import "tailwindcss"; va class'lar.

Tekshirib ko'ring: Nega brauzer versiyasi (Play CDN) haqiqiy saytga yaramaydi, CLI esa yaraydi — natija ikkalasida ham bir xil ko'rinsa ham?

4. Chiqish faylida nima bor

4.1 Haqiqiy fayl

Birinchi natijadagi kartani index.html ga yozib, CLI'dan o'tkazdik. dist/chiqish.css — 212 qator, 5 857 bayt (--minify bilan 5 159). Uning tuzilishi (qisqartirilgan):

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --color-orange-700: oklch(55.3% 0.195 38.402);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --spacing: 0.25rem;
    --text-xl: 1.25rem;
    --radius-lg: 0.5rem;
    ...
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  ...
}
@layer utilities {
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .text-orange-700 {
    color: var(--color-orange-700);
  }
  ...
}

Birinchi @layer properties; qatori — Tailwind'ning ichki xizmat qatlami. Fayl oxirida unga --tw-shadow kabi ichki o'zgaruvchilarning boshlang'ich qiymatlari yoziladi — @property ni to'liq bilmaydigan eski brauzerlar uchun zaxira. Unga tegmaysiz. Qolgan to'rtta narsa tanish:

• @layer theme, base, components, utilities — Kaskadni boshqarish darsidagi qatlamlar. utilities oxirida — shuning uchun utility har doim yutadi, !important siz. Bootstrap'dagi !important li utility'lar bilan solishtiring (CSS freymvorklar).
• theme — tokenlar, CSS o'zgaruvchilari sifatida (Dizayn tokenlari). Faqat ishlatilgan tokenlar: palitrada 200 dan ortiq rang bor, faylga esa ikkitasi tushdi.
• base — Preflight, Tailwind'ning reseti (pastda).
• utilities — faqat HTML'da uchragan class'lar. Tartibi — HTML'dagi emas, Tailwind'ning o'z tartibi.

4.2 Tailwind ichida — Lightning CSS

PostCSS va Lightning CSS darsida aytgan edik: Tailwind v4 o'z ichida Lightning CSS'ni ishlatadi. Rasmiy hujjatga ko'ra, u prefikslarni qo'shadi va native nesting'ni (Native CSS nesting) qayta ishlaydi. Shu sabab hujjat Tailwind'ni Sass bilan birga ishlatmaslikni aytadi: "Tailwind'ning o'zini preprotsessor deb biling".

Brauzer talabi: Tailwind v4 Chrome 111, Safari 16.4 va Firefox 128 uchun mo'ljallangan (hammasi 2023–2024-yillar versiyalari).

5. Tailwind qaysi class'ni yasaydi

5.1 Fayllarni matn sifatida o'qish

Tailwind hech qanday sozlamasiz HTML'dagi class'larni topdi. Qanday? Rasmiy hujjat bo'yicha u loyiha fayllarini oddiy matn sifatida o'qiydi: class nomiga o'xshagan har so'zni olib, undan CSS yasashga urinadi. Qila olmasa — jimgina tashlab yuboradi.

flowchart LR
  A["HTML va boshqa<br/>fayllar"] --> B["So'zlarga<br/>bo'linadi"]
  B --> C{"Tailwind<br/>class'imi?"}
  C -->|Ha| D["chiqish.css ga<br/>qoida"]
  C -->|Yo'q| E["Jim tashlanadi"]

Nimaga qarang: Tailwind HTML'ni tushunmaydi — class atributi ichidami yoki oddiy matndami, farqlamaydi. U faqat so'zlarni ko'radi.

Biz buni sinab ko'rdik. index.html:

<p>Tugma rangi bg-red-500 bo'lsin</p>
<p class="text-green-700">x</p>
<p class="text-gren-700">y</p>

Chiqish faylida .bg-red-500 paydo bo'ldi — garchi u class emas, oddiy matn bo'lsa ham. .text-green-700 — bor. .text-gren-700 (xato yozilgan) — yo'q, hech qanday xabar ham chiqmadi.

Ikki xulosa. Birinchi: ortiqcha qoida zarar qilmaydi, faqat faylga bir-ikki qator qo'shadi. Ikkinchi, muhimrog'i: xato yozilgan class haqida Tailwind sizga aytmaydi. Element shunchaki bezalmaydi.

Rasmiy hujjat bo'yicha avtomatik o'qishdan tashqarida qoladi:

• .gitignore faylida ko'rsatilgan fayllar (Git'ni 07-qismda o'rganasiz);
• node_modules papkasi;
• rasm, video, arxiv kabi ikkilik fayllar;
• CSS fayllar va paket menejerining lock fayllari (package-lock.json).

Boshqa joydagi faylni qo'shish kerak bo'lsa — @source (Tailwind CSS 3).

5.2 Class nomini bo'laklamang

Matn sifatida o'qish bitta qat'iy qoida keltirib chiqaradi: class nomi kodda to'liq yozilishi kerak. Rasmiy hujjatdagi misol. Jingalak qavslar — shablon tili: qiymatni server qo'yadi. Bu yozuvni hozir bilish shart emas:

<div class="text-{{ xato ? 'red' : 'green' }}-600"></div>

Tailwind faylda text-, red, green, -600 bo'laklarini ko'radi, lekin text-red-600 degan so'zni hech qayerda ko'rmaydi — CSS yasalmaydi. To'g'risi — ikkala to'liq nomni yozish:

<div class="{{ xato ? 'text-red-600' : 'text-green-600' }}"></div>

Keyinchalik JavaScript'da ham xuddi shu qoida: `bg-${rang}-600` kabi yig'ilgan nom ishlamaydi.

Tekshirib ko'ring: Siz class="p-4" ni class="p-5" ga o'zgartirdingiz, sahifani yangiladingiz — oraliq o'zgarmadi. CLI --watch siz, bir marta ishga tushirilgan edi. Nega?

6. Shkalalar

6.1 Masofa: --spacing × son

Tailwind'da bitta asosiy o'lchov bor: --spacing: 0.25rem (4 piksel). Masofa class'idagi son — shu o'lchovning nechta ekani:

Chiqish faylida bu shunday yozilgan: .p-4 { padding: calc(var(--spacing) * 4); }. Son ixtiyoriy butun son bo'lishi mumkin — p-13 ham ishlaydi. Bu Spacing tizimi darsida ko'radigan 4/8 piksellik to'r g'oyasi.

Yo'nalish harflari: p — hamma tomon, px — chap-o'ng, py — tepa-past, pt/pb — tepa/past. m — margin uchun xuddi shunday. mx-auto esa margin-inline: auto yasaydi — Mantiqiy xususiyatlar darsidagi mantiqiy xususiyat. gap-4 — gap: calc(var(--spacing) * 4).

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<div class="flex flex-wrap items-end gap-4 p-4 font-sans">
  <div class="bg-green-100 p-1">p-1</div>
  <div class="bg-green-100 p-2">p-2</div>
  <div class="bg-green-100 p-4">p-4</div>
  <div class="bg-green-100 p-8">p-8</div>
</div>

Nimaga qarang: to'rtta och yashil quti, har birining matni bir xil, lekin atrofidagi bo'sh joy 4, 8, 16 va 32 piksel — har safar ikki baravar. Qutilar orasidagi masofa hammasida bir xil — gap-4, 16 piksel.

6.2 Ranglar: 50 dan 950 gacha

Har rang oilasi (red, orange, green, gray va boshqalar) 11 darajaga ega: 50, 100, 200 … 900, 950. Kichik son — och, katta son — to'q. Qiymatlar oklch() da (Ranglar 2): --color-green-700: oklch(52.7% 0.154 150.069).

Rang class'ning qayeriga tushishini prefiks aytadi: text-green-700 — matn, bg-green-100 — fon, border-green-700 — chegara.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<div class="flex flex-wrap font-sans text-xs">
  <div class="bg-green-50 p-3">50</div>
  <div class="bg-green-100 p-3">100</div>
  <div class="bg-green-300 p-3">300</div>
  <div class="bg-green-500 p-3">500</div>
  <div class="bg-green-700 p-3 text-white">700</div>
  <div class="bg-green-900 p-3 text-white">900</div>
  <div class="bg-green-950 p-3 text-white">950</div>
</div>

Nimaga qarang: och yashildan deyarli qora-yashilgacha tekis o'tish. 700 dan boshlab matn oq — fonda o'qilishi uchun. Kontrastni baribir o'lchang (Kontrast): daraja soni kafolat bermaydi.

6.3 Layout va tipografiya

Layout class'lari CSS nomlarining qisqa shakli — Flexbox va Grid ni bilganingiz uchun darhol o'qiysiz:

w-full — width: 100%, max-w-md — max-width: 28rem.

Tipografiya:

Har text-* o'lchami o'z qator balandligini ham beradi: text-xl uchun calc(1.75 / 1.25), ya'ni 1.4. leading-relaxed 1.625-bob — line-height ni alohida, tracking-wide (0.025em) — letter-spacing ni o'zgartiradi. Qator balandligi darsidagi birliksiz qiymatlar.

Transition va timing funksiyalari darsida transition duration-200 ease-out kabi Tailwind class'larini eslatgan edik. Endi ularni o'qiysiz: transition — qaysi xususiyatlar silliq o'zgarishi (rang, fon, soya, transform va boshqalar), duration-200 — transition-duration: 200ms, ease-out — cubic-bezier(0, 0, 0.2, 1).

«Bahor» sarlavhasini shunday yig'amiz:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<header class="flex items-center justify-between border-b-2
  border-green-700 p-4 font-sans">
  <p class="text-xl font-bold text-green-700">Choyxona «Bahor»</p>
  <nav aria-label="Asosiy menyu">
    <ul class="flex gap-4" role="list">
      <li><a href="menyu/">Menyu</a></li>
      <li><a href="bron/">Bron</a></li>
    </ul>
  </nav>
</header>

Nimaga qarang: nom chapda, menyu o'ngda — justify-between. Menyu havolalari yonma-yon, orasida 16 piksel. Havolalarning tagida chiziq yo'q va rangi matn rangida — buni biz yozmadik, bu Preflight ishi.

7. Preflight

Preflight — Tailwind'ning base qatlamidagi reseti. Uni CSS reset va normalize darsida qisqa ko'rgan edik: rasmiy hujjat bo'yicha u modern-normalize ustiga qurilgan, lekin ancha qat'iyroq. Chiqish faylimizdan haqiqiy qatorlar:

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol, ul, menu {
  list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

Natijalardagi h3 shuning uchun oddiy matndek chiqdi — sarlavha kattaligi va qalinligini text-xl, font-bold bilan o'zingiz berasiz. Havolalar color: inherit va text-decoration: inherit oladi.

Ro'yxatdan nuqtalar olib tashlangani bilan bog'liq muhim detal. Ro'yxatlar va jadvallar stili darsida ko'rganingizdek, Safari'da list-style: none bo'lgan ro'yxatni VoiceOver ro'yxat deb e'lon qilmasligi mumkin. Shuning uchun sarlavha misolidagi ul da role="list" bor — Tailwind loyihalarida navigatsiya ro'yxatlariga uni qo'shib qo'yish odatiy.

8. Ko'p uchraydigan xatolar

8.1 tailwindcss o'rnatilmagan

Faqat CLI bilan ishga tushirdingiz: npx @tailwindcss/cli -i src/kirish.css -o dist/chiqish.css. Biz sinab ko'rdik — natija:

Error: Can't resolve 'tailwindcss' in 'C:\Users\...\src'

Tarjimasi: "Xato: src papkasida tailwindcss topilmadi". npx CLI'ni vaqtincha yuklab oldi, lekin @import "tailwindcss" qatori loyihadagi tailwindcss paketini qidiradi — u yo'q. Tuzatish: ikkala paketni o'rnating: npm install tailwindcss @tailwindcss/cli.

8.2 CSS eskirib qoldi

Yangi class qo'shdingiz, ta'sir yo'q. Tuzatish: --watch rejimi yoqilganmi? Yoqilmagan bo'lsa — buyruqni qayta ishga tushiring.

8.3 Xato yozilgan class

text-gren-700, pading-4 — Tailwind jim. Tuzatish: DevTools'da elementni tanlang: Styles panelida class'ga mos qoida yo'q bo'lsa — nom xato. VS Code uchun rasmiy "Tailwind CSS IntelliSense" kengaytmasi class'larni taklif qiladi va xatoni ko'rsatadi.

8.4 Yig'ilgan class nomi

text-{{ rang }}-600 — CSS yasalmaydi. Tuzatish: to'liq nomlar ("Class nomini bo'laklamang" bo'limi).

8.5 Play CDN saytda qoldi

Sinash uchun ulangan @tailwindcss/browser skripti production'ga chiqib ketdi. Har tashrifchi dvigatelni yuklaydi. Tuzatish: CLI (yoki Vite plagini) bilan .css yasab, link bilan ulang.

9. Mashqlar

1-mashq (oson): class'dan CSS'ga

Quyidagi class'lar qanday CSS beradi? Tailwind'siz, qo'lda yozing: p-6, mt-2, gap-3, text-lg, bg-orange-50, rounded-lg, flex, items-center.

Ishora: masofa — --spacing (0.25rem) × son; text-lg — 1.125rem.

2-mashq (o'rta): aksiya kartasi

Tailwind class'lari bilan aksiya bloki yasang: och to'q sariq fon (orange-50), chapda to'q sariq qalin chiziq (4 piksel, orange-700), ichida 16 piksel bo'sh joy. Sarlavha "Bugun ko'k choy — 5 000 so'm!" katta va qalin, ostida kichik kulrang matn "Faqat 23:00 gacha". Mashq papkasida CLI bilan, yoki tez sinash uchun sahifaga Play CDN skriptini ulab bajaring.

Ishora: chap chegara — border-l-4, rangi — border-orange-700. Kichik matn — text-sm, kulrang — text-gray-600.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<aside class="border-l-4 border-orange-700 bg-orange-50 p-4
  font-sans">
  <p class="text-xl font-bold">Bugun ko'k choy — 5 000 so'm!</p>
  <p class="mt-1 text-sm text-gray-600">Faqat 23:00 gacha</p>
</aside>

3-mashq (qiyin): chiqish faylini kuzating

kurs/mashqlar/06/tailwind/ da CLI bilan loyiha yarating (4 qadam). index.html da faqat 2-mashqdagi aksiya bloki bo'lsin. Kompilyatsiya qiling va dist/chiqish.css dagi @layer utilities blokida nechta class borligini sanang. Keyin HTML'ga p-4 ishlatadigan yana uchta element qo'shing, qayta kompilyatsiya qiling. Utility'lar soni o'zgardimi? Fayl hajmi-chi?

Ishora: "Chiqish faylida nima bor" bo'limi — faqat ishlatilgan class'lar yasaladi.

4-mashq: Portfolio qadami — loyiha kartasi Tailwind'da

Portfolio'ni Tailwind'ga ko'chirmaymiz: unda allaqachon tokenlar, qatlamlar va subgrid bor. Maqsad — ikki yondashuvni o'z kodingizda solishtirish.

1. tajriba/tailwind/ papkasini yarating (u sayt/ dan tashqarida). Terminalda shu papkaga o'ting (cd tajriba/tailwind) va 4 qadamni bajaring: npm init -y, o'rnatish, src/kirish.css, kompilyatsiya.
2. tajriba/tailwind/index.html da loyihalar sahifangizdagi bitta loyiha kartasini Tailwind class'lari bilan qayta yozing: chegara, burchak, ichki bo'sh joy, sarlavha, tavsif va "Saytni ochish" havolasi.
3. Kartaga tegishli CSS hajmini solishtiring: dist/chiqish.css (Preflight bilan) va sayt/assets/css/komponentlar.css dagi karta qoidalari.

Ishora: nega cd tajriba/tailwind? Tailwind fayllarni joriy papkadan boshlab o'qiydi. Portfolio ildizidan ishga tushirsangiz, sayt/ dagi HTML matnidagi so'zlar (masalan, "grid" yoki "block") ham class deb yasalishi mumkin — "Fayllarni matn sifatida o'qish" bo'limini eslang.

<!doctype html>
<html lang="uz">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tailwind tajribasi</title>
  <link rel="stylesheet" href="dist/chiqish.css">
</head>
<body class="bg-gray-50 p-4 font-sans text-gray-900">
  <article class="max-w-sm rounded-lg border border-gray-300
    bg-white p-4 shadow-sm">
    <h2 class="text-xl font-bold text-green-800">
      Choyxona «Bahor» sayti
    </h2>
    <p class="mt-2 text-gray-700">HTML va CSS bilan qurilgan sayt.</p>
    <a class="mt-4 inline-block font-bold text-green-800 underline"
      href="#">Saytni ochish</a>
  </article>
</body>
</html>

10. Real ishda

• Zamonaviy frontend. Tailwind React va Next.js loyihalarida eng ko'p tanlanadigan CSS yo'llaridan biri. Next.js'ning yangi loyiha yaratish vositasi uni o'rnatishni taklif qiladi (Next.js'da stil va tema).
• Komponent kutubxonalar. shadcn/ui, daisyUI kabi mashhur kutubxonalar Tailwind ustida qurilgan (Tailwind CSS 5).
• Vakansiyalar. Frontend e'lonlarida "Tailwind CSS" tez-tez so'raladi. Lekin baribir CSS'ning o'zini bilish asos — Tailwind class'i ortida doim CSS xususiyati turadi.
• Intervyuda: "Utility-first nima va qachon yaxshi?", "Tailwind qaysi class'ni yasashni qanday biladi?", "Nega bg-${rang}-500 ishlamaydi?" — endi javob bera olasiz.

Xulosa

• Utility-first — stil HTML'da, bitta vazifali class'lar bilan: nom o'ylash yo'q, CSS deyarli o'smaydi.
• Tailwind v4 (4.3.3): npm install tailwindcss @tailwindcss/cli, @import "tailwindcss";, npx @tailwindcss/cli -i … -o … --watch. Play CDN — faqat sinash uchun.
• Tailwind fayllarni oddiy matn sifatida o'qiydi va faqat uchragan class'larni yasaydi; class nomi to'liq yozilishi shart.
• Masofa — --spacing (0.25rem) × son, ranglar — 50–950 darajali oklch() palitra; layout va tipografiya class'lari CSS nomlarining qisqa shakli.
• Chiqish — qatlamli oddiy CSS: theme (tokenlar), base (Preflight), utilities.

Keyingi dars: Tailwind CSS 2: variantlar — responsive, holat, group, peer — md:, hover:, group-hover: kabi prefikslar bilan class'ni shartli qilish.

Manbalar

• Tailwind CSS: "Installation — Tailwind CLI" — tailwindcss.com/docs/installation/tailwind-cli
• Tailwind CSS: "Play CDN" — tailwindcss.com/docs/installation/play-cdn
• Tailwind CSS: "Detecting classes in source files" — tailwindcss.com/docs/detecting-classes-in-source-files
• Tailwind CSS: "Preflight" va "Compatibility" — tailwindcss.com/docs