Skip to main content

Що робить JIT (Just-In-Time) компілятор у Tailwind?

JIT-компілятор у Tailwind відповідає за миттєву генерацію класів "за вимогою", тобто він створює CSS-стилі тільки для тих utility-класів, які реально трапляються в проєкті, і робить це під час розробки, а не заздалегідь.


Навіщо це потрібно

До JIT Tailwind генерував величезний CSS з усіма можливими утилітами. Після появи JIT підхід змінився:

Було (старий режим)Стало (JIT)
генеруються всі утиліти заздалегідьгенерується тільки те, що використовується
великий підсумковий CSSмінімальний CSS
немає миттєвої реакції на нові класиновий клас з'являється миттєво

Що конкретно робить JIT

1. Генерує стилі "на льоту" Щоразу, коли в HTML/JSX/Blade/Vue тощо з'являється новий utility-клас, Tailwind одразу створює для нього CSS, без перезапуску збірки.

2. Підтримує довільні значення Можна писати так, і JIT згенерує правило автоматично:

html
<div class="w-[37%] bg-[#3b82f6] mt-[13px]"></div>

У старому режимі це було неможливо.

3. Сильно зменшує підсумковий CSS Тому що JIT не генерує "сміття" - тільки те, що реально використовується.

4. Прискорює розробку Оновлення з'являються миттєво, без очікування довгої перекомпіляції.


Як працює пайплайн JIT усередині

javascript
Ти змінюєш HTML/JSX/шаблон JIT сканує класи Генерує недостатні утиліти PostCSS виконує решту плагінів (автопрефікси / мінімізація) Оновлений CSS віддається браузеру

Підсумкове визначення

JIT у Tailwind - це компілятор, який генерує CSS-правила динамічно, тільки для використовуваних класів, миттєво оновлюючи результат при змінах у проєкті.

Якщо потрібно, можу продовжити з питаннями про Purge, конфіг Tailwind, його плюси/мінуси або best practices.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.