Tailwind CSS 2: variantlar — responsive, holat, group, peer

Qisqacha: Tailwind'da har class oldiga variant (prefiks) qo'yish mumkin: md:grid-cols-2 — "48rem va undan keng ekranda ikki ustun", hover:bg-green-50 — "sichqoncha ustida bo'lsa". Tailwind prefiksni haqiqiy CSS'ga aylantiradi: media query, pseudo-klass yoki selektor. group-hover: — ota element hover bo'lganda bolani o'zgartiradi, peer-invalid: — qo'shni maydon noto'g'ri bo'lsa. Shkalada yo'q qiymat uchun — kvadrat qavs: bg-[#2f6b3a], w-[37px].

Bu darsda

• Responsive prefikslarni (sm: … 2xl:, max-md:) mobile-first tartibda yoza olasiz.
• Holat variantlari (hover:, focus-visible:, active:, disabled:, motion-reduce:) ortidagi CSS'ni o'qiy olasiz.
• group va peer bilan boshqa elementning holatiga qarab stil bera olasiz.
• has-*, aria-*, data-*, *:, before: kabi variantlarni va arbitrary qiymatlarni ishlata olasiz.
• Variantlar tartibi va ko'p uchraydigan xatolarni bilasiz.

Oldin bilishingiz kerak: Tailwind CSS 1, Holat pseudo-klasslari, Mantiqiy pseudo-klasslar: :is(), :where(), :not(), :has(), Mobile-first.

1. Nega bu kerak?

Tailwind CSS 1 darsida «Bahor» kartasini class'lar bilan yig'dik. Lekin real sahifa "jonli": telefonda bitta ustun, kompyuterda uchta. Tugma sichqoncha ustida rangini o'zgartiradi. Telefon raqami xato bo'lsa, qizil yozuv chiqadi.

Oddiy CSS'da bular uchun alohida qoidalar yozardingiz: @media (min-width: 40rem) { ... }, .bron-havola:hover { ... }. style="..." atributi esa buni umuman qila olmaydi. Tailwind'da esa class oldiga bitta so'z qo'yasiz: sm:, hover:.

Hayotiy o'xshatish: choyxona oshxonasidagi buyurtma varaqasi. "Osh" — asosiy buyurtma. "Osh, agar bola bo'lsa — yarim porsiya", "Choy, agar qish bo'lsa — issiq". Shart so'zi buyurtmaning oldida turadi. Tailwind variantlari — xuddi shu "agar"lar: md: — "agar ekran keng bo'lsa", hover: — "agar sichqoncha ustida bo'lsa".

05-qismda ko'p joyda "Tailwind buni hover:, has-[...]:, before: bilan qiladi" degan va'dalarni o'qidingiz (Holat pseudo-klasslari, Mantiqiy pseudo-klasslar, Pseudo-elementlar). Bugun ularning hammasini yopamiz — va har birining ortida siz allaqachon biladigan CSS turganini ko'rasiz.

2. Responsive variantlar

2.1 Beshta ekran chegarasi

Tailwind v4 CLI chiqishidan (4.3.3):

width >= — media query'larning yangi "oraliq" yozuvi (Media queries), min-width bilan bir xil ma'noda. Qiziq tasodif: «Bahor» chegaralari — 40rem va 64rem — Tailwind'ning sm va lg iga aynan to'g'ri keladi.

2.2 Mobile-first: prefiks "dan boshlab" degani

Eng muhim qoida: prefikssiz class — hamma ekran uchun, md: — "48rem dan boshlab". Bu Mobile-first darsidagi tartib: avval telefon, keyin kattalashtirish.

«Bahor» menyusi — telefonda bitta ustun, 40rem dan ikki, 64rem dan uch ustun:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<ul class="grid gap-4 p-4 font-sans sm:grid-cols-2 lg:grid-cols-3"
  role="list">
  <li class="rounded-lg border-2 border-green-700 p-4">Osh</li>
  <li class="rounded-lg border-2 border-green-700 p-4">Lag'mon</li>
  <li class="rounded-lg border-2 border-green-700 p-4">Manti</li>
  <li class="rounded-lg border-2 border-green-700 p-4">Ko'k choy</li>
</ul>

Nimaga qarang: telefon enida (360) to'rtta karta ustma-ust. 768 da — ikkitadan, ikki qator. 1280 da — birinchi qatorda uchta, to'rtinchisi pastda. Ekran tugmalarini bosib solishtiring.

Uchta class uchta holatni berdi: grid (hamma joyda bitta ustun), sm:grid-cols-2, lg:grid-cols-3. sm: dagi ikki ustun lg da ham ishlardi — lekin lg:grid-cols-3 keyinroq chiqadi va uni almashtiradi.

2.3 max-* va oraliq

Faqat kichik ekran uchun kerak bo'lsa — max- prefiksi: max-md:hidden → @media (width < 48rem), "48rem dan tor bo'lsa yashir". Ikkalasini birga yozsangiz — oraliq: md:max-lg:flex — "48rem dan 64rem gacha". Chiqish faylida bu ikki media query bir-birining ichida:

@media (width >= 48rem) {
  @media (width < 64rem) {
    .md\:max-lg\:flex {
      display: flex;
    }
  }
}

Class nomidagi \: — CSS'da : ni "ekranlash" (Selektorlar): nomda ikki nuqta bor, lekin u pseudo-klass emas. HTML'da siz oddiy md:max-lg:flex yozasiz.

Tekshirib ko'ring: class="text-lg sm:text-sm" — telefonda (360px) matn qaysi o'lchamda? 1280 da-chi?

3. Holat variantlari

3.1 hover:, focus-visible:, active:, disabled:

Bular Holat pseudo-klasslari darsidagi pseudo-klasslarning o'zi: hover: → :hover, focus-visible: → :focus-visible, active: → :active, disabled: → :disabled.

Bitta farq bor. CLI chiqishida hover: shunday chiqdi:

@media (hover: hover) {
  .hover\:bg-green-50:hover {
    background-color: var(--color-green-50);
  }
}

Tailwind v4 har hover qoidasini @media (hover: hover) ichiga o'raydi — ya'ni "qurilmada haqiqiy sichqoncha bo'lsa". Telefonda barmoq bilan bosilgandan keyin hover rangi "yopishib qolmaydi". Portfolio'da siz buni Mobil qurilma tuzoqlari darsida qo'lda qilgan edingiz — Tailwind avtomatik qiladi.

«Bahor» bron tugmasi to'rt holat bilan:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<div class="flex flex-wrap gap-4 p-4 font-sans">
  <button class="rounded-lg bg-green-700 px-4 py-2 font-bold
    text-white transition-colors duration-200
    hover:bg-green-800 focus-visible:outline-2
    focus-visible:outline-offset-2 focus-visible:outline-green-900
    active:bg-green-900 disabled:bg-gray-400
    motion-reduce:transition-none" type="button">
    Band qilish
  </button>
  <button class="rounded-lg bg-green-700 px-4 py-2 font-bold
    text-white disabled:cursor-not-allowed disabled:bg-gray-400"
    type="button" disabled>
    Joy qolmadi
  </button>
</div>

Nimaga qarang: birinchi tugma yashil. Sichqonchani olib borsangiz — to'qroq bo'ladi, bosib turganingizda — yanada to'q. Tab bilan kelsangiz — atrofida 2 piksellik to'q yashil halqa, tugmadan biroz uzoqda. Ikkinchi tugma kulrang, sichqoncha ustida "taqiq" kursori — u disabled.

3.2 motion-reduce: va motion-safe:

Birinchi tugmadagi motion-reduce:transition-none — prefers-reduced-motion darsidagi qoida. Chiqishda:

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transition-none {
    transition-property: none;
  }
}

