Tailwind CSS 5: plaginlar va ekotizim

Qisqacha: Tailwind v4 da plagin CSS'dan ulanadi: @plugin "@tailwindcss/typography";. Eng foydalilari — prose (class'siz HTML matnni, masalan blog maqolasini, chiroyli qiladi), @tailwindcss/forms (forma maydonlarini tekislaydi) va tw-animate-css (kirish-chiqish animatsiyalari). Container queries esa v4 da plaginsiz ishlaydi. Tailwind ustida tayyor komponentlar ham bor: shadcn/ui kodni loyihangizga ko'chiradi, Headless UI va Radix faqat xulqni beradi, daisyUI btn kabi tayyor class'lar beradi. Tailwind — kuchli vosita, lekin har loyihaga emas.

Bu darsda

• @plugin bilan plagin ulaysiz va plagin natija CSS'ga nima qo'shishini o'qiysiz.
• «Bahor» blogini prose bilan bezaysiz va uni tokenlarga moslaysiz.
• @tailwindcss/forms, tw-animate-css va o'rnatilgan container queries'ni ishlatasiz.
• O'z plaginingizni ikki usulda (CSS'da @utility, JavaScript'da plugin()) yozasiz.
• shadcn/ui, Headless UI, Radix, daisyUI, Flowbite va Tailwind Plus farqini tushuntirasiz va Tailwind qachon kerak emasligini asoslaysiz.

Oldin bilishingiz kerak: Tailwind CSS 4: komponent naqshlari, Tailwind CSS 3: v4 konfiguratsiyasi, CSS freymvorklar, Container queries.

1. Nega bu kerak?

«Bahor»da blog/ bo'limi bor: Rustam aka retseptlar yozadi, Jasur aka yangiliklarni. Ular HTML bilmaydi — matnni Markdown'da yozishadi, sayt uni HTML'ga aylantiradi. Natijada toza, class'siz HTML chiqadi: h2, p, ul, blockquote.

Aksiya sahifasi Tailwind'da. Blog ham Tailwind loyihasiga qo'shildi — va maqola "yalang'och" ko'rindi: sarlavha oddiy matndek, ro'yxatda nuqta yo'q, paragraflar bir-biriga yopishgan. Sababi — Preflight (CSS reset darsi): u brauzer uslublarini tozalaydi, Tailwind'da hamma narsa class bilan beriladi. Class qo'yib bo'lmaydigan matnga esa hech narsa berilmaydi.

Oldingi darsdagi @apply bilan qo'lda yozish mumkin: .maqola h2 { @apply ... }, .maqola ul { @apply ... } — o'nlab qoida. Lekin bu ish allaqachon qilingan. Tailwind'ning rasmiy plagini bor — bitta class bilan butun maqolani bezaydi.

Bugungi mavzu — shunday tayyor yechimlar: plaginlar va Tailwind ustida qurilgan kutubxonalar. Ular ko'p va har biri boshqa muammoni yechadi. Oshxonadagi ziravorlar javoni kabi: kerakli ziravorni bilsangiz, ish tezlashadi. Hammasini bitta qozonga solsangiz — taom buziladi.

Versiyalar (npm ls, 2026-09-30): tailwindcss 4.3.3, @tailwindcss/typography 0.5.20, @tailwindcss/forms 0.5.11, tw-animate-css 1.4.0, daisyui 5.7.47.

2. Plagin nima va qanday ulanadi

Plagin (plugin) — Tailwind'ga yangi utilita, variant yoki asosiy uslub qo'shadigan paket. v3 da plaginlar tailwind.config.js ning plugins: [] ro'yxatiga yozilardi (Tailwind CSS 3 darsidagi fayl). v4 da — CSS'da:

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

O'rnatish (npm — 16-qismda to'liq, hozir aynan takrorlang):

npm install --save-dev @tailwindcss/typography @tailwindcss/forms

@plugin — "shu npm paketini (yoki JS faylni) plagin sifatida yukla". Plagin JavaScript'da yozilgan bo'ladi, lekin sizga JavaScript kerak emas — faqat CSS'dagi bitta qator.

Bitta muhim cheklov. Oldingi darslardagi natija oynalarida Tailwind'ning brauzer versiyasi ishlagan. Unda plagin ulab ko'rdik — konsolda xato:

