18. JIT и Arbitrary Values

Tailwind CSS: JIT и Arbitrary Values

JIT (Just-in-Time) compiler появился в Tailwind v2.1 и стал обязательным в v3. Он революционизировал разработку — теперь CSS генерируется мгновенно для любого класса, включая нестандартные значения в квадратных скобках.

Что изменил JIT

До JIT (Tailwind v2 без JIT):

• Tailwind генерировал огромный CSS файл со ВСЕМИ возможными классами (~3MB)
• Нестандартные значения невозможны — только то, что в конфиге
• Медленная пересборка при изменениях

После JIT (v3+):

• CSS генерируется только для используемых классов
• Мгновенная пересборка (несколько миллисекунд)
• Arbitrary values — любые нестандартные значения через [...]
• Маленький продакшн-бандл (обычно 5-15KB)

Arbitrary Values — нестандартные значения

Вместо того чтобы добавлять каждое нестандартное значение в конфиг, используй [...]:

<!-- Нестандартный padding -->
<div class="p-[13px]">padding: 13px</div>
<div class="mt-[100px]">margin-top: 100px</div>

<!-- Нестандартный цвет -->
<div class="bg-[#1a1a2e]">фон #1a1a2e</div>
<div class="text-[rgb(255,100,0)]">оранжевый текст</div>
<div class="border-[hsl(200,50%,50%)]">граница HSL</div>

<!-- Нестандартный размер -->
<div class="w-[320px]">ширина 320px</div>
<div class="h-[calc(100vh-64px)]">высота с calc()</div>
<div class="max-w-[720px]">max-width 720px</div>

<!-- Нестандартный font-size -->
<p class="text-[15px]">15px — между sm(14px) и base(16px)</p>
<p class="text-[1.15rem]">1.15rem</p>

<!-- Grid template -->
<div class="grid-cols-[250px,1fr,auto]">
  <!-- 250px | гибкий | авто -->
</div>

<!-- CSS Grid Areas -->
<div class="grid-areas-['header','sidebar_content']">...</div>

Arbitrary Properties — любое CSS свойство

<!-- Любое CSS свойство через [property:value] -->
<div class="[mask-type:alpha]">mask-type: alpha</div>
<div class="[scroll-snap-type:x_mandatory]">scroll snap</div>
<div class="[counter-increment:section]">counter</div>

<!-- Со значениями содержащими пробелы — используй _ (underscores) -->
<div class="[background-image:url('/img.png')]">фон из файла</div>
<div class="[clip-path:polygon(0_0,100%_0,100%_75%,0_100%)]">clip</div>

Arbitrary Variants — нестандартные псевдоклассы

<!-- Нестандартный псевдокласс -->
<li class="[&:nth-child(3)]:bg-blue-100">3-й элемент</li>

<!-- CSS-in-JS стиль правил -->
<div class="[@media(min-width:900px)]:grid-cols-3">
  <!-- Кастомный медиа-запрос -->
</div>

<!-- Кастомный атрибут -->
<div class="[&[data-state=open]]:bg-blue-100">
  Активный при data-state="open"
</div>

<!-- :has() selector -->
<div class="[&:has(input:checked)]:bg-blue-50">
  Содержит checked инпут
</div>

Tailwind v4: что меняется

Tailwind v4 (2025) — полная переработка:

npm install tailwindcss@next @tailwindcss/vite

Главные изменения:

1. Конфиг переезжает в CSS:

/* v4 — нет tailwind.config.js, всё в CSS */
@import "tailwindcss";

@theme {
  --color-brand: oklch(0.5 0.2 250);
  --font-display: "Inter", sans-serif;
  --spacing-128: 32rem;
}

2. Новый движок (Oxide) — x10 быстрее:

• Написан на Rust
• Full build меньше 100ms (было 3-5 секунд)
• Incremental — перестраивает только изменённое

3. Автоматическое определение контента:

/* v4 — не нужно указывать content пути */
@import "tailwindcss";
/* Сам находит файлы в проекте */

4. CSS-first конфиг:

@import "tailwindcss";
/* Импорт как плагин */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

5. Новые фичи:

<!-- Container Queries встроены (не нужен плагин) -->
<div class="@container">
  <div class="@md:grid-cols-2">...</div>
</div>

<!-- 3D transforms -->
<div class="rotate-x-12 perspective-500">3D поворот</div>

<!-- Новые варианты -->
<div class="starting:opacity-0">@starting-style анимации</div>
<div class="not-*:text-gray-400">:not() selector</div>

v3 vs v4 — сравнение

Функция	v3	v4
Конфиг	tailwind.config.js	CSS @theme {}
Производительность	Хорошая	~10x быстрее
Arbitrary values	✅	✅
Container Queries	Плагин	Встроено
3D transforms	Нет	Встроено
CSS variables	Ручная настройка	Автоматически

Практика