Teskarisi — motion-safe:: "foydalanuvchi harakatni kamaytirishni so'ramagan bo'lsa". Katta harakatlar uchun uni ishlatish xavfsizroq: motion-safe:animate-spin — aylanish faqat ruxsat bo'lsa. O'sha darsdagi xulosa: harakat — qo'shimcha, standart emas.

3.3 Forma holatlari

Forma pseudo-klasslari ham variant: invalid:, user-invalid:, required:, checked:, placeholder: (bu pseudo-element — ::placeholder). user-invalid: — Formani stillash darsida ko'rgan :user-invalid: foydalanuvchi maydonga yozib, undan chiqqandagina ishlaydi. Oddiy invalid: esa sahifa ochilishi bilan bo'sh majburiy maydonni qizil qiladi — bu qo'pol.

Tekshirib ko'ring: Telefonda hover:underline li havolaga barmoq bilan bosdingiz. Tagiga chiziq chiqadimi?

4. group va peer: boshqa elementning holati

4.1 group: ota element holati

Muammo: kartaning istalgan joyiga sichqoncha kelganda, uning ichidagi strelka ↗ o'ngga sursin. hover: faqat elementning o'ziga qaraydi. Oddiy CSS'da siz .karta:hover .strelka { ... } yozardingiz.

