Мастер Tailwind CSS с режимом Just-in-Time (JIT)

Опубликовано: 2022-04-23

Фреймворки, ориентированные на полезность, помогают нам быстрее разрабатывать веб-страницы, и Tailwind CSS стал одним из самых популярных. Но быть популярным не значит быть совершенным.

Было несколько проблем при использовании Tailwind CSS, например, наличие огромной таблицы стилей во время разработки и необходимость включать дополнительные варианты самостоятельно, среди прочего. В этом уроке мы сосредоточимся на решении некоторых из этих проблем.

В этом руководстве мы поговорим об очень важной функции CSS-фреймворка Tailwind, известной как JIT-компилятор.

Мы расскажем о возможностях и преимуществах использования JIT-компилятора Tailwind CSS, о том, как его включить, и рассмотрим несколько практических примеров.

Давайте начнем.

Что такое компилятор Tailwind CSS JIT (Just-in-Time)?

Прежде чем мы поговорим о JIT-компиляторе, нам сначала нужно поговорить о Tailwind CSS.

Tailwind CSS — это прежде всего служебная среда CSS с набором предопределенных классов CSS, которые можно применять непосредственно в нашей разметке для ускорения дизайна веб-страниц и обеспечения согласованности дизайна с использованием предопределенных систем.

До выпуска JIT-компилятора размер сгенерированного нами файла Tailwind CSS после установки обычно составлял до 3 МБ. Однако по мере того, как вы продолжаете настраивать и настраивать Tailwind, размер файла продолжает увеличиваться — в некоторых случаях вы можете получить таблицу стилей размером до 15 МБ.

Хотя все наши неиспользуемые стили будут удалены во время производства, во время разработки это не так. С таблицей стилей размером 10 МБ или даже 20 МБ мы неизбежно столкнемся с проблемами и заставим наши инструменты разработки отставать.

С JIT-компилятором стили генерируются по мере создания наших проектов. Это означает, что в размер вашей таблицы стилей будут включены только служебные классы, которые вы сейчас используете, а не все служебные классы, поставляемые с Tailwind CSS.

Преимущества использования режима JIT Tailwind CSS

В этом разделе мы обсудим некоторые преимущества использования JIT-компилятора. Они включают:

Ваша таблица стилей одинакова в разработке и производстве.
Более быстрое время сборки.
Все варианты включены по умолчанию.
Компиляция во время разработки происходит намного быстрее.
Генерируются только используемые стили.
Варианты можно суммировать.
Улучшена производительность инструментов разработчика.

Недостатки использования JIT-компилятора Tailwind CSS

Известные в настоящее время ограничения согласно документации GitHub компилятора JIT:

Расширенные параметры PurgeCSS не поддерживаются.
«Вы можете @apply только те классы, которые являются частью ядра, сгенерированы плагинами или определены в правиле @layer . Вы не можете @apply произвольные классы CSS, которые не определены в правиле @layer ».
Есть поддержка только PostCSS 8.

Директива @apply используется для применения служебных классов в нашем пользовательском CSS. Это полезно, когда мы определяем пользовательские стили CSS, но предпочли бы использовать некоторые уже определенные служебные классы. Вот пример того, как работает директива @apply :

 .my-custom-css { @apply text-green-500; }

В приведенном выше коде мы добавили зеленый цвет к пользовательскому классу CSS. Зеленый цвет был применен с помощью вспомогательного класса Tailwind.

Узнайте об очень важной функции CSS-фреймворка Tailwind, известной как JIT-компилятор, из этого полезного руководства. Нажмите, чтобы твитнуть

Как включить режим JIT для Tailwind CSS

Обратите внимание, что на момент написания статьи Tailwind CSS версии 3 уже был выпущен и включается по умолчанию при установке Tailwind CSS. Приведенные ниже пояснения по включению JIT-компилятора не относятся к версии 3 и выше. Все остальные примеры, рассмотренные в этом руководстве, совместимы с версией 3.

Включить JIT-компилятор довольно просто. Все, что вам нужно сделать, это обновить файл tailwind.config.js, добавив свойство режима, которое должно иметь значение «jit».