Error: The browser build does not support plugins or config files.

Tarjimasi: "Brauzer versiyasi plaginlarni ham, konfiguratsiya fayllarini ham qo'llamaydi." Shuning uchun bu darsdagi natijalarda CLI yasagan haqiqiy CSS'dan olingan bo'laklarni ko'rasiz.

3. @tailwindcss/typography — prose

3.1 Bitta class — butun maqola

<article class="prose">
  <h2>Osh qanday damlanadi</h2>
  <p>Rustam aka <a href="retsept/">sirini</a> aytdi...</p>
  <ul>
    <li>Sabzi</li>
    <li>Guruch</li>
  </ul>
</article>

prose (inglizcha "nasr", oddiy matn) — plagin beradigan class. Uning ichidagi har teg — sarlavha, paragraf, ro'yxat, iqtibos, jadval, kod — o'qishga qulay ko'rinish oladi. CLI natijasining boshi:

.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
  :where(p):not(:where([class~="not-prose"],
      [class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }
  /* ... jami 400 dan ortiq qator */
}

Nimaga qarang, uch narsaga:

• max-width: 65ch — O'lcham birliklari darsidagi qulay qator eni.
• Ichki qoidalar Native CSS nesting bilan yozilgan, har selektor :where() ichida — og'irligi nol. Shuning uchun maqola ichidagi elementga utilita qo'ysangiz, u oson yutadi.
• :not(... not-prose ...) — not-prose class'li bo'lak ichiga plagin tegmaydi. Maqola ichiga menyu kartasini qo'ysangiz, <div class="not-prose"> bilan o'rab, uni prose dan himoya qilasiz.

Oldin va keyin. Chapda — faqat Preflight, o'ngda — prose ning shu teglar uchun qiymatlari (natija faylidan olindi, selektorlar qisqartirildi):

<style>
  body { font-family: system-ui, sans-serif; }
  .ustun { display: flex; flex-wrap: wrap; gap: 1rem; }
  .ustun > * { flex: 1 1 14rem; padding: 0 1rem;
    border: 1px dashed #c9d6cf; }
  .preflight :is(h2, p, ul) { margin: 0; }
  .preflight h2 { font-size: inherit; font-weight: inherit; }
  .preflight ul { list-style: none; padding: 0; }
  .preflight a { color: inherit; text-decoration: inherit; }
  .prose {
    color: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
  }
  .prose h2 {
    color: oklch(21% 0.034 264.665);
    font-weight: 700;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
  }
  .prose h2:first-child { margin-top: 0; }
  .prose p { margin-top: 1.25em; margin-bottom: 1.25em; }
  .prose a {
    color: oklch(21% 0.034 264.665);
    text-decoration: underline;
    font-weight: 500;
  }
  .prose ul {
    list-style-type: disc;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-inline-start: 1.625em;
  }
  .prose li { margin-block: 0.5em; padding-inline-start: 0.375em; }
  .prose li::marker { color: oklch(87.2% 0.01 258.338); }
</style>
<div class="ustun">
  <article class="preflight">
    <h2>Osh qanday damlanadi</h2>
    <p>Rustam aka <a href="#retsept">sirini</a> aytdi.</p>
    <ul><li>Sabzi</li><li>Guruch</li></ul>
  </article>
  <article class="prose">
    <h2>Osh qanday damlanadi</h2>
    <p>Rustam aka <a href="#retsept">sirini</a> aytdi.</p>
    <ul><li>Sabzi</li><li>Guruch</li></ul>
  </article>
</div>

Nimaga qarang: chapda sarlavha oddiy matndan farq qilmaydi, havola ham oddiy matnga o'xshaydi, ro'yxatda belgi yo'q, hammasi bir-biriga yopishgan. O'ngda sarlavha katta va qalin, paragraflar orasida havo bor, ro'yxatda och kulrang nuqtalar. HTML — aynan bir xil, faqat class boshqa. Nuqtalar rangi ::marker bilan berilgan: u Baseline emas, lekin Safari ham color ni qo'llaydi (Ro'yxatlar va hisoblagichlar darsida ko'rgan edik) — rang hamma asosiy brauzerda ishlaydi.

3.2 Modifikatorlar

• O'lcham: prose-sm, prose-lg, prose-xl, prose-2xl. Variant bilan: prose lg:prose-xl — katta ekranda kattaroq matn.
• Rang oilasi: prose-gray (standart), prose-slate, prose-stone va boshqalar — Tailwind palitrasidan.
• Qorong'i fon: dark:prose-invert — ranglar teskarisiga.
• Element modifikatorlari: prose-headings:font-sarlavha, prose-a:no-underline, prose-img:rounded-m — maqola ichidagi hamma sarlavha, havola yoki rasmga utilita. Masalan prose-headings:font-sarlavha maqoladagi hamma sarlavhaga (h1…h6) sarlavha shriftini beradi.

3.3 prose ni «Bahor» tokenlariga moslash

Plagin ranglari — Tailwind palitrasidagi kulrang ko'k tuslar. «Bahor»da esa matn, asosiy va urg'u ranglari bor, qorong'i rejim light-dark() bilan ishlaydi (Tailwind CSS 3). prose o'z ranglarini --tw-prose-* o'zgaruvchilaridan o'qiydi — ularni almashtirish yetadi:

@utility prose-bahor {
  --tw-prose-body: var(--rang-matn);
  --tw-prose-headings: var(--rang-asosiy);
  --tw-prose-links: var(--rang-asosiy);
  --tw-prose-bold: var(--rang-matn);
  --tw-prose-bullets: var(--rang-urgu);
  --tw-prose-quotes: var(--rang-ikkinchi);
  --tw-prose-quote-borders: var(--rang-urgu);
}

<article class="prose prose-bahor prose-headings:font-sarlavha">

Tekshirdik: natijada .prose-bahor qoidasi .prose dan keyin chiqdi — shuning uchun uning o'zgaruvchilari yutadi. Qorong'i rejimda dark:prose-invert kerak emas: --rang-* tokenlari o'zi almashadi. Bu — Tailwind CSS 3 darsidagi "tokenli tizimda dark: deyarli kerak emas" g'oyasining yana bir isboti.

Tekshirib ko'ring: Blog maqolasi ichida «Bahor» menyusidan bitta taom kartasi (Tailwind utilitalari bilan) ko'rsatilmoqda. Karta ichidagi p larga ham margin-top: 1.25em tushib, karta buzildi. Nima qilasiz?

4. Boshqa plaginlar va o'rnatilgan imkoniyatlar

4.1 @tailwindcss/forms

Brauzerlar forma maydonlarini har xil chizadi (Forma elementlarini zamonaviy stillash). Forms plagini ularni bir xil, oddiy va utilita bilan oson o'zgaradigan ko'rinishga keltiradi. Ikki rejimi bor:

• base (standart) — hamma input, select, textarea ga @layer base da uslub beradi. Natijada input:where([type='text']), input:where([type='email']), ... degan uzun selektor.
• class — faqat form-input, form-select, form-checkbox class'li elementlarga. Boshqa kutubxona bilan to'qnashmaslik uchun:

@plugin "@tailwindcss/forms" {
  strategy: "class";
}

@plugin blokida — plagin sozlamasi. form-input natijasi: appearance: none, oq fon, 1px kulrang chegara, 0.5rem 0.75rem ichki masofa, font-size: 1rem — tekshirdik. 1rem — ataylab: Mobil qurilma tuzoqlari darsidagi iOS kattalashtirishi 16 pikseldan kichik shriftda bo'ladi.

Qachon kerak emas: Forma elementlarini zamonaviy stillash darsidagi accent-color, appearance va field-sizing bilan o'zingiz yozsangiz. Plagin 2020-yillar boshidagi muammoni yechgan; bugun zamonaviy CSS ko'p ishni o'zi qiladi.

4.2 tw-animate-css — kirish va chiqish animatsiyalari

Dialog ochilganda xiralikdan chiqib, tepadan tushib kelsin (Kirish va chiqish animatsiyalari). tw-animate-css buni class'lar bilan beradi. U plagin emas, oddiy CSS fayl — shuning uchun @import bilan ulanadi:

@import "tailwindcss";
@import "tw-animate-css";

<div class="animate-in fade-in slide-in-from-top-4 duration-300">

animate-in — enter degan umumiy @keyframes ni ishga tushiradi. fade-in va slide-in-from-top-4 esa faqat o'zgaruvchi qo'yadi: --tw-enter-opacity: 0, --tw-enter-translate-y: calc(4*var(--spacing)*-1) — tekshirdik. @property darsidagi "bitta animatsiya, ko'p sozlama" g'oyasi.

Tarixi: v3 da buning uchun JavaScript plagini tailwindcss-animate bor edi — npm'da uning oxirgi yangilanishi 2023-yil avgustda. v4 bilan shadcn/ui unga CSS'dagi o'rinbosar — tw-animate-css ga o'tdi. Eski loyihada birinchisini ko'rsangiz, ajablanmang.

Diqqat: tw-animate-css ning CSS faylida prefers-reduced-motion so'zi umuman yo'q — tekshirdik. Harakatni kamaytirishni siz hal qilasiz: motion-safe:animate-in (prefers-reduced-motion). Ko'p tayyor namunalar buni unutadi.

4.3 Container queries — endi plaginsiz

v3 da @tailwindcss/container-queries plagini kerak edi. v4 da bu imkoniyat Tailwind'ning ichida: otaga @container, bolaga @md:, @max-sm: kabi prefiks. Natija: @container (width >= 28rem) — Container queries darsidagi @container qoidasi.

<script
  src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<div class="grid gap-4 p-4 sm:grid-cols-[2fr_1fr]">
  <div class="@container rounded-lg border p-2">
    <article class="grid gap-2 @md:grid-cols-[6rem_1fr]">
      <div class="h-16 rounded bg-amber-200"></div>
      <p class="font-bold">Osh — 35 000 so'm</p>
    </article>
  </div>
  <div class="@container rounded-lg border p-2">
    <article class="grid gap-2 @md:grid-cols-[6rem_1fr]">
      <div class="h-16 rounded bg-amber-200"></div>
      <p class="font-bold">Osh — 35 000 so'm</p>
    </article>
  </div>
</div>

Nimaga qarang (kompyuter eni): ikki karta — bitta HTML. Keng ustundagisida rasm o'rni chapda, matn yonida. Tor ustundagisida esa rasm tepada, matn ostida: karta ekranga emas, o'z konteyneriga qaradi. Telefonda ustunlar ustma-ust tushadi, har biri taxminan 330 piksel — @md (28rem, 448 piksel) dan tor, shuning uchun ikkala karta ham tik. Plagin ulanmadi — bu natija brauzer versiyasida ishladi.

5. O'z plaginingiz

Loyiha bir necha saytda takrorlansa (masalan, Jasur akaning ikkinchi choyxonasi — Dizayn tokenlari darsidagi «Navro'z»), utilitalarni bir joyga yig'ish foydali.

5.1 CSS usuli — birinchi tanlov

v4 da ko'p "plagin" aslida oddiy CSS fayl: @utility, @custom-variant va @theme (Tailwind CSS 3). Ularni bahor.css ga yozib, har loyihada @import "./bahor.css"; qilasiz. JavaScript yo'q, o'qish oson. tw-animate-css aynan shunday tuzilgan.

5.2 JavaScript usuli

Murakkab mantiq kerak bo'lsa (ko'p qiymatli jadval, boshqa paketlardan o'qish) — JavaScript plagini. bahor-plagin.mjs:

import plugin from "tailwindcss/plugin";

export default plugin(function ({ addUtilities, matchUtilities }) {
  addUtilities({
    ".content-auto": { "content-visibility": "auto" },
  });
  matchUtilities(
    { kechikish: (qiymat) => ({ "animation-delay": qiymat }) },
    { values: { 1: "80ms", 2: "160ms", 3: "240ms" } },
  );
});

@plugin "./bahor-plagin.mjs";

O'qilishi: addUtilities — tayyor class'lar ro'yxati; matchUtilities — qiymatli utilita: kechikish-2 → animation-delay: 160ms. Tekshirdik: ikkala class ham natijaga chiqdi, oddiy utilitalar qatorida.

Fayl kengaytmasi .mjs — sababli. Birinchi urinishda bahor-plagin.js deb nomladik va terminalda tanish ogohlantirish chiqdi: [MODULE_TYPELESS_PACKAGE_JSON] Warning: Module type of file:///.../bahor-plagin.js ... is not specified and it doesn't parse as CommonJS. Bu — PostCSS va Lightning CSS darsidagi postcss.config.js ogohlantirishining o'zi, yechimi ham o'sha: .mjs yoki package.json da "type": "module".

Bu JavaScript — funksiyalarni 08-qismda o'rganasiz, hozir namunani nusxalash yetadi. Solishtiring: xuddi shu ikki utilita Tailwind CSS 3 darsida @utility bilan to'rt qatorda yozilgan edi. Tailwind jamoasi ham yangi loyihalarda CSS usulini tavsiya qiladi.

Tekshirib ko'ring: Tashqi kutubxona @tailwindcss/aspect-ratio plagini haqida o'qidingiz va o'rnatmoqchisiz. Avval nimani tekshirasiz?

6. Tailwind ustida qurilgan kutubxonalar

6.1 Uch xil yondashuv

Farqni tushunish uchun bitta vazifani olamiz: modal oyna (Top layer, Modal oyna). U fokusni ichida ushlashi, Esc bilan yopilishi, ekran o'quvchiga "dialog" deyishi va chiroyli ko'rinishi kerak.

6.2 daisyUI va Flowbite — tayyor class'lar

daisyUI (CSS freymvorklar darsida nomini eshitgansiz) — Tailwind plagini, Bootstrap'ga o'xshash class'lar beradi: btn btn-primary, card, modal. Temasi CSS o'zgaruvchilarida. «Bahor» temasi bilan tekshirdik:

@plugin "daisyui" {
  themes: false;
}
@plugin "daisyui/theme" {
  name: "bahor";
  default: true;
  --color-primary: oklch(47.5% 0.1 147.7);
  --color-primary-content: oklch(98.6% 0.014 84.6);
  --color-base-100: oklch(98.6% 0.014 84.6);
  --color-base-content: oklch(27.2% 0.019 161);
  --radius-field: 0.5rem;
}

<button class="btn btn-primary">Stolni band qilish</button> — «Bahor» yashili bilan tayyor tugma. Natijada tema :where(:root), [data-theme="bahor"] selektori bilan chiqdi, btn-primary esa --btn-color: var(--color-primary) qo'yadi. daisyUI faqat CSS: modalning fokus va klaviatura xulqini brauzerning <dialog> i beradi.

Flowbite — shunga o'xshash, lekin komponentlarning JavaScript qismi (ochilish, yopilish) ham bor (flowbite 4.0.2).

Kuchli tomoni — tezlik: kichik loyiha, admin panel, prototip. Zaif tomoni — Bootstrap'dagi kabi hamma saytlar bir-biriga o'xshaydi va HTML'ga yana semantik class'lar qaytadi.

6.3 Headless UI va Radix — xulq sizdan emas, ko'rinish sizdan

"Headless" — "boshsiz": komponentning ko'rinishi yo'q, faqat xulqi bor. Headless UI (Tailwind Labs'niki; React va Vue uchun, @headlessui/react 2.2.10) va Radix UI shunday kutubxonalar. Ular ochiladigan menyu, dialog, tablar va combobox'ning (yozib qidiriladigan ochiluvchi ro'yxat) eng qiyin qismini beradi: klaviatura boshqaruvi, fokus, ARIA atributlari (ARIA asoslari). Ko'rinishni esa siz Tailwind class'lari bilan yozasiz.

Bu React yoki Vue komponentlari — ular 17-qismdan keyin kerak bo'ladi. Hozir bilib qo'ying: accessibility'ni to'g'ri qilish — komponent yozishning eng qiyin qismi. Uni tayyor, sinalgan kutubxonaga topshirish — professional qaror.

6.4 shadcn/ui — "kutubxona emas"

shadcn/ui — 2026-yilda React + Tailwind loyihalarida eng ko'p uchraydigan to'plam. G'alati tomoni: u npm'dan o'rnatiladigan kutubxona emas. Buyruq komponent kodini loyihangizga ko'chiradi, u sizning kodingizga aylanadi va xohlagancha o'zgartirasiz:

npx shadcn@latest add button

Tugma kodini o'rnatmasdan ko'rish mumkin — npx shadcn@latest view button (shadcn 4.21.0 da tekshirdik). Qaytgan faylda — aynan oldingi darsdagi naqsh:

const buttonVariants = cva(
  "inline-flex shrink-0 items-center justify-center gap-2 ...",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground ...",
        destructive: "bg-destructive text-white ...",
        outline: "border bg-background shadow-xs ...",
        secondary: "...",
        ghost: "...",
        link: "text-primary underline-offset-4 ...",
      },
      size: { default: "h-9 px-4 py-2 ...", sm: "...", lg: "..." },
    },
    defaultVariants: { variant: "default", size: "default" },
  }
)

Bu TypeScript (15-qism) — biz uzun class'larni ... bilan qisqartirdik. Ichida: cva variantlari, komponent className={cn(buttonVariants({ variant, size, className }))} bilan tugaydi, xulq uchun radix-ui paketiga tayanadi. Ranglar — bg-primary, bg-background: Tailwind CSS 3 darsidagi @theme inline ko'prigi orqali CSS o'zgaruvchilaridan.

Ya'ni shadcn/ui — so'nggi uch darsning hammasi bir joyda: tokenlar (@theme inline), variantlar (cva), birlashtirish (cn), xulq (Radix). Uni React qismida, UI kutubxonalar xaritasi darsida amalda o'rnatamiz.

6.5 Tailwind Plus va Catalyst

Tailwind Labs'ning o'z pullik mahsuloti — Tailwind Plus (avvalgi nomi Tailwind UI): yuzlab tayyor bo'lak (header, narxlar jadvali, forma) va sayt shablonlari, HTML/React/Vue kodi bilan. Catalyst — uning ichidagi React komponentlar to'plami. Narx va shartlarni rasmiy saytdan tekshiring. Bepul muqobillar — shadcn/ui va daisyUI.

flowchart TD
  T["Tailwind CSS"] --> P["Plaginlar<br/>typography, forms"]
  T --> K["Tayyor class'lar<br/>daisyUI, Flowbite"]
  T --> S["shadcn/ui<br/>kod ko'chiriladi"]
  R["Radix, Headless UI<br/>xulq"] --> S
  C["cva + cn()"] --> S

Nimaga qarang: shadcn/ui ikki manbadan quriladi — Tailwind (ko'rinish) va headless kutubxona (xulq). daisyUI esa to'g'ridan-to'g'ri Tailwind plagini.

7. Tailwind'ning kamchiliklari va qachon kerak emas

Uch dars Tailwind'ni o'rgandik. Endi halol baho.

Kamchiliklari:

• Build qadami shart. Tailwind CSS'ni yig'ish kerak (Tailwind CSS 1). Oddiy HTML + CSS saytda bu qo'shimcha vosita, qo'shimcha xato manbai.
• HTML og'irlashadi. Sahifa hajmi class'lar hisobiga o'sadi. CSS fayl esa kichik qoladi — faqat ishlatilgan utilitalar (CSS yuklash samaradorligi darsida o'lchaymiz).
• Yangi til. px-m, @md:, prose-a: — CSS ustidan qo'shimcha lug'at. CSS'ni yaxshi bilmay turib Tailwind o'rgangan dasturchi qiyin holatda qoladi. Siz CSS'ni oldin o'rgandingiz — shuning uchun har class ortida qaysi xususiyat turganini bilasiz.
• Class'siz HTML'da ojiz. CMS (sayt matnini tahrirlash tizimi), Markdown, begona vidjet — prose yoki @apply kerak.
• Ko'rinish HTML'da. Dizaynni butunlay almashtirish (CSS Zen Garden g'oyasi, CSS nima) — endi HTML'ni tahrirlash demakdir.

Qachon kerak emas:

• HTML email — pochta dasturlari tashqi CSS'ni qo'llamaydi (HTML email'larni stillash).
• Kichik statik sayt — «Bahor» yoki portfolio kabi: bir necha sahifa, bir kishi, tokenlar va @layer bilan toza CSS allaqachon bor. Tailwind hech narsa qo'shmaydi.
• Kontent sayt — deyarli hamma matn Markdown'dan: prose dan tashqari foyda oz.
• Jamoa Tailwind'ni bilmasa va boshqa kelishuvi bor bo'lsa (BEM, CSS Modules).

Qachon juda mos: komponentli ilova (React, Vue), ko'p dasturchi, tez o'zgaradigan dizayn, dizayn tizimi tokenlari. Shuning uchun Tailwind 2026-yilda ish e'lonlarida eng ko'p so'raladigan CSS vositalaridan biri.

Tekshirib ko'ring: Do'stingiz uch sahifali tadbir sayti uchun Tailwind + daisyUI + shadcn/ui + tw-animate-css ni o'rnatmoqchi. Nima maslahat berasiz?

8. Ko'p uchraydigan xatolar

8.1 Plagin natija oynasida ishlamayapti

Tailwind'ning brauzer versiyasi (@tailwindcss/browser) bilan sinov qilyapsiz va @plugin qo'ydingiz. Konsolda: The browser build does not support plugins or config files. Tuzatish: plaginli sinovni CLI yoki Vite bilan qiling.

8.2 prose ichidagi komponent buzildi

Maqola ichidagi karta prose uslublarini oldi. Tuzatish: not-prose.

8.3 tw-animate-css ni @plugin bilan ulash

U plagin emas — CSS fayl. Tuzatish: @import "tw-animate-css";.

8.4 Keraksiz v3 plagini

@tailwindcss/container-queries ni v4 loyihaga o'rnatish. Tuzatish: v4 da @container va @md: o'rnatilgan — plaginni olib tashlang.

8.5 Harakat uchun ruxsat so'ramaslik

animate-in har kimga ishlaydi. Tuzatish: motion-safe:animate-in.

9. Mashqlar

Mashqlar kurs/mashqlar/06/tailwind/ da.

1-mashq (oson): qaysi vosita?

Har vaziyatga bitta vosita tanlang: prose, @tailwindcss/forms, tw-animate-css, daisyUI, Headless UI, shadcn/ui, hech qaysisi.

1. Blog maqolasi Markdown'dan keladi.
2. React ilovada klaviatura bilan boshqariladigan ochiluvchi menyu kerak, dizayn o'zimizniki.
3. Admin panel prototipi ertaga kerak, React yo'q.
4. Kartaning container query bilan joylashuvi.
5. Next.js (React ustida qurilgan freymvork) loyiha, tugma, dialog va jadval kerak, kodni o'zimiz o'zgartirmoqchimiz.

2-mashq (o'rta): «Bahor» blogi

kurs/mashqlar/06/tailwind/blog.html da maqola yozing: h1, ikki paragraf, havola, ro'yxat, iqtibos (blockquote). Class faqat article da.

1. @tailwindcss/typography ni o'rnating va ulang.
2. prose prose-bahor bering, prose-bahor ni "Moslash" bo'limidagidek yozing.
3. Sarlavhalar «Bahor» shriftida, havolalar chiziqsiz, lekin hover'da chiziqli bo'lsin.
4. Katta ekranda (lg:) matn kattaroq bo'lsin.

Ishora: element modifikatorlari variantlar bilan birlashadi: prose-a:hover:underline.

@import "tailwindcss";
@import "./tokenlar.css";
@plugin "@tailwindcss/typography";

@theme inline {
  --font-sarlavha: var(--shrift-sarlavha);
}

@utility prose-bahor {
  --tw-prose-body: var(--rang-matn);
  --tw-prose-headings: var(--rang-asosiy);
  --tw-prose-links: var(--rang-asosiy);
  --tw-prose-bold: var(--rang-matn);
  --tw-prose-bullets: var(--rang-urgu);
  --tw-prose-quotes: var(--rang-ikkinchi);
  --tw-prose-quote-borders: var(--rang-urgu);
}

<article class="prose prose-bahor lg:prose-lg
  prose-headings:font-sarlavha prose-a:no-underline
  prose-a:hover:underline">
  <h1>Osh qanday damlanadi</h1>
  ...
</article>

3-mashq (qiyin): plaginni @utility ga aylantiring

Eski loyihada shunday JavaScript plagini bor:

import plugin from "tailwindcss/plugin";

export default plugin(function ({ addUtilities, matchUtilities }) {
  addUtilities({
    ".matn-balans": { "text-wrap": "balance" },
    ".skroll-yashir": { "scrollbar-width": "none" },
  });
  matchUtilities(
    { qator: (qiymat) => ({ "-webkit-line-clamp": qiymat }) },
    { values: { 2: "2", 3: "3" } },
  );
});

1. Uni @utility bilan CSS'ga ko'chiring.
2. Uchala utilitaning Tailwind'da tayyor muqobili bormi? Natijani CLI bilan tekshiring.

Ishora: text-balance, scrollbar-none, line-clamp-* ni sinab ko'ring.

@utility matn-balans {
  text-wrap: balance;
}
@utility skroll-yashir {
  scrollbar-width: none;
}
@utility qator-* {
  -webkit-line-clamp: --value(integer);
}

4-mashq: Portfolio qadami — "Men haqimda" sahifasi prose ko'zi bilan

Portfolio'ning haqimda/index.html sahifasi — asosan matn: sarlavhalar, paragraflar, ro'yxat (Yakuniy loyiha: portfolio). tajriba/tailwind/ da tajriba qiling:

1. haqimda/index.html ning main ichini tajriba/tailwind/haqimda.html ga ko'chiring va <main class="prose prose-portfolio"> qiling.
2. prose-portfolio ni portfolio tokenlari bilan yozing (oldingi darslardagi tokenlar.css va @theme inline).
3. Asl sahifa bilan 360 va 1280 pikselda solishtiring: qaysi farqlar ko'zga tashlanadi? Qaysi biri o'qishga qulayroq?
4. prose ning qaysi qiymatlarini (masalan paragraf orasidagi masofa) portfolio'ning oddiy CSS'iga olsa bo'ladi?

Ishora: DevTools'da prose li p ni tanlab, Styles panelidan margin-top qiymatini o'qing.

@utility prose-portfolio {
  --tw-prose-body: var(--rang-matn);
  --tw-prose-headings: var(--rang-asosiy);
  --tw-prose-links: var(--rang-asosiy);
  --tw-prose-bullets: var(--rang-asosiy);
}

10. Real ishda

• Blog va hujjat saytlari — Next.js yoki Astro'dagi Markdown sahifalar deyarli doim prose bilan: bitta class, tayyor tipografiya.
• shadcn/ui — 2026-yilda React loyihalarida de-fakto standartga aylangan. Ishga kirganda "components/ui/ papkasi nima?" savoliga javob — shu.
• Accessibility — Radix va Headless UI murakkab komponentlarning klaviatura va ARIA xulqini sinab bergan. Uni o'zingiz yozishdan oldin tayyoriga qarang.
• Intervyuda so'raladi: "shadcn/ui kutubxonadan nimasi bilan farq qiladi?", "Headless komponent nima?", "Tailwind qachon kerak emas?", "Markdown matnni Tailwind'da qanday bezaysiz?".

Xulosa

• v4 da plagin CSS'dan ulanadi: @plugin "..."; oddiy CSS to'plam (masalan tw-animate-css) — @import bilan.
• prose class'siz HTML'ni bezaydi; ranglari --tw-prose-* o'zgaruvchilarida, not-prose himoya qiladi.
• Container queries va ko'p eski v3 plaginlari v4 ga o'rnatilgan — o'rnatishdan oldin tekshiring.
• O'z plaginingiz — avval @utility va @custom-variant bilan CSS'da; JavaScript plagini — murakkab holatda.
• Ekotizim uch xil: tayyor class'lar (daisyUI), xulq (Radix, Headless UI), kod ko'chirish (shadcn/ui).
• Tailwind komponentli ilovada kuchli; email, kichik statik sayt va kontent sayt uchun ko'pincha shart emas.

Keyingi dars: CSS yuklash samaradorligi — CSS sahifa chizilishini qanday to'xtatishini Chrome'da o'lchaymiz va uni tez yetkazish usullarini sinaymiz.

Manbalar

• Tailwind CSS: "Functions and directives" (@plugin), "Responsive design" (container queries) — tailwindcss.com/docs
• @tailwindcss/typography, @tailwindcss/forms — github.com/tailwindlabs
• tw-animate-css — github.com/Wombosvideo/tw-animate-css
• daisyUI: "Themes" — daisyui.com
• shadcn/ui — ui.shadcn.com; Radix — radix-ui.com; Headless UI — headlessui.com