Tailwind'da ota elementga group class'i, bolaga group-hover: variant:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<a class="group m-4 block max-w-xs rounded-lg border-2
  border-green-700 p-4 font-sans hover:bg-green-50" href="menyu/">
  <span class="text-xl font-bold">Menyu</span>
  <span class="inline-block transition-transform
    group-hover:translate-x-1 motion-reduce:transition-none"
    aria-hidden="true">↗</span>
  <span class="block text-sm text-gray-600">Bugun 12 xil taom</span>
</a>

Nimaga qarang: sichqonchani kartaning pastki kulrang matni ustiga olib borsangiz ham, butun karta och yashil bo'ladi va strelka 4 piksel o'ngga siljiydi. Strelka aria-hidden — ekran o'quvchi uni o'qimaydi, u faqat bezak.

group-hover:translate-x-1 chiqishda:

@media (hover: hover) {
  .group-hover\:translate-x-1:is(:where(.group):hover *) {
    --tw-translate-x: var(--spacing);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
}

Selektorni o'qiymiz: :where(.group):hover * — "hover holatidagi .group ning istalgan avlodi". :where() — og'irligi nol (Mantiqiy pseudo-klasslar), shuning uchun group class'i selektorni og'irlashtirmaydi. Tashqi :is() bilan butun selektor bitta class kabi (0,1,0) bo'lib qoladi.

Nomli guruh. Kartalar ichma-ich bo'lsa (menyu kartasi ichida kichik "achchiq" nishoni kartasi), qaysi group nazarda tutilgani noaniq. Nom qo'ying: ota — group/karta, bola — group-hover/karta:underline. Chiqishda: :where(.group\/karta):hover *.

group-focus-within:, group-has-[...]: kabi boshqa holatlar ham bor — har pseudo-klass group- bilan ishlaydi.

4.2 peer: qo'shni element holati

Muammo: telefon maydoni noto'g'ri to'ldirilsa, undan keyingi paragrafda xato matni ko'rinsin. Maydon va matn — ota-bola emas, qo'shnilar. Oddiy CSS'da — ~ kombinatori (Kombinatorlar).

Tailwind'da maydonga peer, qo'shniga peer-*: variant:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<form class="p-4 font-sans" action="https://example.com/bron">
  <label class="block font-bold" for="telefon">Telefon</label>
  <input class="peer mt-1 rounded border-2 border-gray-300 px-2 py-1
    user-invalid:border-red-700" id="telefon" name="telefon"
    type="tel" pattern="\+998 ?\d{2} ?\d{3} ?\d{2} ?\d{2}"
    placeholder="+998 90 000 00 00" required
    aria-describedby="telefon-xato">
  <p class="mt-1 hidden text-sm text-red-700 peer-user-invalid:block"
    id="telefon-xato">
    Raqamni +998 90 000 00 00 ko'rinishida yozing.
  </p>
</form>

Nimaga qarang: sahifa ochilganda xato matni yo'q. Maydonga 12 yozing va Tab bilan chiqing: ramka qizil bo'ladi va ostida qizil yozuv paydo bo'ladi. To'g'ri raqam yozsangiz — yo'qoladi. JavaScript yo'q.

Chiqishda: .peer-user-invalid\:block:is(:where(.peer):user-invalid ~ *). Kombinator ~ — "keyingi qo'shnilar". Shuning uchun qoida: peer class'li element HTML'da oldin turishi shart. Xato matni maydondan oldin bo'lsa, peer ishlamaydi — CSS'da "oldingi qo'shni" kombinatori yo'q.

Tekshirib ko'ring: Nega xato matni uchun peer-invalid:block emas, peer-user-invalid:block tanlandi?

5. Atribut va tuzilma variantlari

5.1 has-*, aria-*, data-*, open:

• has-* — :has(): has-checked:bg-green-50 → :has(:checked), "ichida belgilangan checkbox bo'lsa". Istalgan selektor — kvadrat qavsda: has-[:focus-visible]:ring-2.
• aria-* — ARIA holati bo'yicha: aria-expanded:rotate-180 → [aria-expanded="true"]. Istalgan qiymat — qavsda: aria-[current=page]:font-bold → [aria-current="page"]. «Bahor» menyusidagi joriy sahifa (Atribut selektorlari) aynan shunday.
• data-* — data- atributlari: data-[state=open]:block → [data-state="open"]. Radix, shadcn/ui kabi React kutubxonalari holatni shunday atributlarda saqlaydi (Tailwind CSS 5).
• open: — ochiq details yoki popover (Top layer).

5.2 *:, before:, after:, marker:

• *: — to'g'ridan-to'g'ri bolalarga: *:py-2 → :is(.\*\:py-2 > *). Ro'yxatning har li siga class yozmasdan.
• before: va after: — Pseudo-elementlar. Tailwind content ni o'zi qo'shadi, matn kerak bo'lsa — before:content-['★'].
• placeholder:, marker:, selection:, first-line: — xuddi shu nomli pseudo-elementlar.

Hammasi bir natijada — «Bahor»ning ertalabki nonushta ro'yxati:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<fieldset class="m-4 space-y-2 font-sans">
  <legend class="font-bold">Nonushtaga nima olasiz?</legend>
  <label class="flex gap-2 rounded border-2 border-gray-200 p-2
    has-checked:border-green-700 has-checked:bg-green-50">
    <input type="checkbox" name="nonushta" value="non" checked>
    Tandir non
  </label>
  <label class="flex gap-2 rounded border-2 border-gray-200 p-2
    has-checked:border-green-700 has-checked:bg-green-50">
    <input type="checkbox" name="nonushta" value="qaymoq">
    Qaymoq
  </label>
  <p class="text-sm text-gray-600 before:mr-1
    before:content-['★']">Tandir non — bugun issiq</p>
</fieldset>

Nimaga qarang: "Tandir non" yozuvli qator yashil ramkada va och yashil fonda — ichidagi checkbox belgilangan. "Qaymoq" kulrang ramkada. Uni belgilasangiz, u ham yashil bo'ladi. Pastki kulrang matn oldida yulduzcha bor — u HTML'da yo'q, before: uni CSS bilan qo'shdi.

Tekshirib ko'ring: Nega label ga checked:bg-green-50 emas, has-checked:bg-green-50 yozildi?

6. Arbitrary qiymatlar va variantlar

6.1 Shkalada yo'q qiymat

Shkala hamma narsani qamrab olmaydi. «Bahor» yashili #2f6b3a Tailwind palitrasida yo'q. Buning uchun arbitrary qiymat (ixtiyoriy qiymat) — kvadrat qavsda:

Ikki qoida. Birinchisi: class nomida bo'sh joy bo'lmaydi — bo'sh joy ikki class'ni ajratadi. Qiymatdagi bo'sh joy o'rniga _ yoziladi: grid-cols-[1fr_2fr]. Ikkinchisi: CSS o'zgaruvchisi uchun v4 da qisqa yozuv bor — oddiy qavs: text-(--rang-urgu).

«Bahor» ranglarini o'zgaruvchilardan olamiz:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-urgu: #b4461a;
    --rang-fon: #fffaf0;
  }