Вот как должен выглядеть ваш tailwind.config.js:

 module.exports = { mode: 'jit', purge: ['./public/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

Строка, на которой следует сосредоточиться, — это та часть, где мы добавили:

 режим: «джит»

Это позволяет нам использовать возможности JIT-компилятора.

После этого вы можете запустить команду сборки и увидеть, как размер вашего файла уменьшается. Единственные стили, которые вы увидите, будут теми, которые вы используете.

С уменьшенным размером файла ваша таблица стилей во время разработки и производства будет одинаковой. Возможность отставания инструментов разработчика также будет сведена к минимуму, и ваш код компилируется быстрее по мере создания ваших проектов.

Далее мы увидим некоторые практические применения JIT-компилятора.

Это позволяет нам использовать возможности JIT-компилятора.

Далее мы увидим некоторые практические применения JIT-компилятора.

Как использовать JIT-компилятор Tailwind CSS

В этом разделе мы увидим несколько практических примеров JIT-компилятора. Мы начнем с произвольных значений, которые помогут нам расширить систему дизайна Tailwind.

Произвольные значения

Могут возникнуть случаи, когда мы предпочли бы использовать значения вне уже созданной системы дизайна. Эти значения могут относиться к нашим цветам, отступам, полям, ширине и так далее.

Компилятор JIT позволяет нам добиться этого с использованием произвольных значений. Эти произвольные значения позволяют нам вырваться из системы дизайна и определить наши собственные пользовательские значения. Вы увидите эти значения в следующем синтаксисе: [300px], [#FA8072].

Для этого мы должны вложить значение в квадратные скобки, чтобы Tailwind знал, что мы определяем новые значения в нашей системе дизайна. Вот пример ниже:

 <div class="mt-[300px] w-[500px]"> </div>

В приведенном выше примере мы использовали два новых значения — 300px и 500px — которых изначально не было в дизайн-системе. До JIT-компилятора вам, вероятно, приходилось сначала определять эти значения в файле config.js, чтобы добиться такого же эффекта.

В следующем примере показано, как можно определить новые значения цвета:

 <p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

Здесь мы создали абзац с цветом фона лосося. Вы не увидите служебный класс Tailwind, который говорит bg-salmon, но мы можем определить его, используя произвольное значение.

Боретесь с простоями и проблемами WordPress? Kinsta — это решение для хостинга, предназначенное для экономии вашего времени! Ознакомьтесь с нашими возможностями

Стекируемые варианты

С компилятором JIT все варианты включены по умолчанию, поэтому вы можете забыть об использовании файла config.js для включения любого из них. В дополнение к этому, варианты могут быть сложены для достижения потрясающих результатов.

Каждый вариант отделяется двоеточием.

Вот пример:

 <button class="sm:dark:disabled:focus:hover:bg-blue-300">

Приведенный выше код создает кнопку с отключенным свойством focus и становится синей при наведении курсора.

Псевдоэлементы

Компилятор JIT позволяет нам стилизовать псевдоэлемент. Псевдоэлементы используются для стилизации определенных частей элемента, таких как стилизация первой буквы элемента или вставка содержимого до/после элемента.

Вот несколько примеров:

 <p class="first-letter:bg-green-600"> First letter will have a green color </p>

В приведенном выше примере первая буква «М» будет зеленого цвета.

 <p class="selection:bg-green-600"> Highlight this text to see a green color. </p>

Когда вы выделяете текст из приведенного выше кода, он будет иметь зеленый цвет фона.

Цвета границ для каждой стороны

Из-за соображений размера файла эта функция изначально была исключена, но это изменилось с выпуском JIT-компилятора. Мы можем дать каждой границе другой цвет.

Давайте посмотрим на пример этого:

 <div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400"> </div>

Мы задали нашему div несколько цветов границ — верхняя граница красная, правая граница синяя, нижняя граница желтая, а левая граница зеленая.

Режим JIT в Tailwind CSS версии 3

Начиная с Tailwind CSS версии 3 и выше, JIT-компилятор включается по умолчанию при установке Tailwind CSS, поэтому нам не нужно беспокоиться об изменении чего-либо в файле tailwind.config.js . Это позволяет нам получать доступ ко всем функциям JIT-компилятора на ходу. Все, что нам нужно сделать, это следовать инструкциям по установке текущей версии, и мы готовы к работе.

Что такое компилятор JIT... и как он может улучшить ваш сайт? В этом руководстве есть ответ Нажмите, чтобы твитнуть

Резюме

Компилятор JIT вывел CSS-фреймворк Tailwind на совершенно новый уровень. Его выпуск поставляется с новыми полезными функциями, чтобы мы могли лучше использовать фреймворк. Нам больше не нужно беспокоиться о том, что размер нашего файла настолько велик, что наши инструменты разработки запаздывают, поскольку генерируются только те стили, которые мы фактически используем, и все это на ходу.

Мы видели несколько примеров новых функций, таких как варианты наложения, стилизация элементов с использованием псевдоэлементов, использование произвольных значений для расширения нашей системы дизайна и очень востребованная функция — возможность стилизовать каждую сторону границы элемента по отдельности. Здесь мы еще далеко не достигли ограничений возможностей JIT Tailwind, поэтому вашими следующими шагами будет самостоятельное тестирование и изучение того, как вы можете наилучшим образом использовать функции JIT для своей работы.

Что интересного вы создали с помощью JIT-компилятора? Поделитесь своими мыслями в комментариях ниже.