Стилізація Scrollbar та утиліти Container Size у Tailwind CSS v4.3.0

Tailwind CSS v4.3.0 отримав інструменти для стилізації scrollbar, можливість зчитувати розмір контейнера в container queries, а директива @variant стала достатньо гнучкою для роботи зі складними та комбінованими варіантами безпосередньо в CSS.

• Утиліти для ширини, кольору та відступів scrollbar
• Нова утиліта @container-size для одиниць вимірювання container queries
• Утиліти zoom-* та tab-*
• Підтримка каскадних та комбінованих варіантів у @variant
• Підтримка --default(…) всередині --value(…) та --modifier(…)

# Що нового

# Стилізація Scrollbar

У Tailwind CSS v4.3.0 з'явилися вбудовані утиліти для стилізації смуг прокрутки. Тепер ви можете керувати їхньою шириною та кольором, а також резервувати місце під scrollbar (gutter), щоб уникнути стрибків макета при його появі.

<div class="scrollbar-thin scrollbar-thumb-slate-500 scrollbar-track-slate-100 overflow-y-auto">
  <!-- контент -->
</div>
 
<div class="scrollbar-gutter-stable">
  <!-- резервує місце, щоб макет не «стрибав» -->
</div>

PRs: #19981, #20019, #20018

# Утиліта @container-size

Після релізу container queries у четвертій версії, це оновлення додає @container-size. Утиліта дозволяє використовувати розмір контейнера для елементів всередині нього. Вона доповнює @container у випадках, коли макет має адаптуватися до розмірів батьківського елемента, а не всього вікна перегляду (viewport).

PR: #18901

# Утиліти zoom-* та tab-*

Ще дві властивості CSS отримали власні утиліти. zoom-* дозволяє масштабувати контент без впливу на потік розмітки, а tab-* керує tab-size для елементів, де важливо зберігати пробіли, наприклад, у блоках <pre>.

PRs: #20020, #20022

# Гнучкий синтаксис @variant

Директива @variant тепер підтримує той самий синтаксис каскадних та комбінованих варіантів, що і назви класів. Це дозволяє писати CSS-правила для hover:focus (обидва одночасно) або hover, focus (будь-який з них) без розділення на кілька окремих записів.

@variant hover:focus {
  .my-component {
    outline: 2px solid currentColor;
  }
}
 
@variant hover, focus {
  .my-component {
    background: var(--color-slate-100);
  }
}

PR: #19996

# --default(…) у функціональних утилітах

При створенні власних утиліт через @utility тепер можна використовувати --default(…) всередині --value(…) та --modifier(…). Це дозволяє вказати значення за замовчуванням, якщо аргумент не був переданий. Завдяки цьому кастомні інструменти працюватимуть так само передбачувано, як і вбудовані.

PR: #19989

# Покращення канонізації та оновлення

Інструмент оновлення отримав низку важливих правок. Тепер при використанні tailwindcss upgrade у довільних значеннях зберігаються нижні підкреслення, а оригінальні одиниці вимірювання не конвертуються автоматично (наприклад, mt-[-20in] залишиться незмінним, а не перетвориться на пікселі). Крім того, варіанти :has() автоматично мігрують у скорочену форму has-[…], а інлайнові атрибути style більше не переписуються в класи Tailwind.

Посилання

• Нотатки до релізу
• Повний список змін