</style>
<article class="m-4 max-w-xs rounded-lg border-2
  border-(--rang-asosiy) bg-(--rang-fon) p-4 font-sans">
  <h3 class="text-xl font-bold text-(--rang-asosiy)">Osh</h3>
  <p class="font-bold text-(--rang-urgu)">35 000 so'm</p>
</article>

Nimaga qarang: karta qaymoq fonda, ramka va sarlavha «Bahor»ning o'z yashilida, narx — o'z qizg'ishida. Tailwind CSS 1 darsidagi kartadan farqi: ranglar endi standart palitradan emas, bizning tokenlarimizdan.

Arbitrary qiymat — "favqulodda eshik". Bitta rang 30 joyda bg-[#2f6b3a] bo'lib yozilsa, bu tokenlar tizimini buzadi. To'g'ri yo'l — rangni Tailwind mavzusiga qo'shish, shunda bg-bahor-asosiy kabi oddiy class paydo bo'ladi. Buni Tailwind CSS 3 darsida @theme bilan qilamiz.

6.2 Arbitrary variant: [&...]:

Tayyor variant yetmasa — selektorni o'zingiz yozasiz. & — shu element:

• [&>p]:mt-2 → .\[\&\>p\]\:mt-2 > p — "to'g'ridan-to'g'ri p bolalariga".
• [&_a]:underline → ... a — _ bo'sh joy, ya'ni "ichidagi barcha a larga".

Bu Native CSS nesting dagi & ning o'zi. Kam ishlating: uzun [&...] zanjirlari o'qishni qiyinlashtiradi.

6.3 ! — important

Class oxiriga !: bg-red-500! → background-color: var(--color-red-500) !important. v3 dagi eski shakl — boshida: !p-2 — v4.3.3 da ham ishladi (tekshirdik), lekin hujjat yangi shaklni ko'rsatadi. display va yashirish darsidagi qoida o'z kuchida: !important — faqat asosli istisno uchun.

7. Variantlarni birlashtirish va dark:

Variantlar zanjir bo'ladi: md:hover:underline — "48rem dan keng va hover". Chiqishda ikki shart bir-birining ichida. Class'ni bo'laklab o'qing — har bo'lak CSS'ning o'z qismiga aylanadi:

flowchart LR
  A["md:hover:underline"] --> B["md:<br/>@media (width >= 48rem)"]
  A --> C["hover:<br/>@media (hover: hover)<br/>va :hover"]
  A --> D["underline<br/>text-decoration-line"]

Nimaga qarang: oxirgi bo'lak — utility, u "nima qilish"ni aytadi. Undan oldingi har bo'lak — "qachon" degan shart. v4 da tartib chapdan o'ngga o'qiladi: md:hover: da tashqi — media query, ichki — hover. hover:md:underline ham ishladi, natija amalda bir xil. Lekin jamoada bitta tartib tanlang — odatda avval ekran, keyin holat.

dark: — qorong'i rejim. Standart holatda u @media (prefers-color-scheme: dark) yasaydi — tizim sozlamasi bo'yicha. «Bahor»dagi kabi foydalanuvchi o'zi tanlaydigan tema (data-tema, Qorong'i rejim) uchun dark: ni qayta sozlash kerak — @custom-variant bilan, Tailwind CSS 3 darsida.

