У Tailwind CSS v4.2 додали чотири нові палітри кольорів

Tailwind CSS v4.2.0 додає новий плагін для webpack, чотири палітри кольорів за замовчуванням, повний набір утиліт логічних властивостей для відступів і бордерів у block-напрямі, а також нові утиліти розмірів inline/block, що відповідають CSS логічним властивостям sizing.

Головні нововведення:

• Новий пакет-плагін @tailwindcss/webpack
• Чотири нові кольори в темі за замовчуванням: mauve, olive, mist і taupe
• Утиліти для block-напряму: padding, margin, border, scroll padding та scroll margin
• Логічні inset-утиліти (inset-s-*, inset-e-*, inset-bs-*, inset-be-*)
• Утиліти розмірів inline/block (inline-*, block-* та варіанти min/max)
• Утиліта font-features-* для font-feature-settings
• start-* і end-* позначені як застарілі — натомість використовуйте inline-s-* і inline-e-*

Що нового

Плагін для webpack

Новий пакет @tailwindcss/webpack робить Tailwind CSS повноцінним плагіном для webpack:

// webpack.config.js
import tailwindcss from '@tailwindcss/webpack';
 
export default {
  plugins: [new tailwindcss()],
};

Нові палітри кольорів

У темі за замовчуванням з’явилися чотири нові палітри: mauve, olive, mist і taupe. Вони працюють з усіма стандартними колірними утилітами та кроками шкали:

<div class="bg-mauve-100 text-mauve-900">Mauve</div>
<div class="bg-olive-200 border border-olive-400">Olive</div>
<div class="bg-mist-50 text-mist-700">Mist</div>
<div class="bg-taupe-300 hover:bg-taupe-400">Taupe</div>

Утиліти логічних властивостей

Реліз додає набір утиліт для CSS логічних властивостей у block-напрямі, які відображаються на фізичні top/bottom з урахуванням writing-mode і напрямку тексту:

Padding block:

<div class="pbs-4 pbe-8">
  <!-- padding-block-start: 1rem; padding-block-end: 2rem -->
</div>

Margin block:

<div class="mbs-6 mbe-2">
  <!-- margin-block-start: 1.5rem; margin-block-end: 0.5rem -->
</div>

Border block:

<div class="border-bs border-be border-gray-300">
  <!-- border-block-start and border-block-end -->
</div>

Scroll padding and margin block:

<div class="scroll-pbs-4 scroll-mbe-2">
  <!-- scroll-padding-block-start and scroll-margin-block-end -->
</div>

Logical inset:

Утиліти inset-s-*, inset-e-*, inset-bs-* і inset-be-* покривають логічне позиціювання для inline-start, inline-end, block-start і block-end відповідно:

<div class="absolute inset-bs-0 inset-be-0 inset-s-4">
  <!-- pinned to block-start and block-end, offset from inline-start -->
</div>

Утиліти розмірів inline/block

Додано утиліти, що відповідають CSS властивостям inline-size і block-size — логічним еквівалентам width і height. Доступні всі стандартні значення шкали розмірів, а також варіанти min-* і max-*:

<!-- Logical width (inline-size) -->
<div class="inline-64 min-inline-0 max-inline-full">...</div>
 
<!-- Logical height (block-size) -->
<div class="block-32 min-block-screen max-block-none">...</div>

Утиліта font-features-*

Нова утиліта font-features-* надає доступ до CSS-властивості font-feature-settings. Це дозволяє вмикати або вимикати OpenType-фічі шрифтів — наприклад, лігатури, малі капітелі та табличні цифри:

<p class="font-features-['liga','calt']">Text with ligatures and contextual alternates</p>

Застаріле

Утиліти start-* і end-* оголошені застарілими — натомість використовуйте inline-s-* і inline-e-*. Нові назви узгоджуються з загальною номенклатурою логічних властивостей, що з’явилася разом з утилітами для block-напряму та розмірів. Оновіть використання під час апгрейду:

<!-- Deprecated -->
<div class="start-4 end-0">...</div>
 
<!-- Preferred -->
<div class="inline-s-4 inline-e-0">...</div>

Посилання

• GitHub Release
• Changelog