Tekshirib ko'ring: class="grid-cols-[1fr 2fr]" yozildi. Ikki ustun paydo bo'ladimi?

8. Ko'p uchraydigan xatolar

8.1 sm: — "kichik ekran" deb o'ylash

class="sm:text-sm" telefonda kichik matn beradi, deb kutiladi. Aslida telefonda hech narsa o'zgarmaydi. Tuzatish: telefon qiymati — prefikssiz class, kattaroq ekranlar — prefiks bilan: text-sm md:text-base.

8.2 group class'i unutilgan

Bolada group-hover:translate-x-1, ota elementda group yo'q — hech narsa bo'lmaydi. Tuzatish: otaga group (yoki nomli group/karta).

8.3 peer noto'g'ri joyda

Xato matni input dan oldin yozilgan, peer-user-invalid:block ishlamaydi. Tuzatish: peer li element HTML'da oldin tursin. Ko'rinishda boshqa tartib kerak bo'lsa — flex yoki grid order bilan.

8.4 Qiymatda bo'sh joy

grid-cols-[1fr 2fr], bg-[rgb(0 0 0)] — class ikkiga bo'linadi. Tuzatish: bo'sh joy o'rniga _: grid-cols-[1fr_2fr].

8.5 Muhim narsa faqat hover'da

Narx yoki tugma faqat group-hover:block bilan ko'rinadi. Telefonda uni ko'rib bo'lmaydi, klaviatura foydalanuvchisi (Bobur) ham ko'rmaydi. Tuzatish: hover — faqat bezak. Kerak bo'lsa, group-focus-within: ni ham qo'shing.

9. Mashqlar

Mashqlar kurs/mashqlar/06/tailwind/ da (Tailwind CSS 1 darsidagi CLI loyihasi, --watch yoqilgan) yoki tez sinash uchun Play CDN bilan.

1-mashq (oson): CSS'dan variantga

Quyidagi CSS'ni Tailwind class'lari bilan yozing:

.aksiya {
  display: none;
  padding: 1rem;
}

.aksiya:hover {
  text-decoration: underline;
}

@media (width >= 64rem) {
  .aksiya {
    display: block;
  }
}

Ishora: display: none — hidden, 64rem — lg:.

<p class="hidden p-4 hover:underline lg:block">Aksiya</p>

2-mashq (o'rta): menyu havolalari

«Bahor» menyusining uchta havolasini yozing: joriy sahifa (aria-current="page") qalin va tagi chizilgan; qolganlari sichqoncha ustida yashil; hammasi Tab bilan kelinganda 2 piksellik yashil halqa oladi. Havolalar telefonda ustma-ust, 40rem dan yonma-yon.

Ishora: aria-[current=page]: — "Atribut va tuzilma variantlari" bo'limi. Yo'nalish — flex-col va sm:flex-row.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<nav class="p-4 font-sans" aria-label="Asosiy menyu">
  <ul class="flex flex-col gap-2 *:rounded *:px-2 sm:flex-row
    sm:gap-4" role="list">
    <li><a class="hover:text-green-700 focus-visible:outline-2
      focus-visible:outline-green-700
      aria-[current=page]:font-bold aria-[current=page]:underline"
      href="./" aria-current="page">Bosh sahifa</a></li>
    <li><a class="hover:text-green-700 focus-visible:outline-2
      focus-visible:outline-green-700" href="menyu/">Menyu</a></li>
    <li><a class="hover:text-green-700 focus-visible:outline-2
      focus-visible:outline-green-700" href="bron/">Bron</a></li>
  </ul>
</nav>

3-mashq (qiyin): bron formasidagi odam soni

«Bahor» bron formasidagi "Necha kishi?" maydoni: type="number", min="1", max="20", required. Talablar:

• Maydon foydalanuvchi xato qiymat kiritib chiqqandan keyin qizil ramka olsin.
• Maydondan keyingi paragraf faqat shunda ko'rinsin: "1 dan 20 gacha son yozing."
• Butun forma bloki (p o'rami) ichida fokus bo'lganda och yashil fon olsin.

Ishora: peer va peer-user-invalid:; o'ram uchun — focus-within: (bu pseudo-klass Holat pseudo-klasslari darsida).

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4">
</script>
<form class="p-4 font-sans" action="https://example.com/bron">
  <p class="rounded p-2 focus-within:bg-green-50">
    <label class="block font-bold" for="odam">Necha kishi?</label>
    <input class="peer mt-1 w-24 rounded border-2 border-gray-300
      px-2 py-1 user-invalid:border-red-700" id="odam" name="odam"
      type="number" min="1" max="20" required
      aria-describedby="odam-xato">
    <span class="mt-1 hidden text-sm text-red-700
      peer-user-invalid:block" id="odam-xato">
      1 dan 20 gacha son yozing.
    </span>
  </p>
</form>

4-mashq: Portfolio qadami — karta jonlanadi

Tailwind CSS 1 darsidagi tajriba/tailwind/index.html kartangizni portfolio'dagi xulqqa yetkazing:

1. Ikkinchi loyiha kartasini qo'shing. Kartalar telefonda ustma-ust, 48rem dan ikki ustun.
2. Butun karta sichqoncha ustida chegarasi yashil bo'lsin, "Saytni ochish ↗" dagi strelka o'ngga sursin (portfolio'dagi 2D transformlar darsidagi harakat) — harakatni kamaytirishni so'ragan foydalanuvchida siljish bo'lmasin.
3. Havola Tab bilan kelinganda ko'rinadigan halqa olsin.

Keyin portfolio'dagi xuddi shu xulq uchun komponentlar.css da nechta qoida yozganingizni sanang va Tailwind versiyasidagi class'lar soni bilan solishtiring.

Ishora: kartaga group, strelkaga group-hover:translate-x-1 va motion-reduce:. Ikki ustun — ota div ga grid md:grid-cols-2.

<div class="grid gap-4 md:grid-cols-2">
  <article class="group rounded-lg border border-gray-300 bg-white
    p-4 transition-colors hover:border-green-800
    motion-reduce:transition-none">
    <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
      focus-visible:outline-2 focus-visible:outline-offset-2
      focus-visible:outline-green-800" href="#">
      Saytni ochish
      <span class="inline-block transition-transform
        group-hover:translate-x-1 motion-reduce:transition-none"
        aria-hidden="true">↗</span>
    </a>
  </article>
  <!-- ikkinchi karta — xuddi shunday, boshqa matn bilan -->
</div>

10. Real ishda

• React komponentlarida variantlar har qatorda: className="flex flex-col md:flex-row hover:bg-muted data-[state=open]:rotate-180". shadcn/ui kodini ochsangiz, data-[state=...] va aria-* variantlarini ko'p ko'rasiz.
• Kod review'da tez-tez uchraydigan izohlar: "sm: telefon uchun emas", "bu peer ishlamaydi — tartibni tekshiring", "arbitrary rangni mavzuga chiqaring".
• Accessibility'da Tailwind yordam beradi, lekin o'zi hal qilmaydi: focus-visible: halqasini, motion-reduce: ni va aria-* atributlarini siz yozasiz.
• Intervyuda: "Tailwind'da mobile-first qanday ishlaydi?", "group va peer farqi?", "Arbitrary qiymat qachon to'g'ri, qachon xato?" — endi javob bera olasiz.

Xulosa

• Variant — class oldidagi shart: md:, hover:, group-hover:. Tailwind uni media query, pseudo-klass yoki selektorga aylantiradi.
• Responsive prefikslar "dan boshlab" (sm 40rem, md 48rem, lg 64rem, xl 80rem, 2xl 96rem); max-md: — "gacha".
• hover: v4 da @media (hover: hover) ichida; motion-reduce:/motion-safe: — harakat sozlamasi.
• group — ota holati, peer — oldingi qo'shni holati; has-*, aria-*, data-*, *:, before: — atribut va tuzilma bo'yicha.
• Arbitrary qiymat — bg-[#2f6b3a], text-(--rang-urgu), bo'sh joy o'rniga _; ko'p takrorlansa — mavzuga chiqarish kerak.

Keyingi dars: Tailwind CSS 3: v4 konfiguratsiyasi — @theme, @utility, @custom-variant — «Bahor» ranglarini Tailwind mavzusiga qo'shish va dark: ni o'z temamizga moslash.

Manbalar

• Tailwind CSS: "Hover, focus, and other states" — tailwindcss.com/docs/hover-focus-and-other-states
• Tailwind CSS: "Responsive design" — tailwindcss.com/docs/responsive-design
• Tailwind CSS: "Adding custom styles" (arbitrary values) — tailwindcss.com/docs/adding-custom-styles