Более быстрый и мощный движок по запросу для Tailwind CSS v2.1+.
Эта функция в настоящее время находится на стадии превью. Предварительные функции не охватываются семантическим управлением версиями, и некоторые детали могут измениться, поскольку мы продолжаем их совершенствовать.
Tailwind CSS v2.1 представляет новый своевременный компилятор для Tailwind CSS, который генерирует ваши стили по запросу, когда вы создаете свои шаблоны, вместо того, чтобы создавать все заранее во время начальной сборки.
Это дает множество преимуществ:
focus-visible, active, disabled и другие обычно не включаются по умолчанию из-за соображений размера файла. Поскольку эта библиотека генерирует стили по запросу, вы можете использовать любой вариант, какой захотите, когда захотите. Вы даже можете складывать их, например, sm:hover:active:disabled:opacity-75. Никогда больше не настраивайте свои варианты.top: -113px для причудливого фонового изображения? Поскольку стили генерируются по запросу, вы можете просто сгенерировать для этого утилиту по мере необходимости, используя обозначение в квадратных скобках, например top-[-113px]. Также работает с вариантами, такими как md:top-[-113px].Чтобы увидеть это в действии, посмотрите наше анонсирующее видео.
Чтобы включить режим JIT, установите для параметра mode значение 'jit' в файле tailwind.config.js:
// tailwind.config.js
module.exports = {
+ mode: 'jit',
purge: [
// ...
],
theme: {
// ...
}
// ...
}Поскольку в режиме JIT ваш CSS создается по запросу путем сканирования файлов шаблонов, очень важно настроить опцию purge в файле tailwind.config.js со всеми вашими путями к шаблонам, иначе ваш CSS будет пуст:
// tailwind.config.js
module.exports = {
mode: 'jit',
+ // Эти пути являются лишь примерами, настройте их в соответствии со структурой вашего проекта
+ purge: [
+ './public/**/*.html',
+ './src/**/*.{js,jsx,ts,tsx,vue}',
+ ],
theme: {
// ...
}
// ...
}Теперь, когда вы запускаете свой сервер разработки или сборщик, Tailwind будет генерировать ваши стили по запросу, вместо того, чтобы создавать все заранее.
Возникли проблемы? Смотрите раздел устранения неполадок, чтобы узнать, как исправить распространенные проблемы.
Поскольку стили создаются по запросу, нет необходимости настраивать, какие варианты доступны для каждого основного плагина.
<input class="disabled:opacity-75">Вы можете использовать такие варианты, как focus-visible, active, disabled, even и другие, в сочетании с любой утилитой, не внося никаких изменений в файл tailwind.config.js.
Все варианты можно комбинировать вместе, чтобы легко ориентироваться в очень специфических ситуациях без написания собственного CSS.
<button class="md:dark:disabled:focus:hover:bg-gray-400">Многие утилиты поддерживают произвольные значения с использованием новой записи в квадратные скобки, чтобы указать, что вы «вырываете» свою дизайн-систему.
<!-- Размеры и расположение -->
<img class="absolute w-[762px] h-[918px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/crazy-background-image.png">
<!-- Цвета -->
<button class="bg-[#1da1f1]">Поделиться в Твиттере</button>
<!-- Сложные сетки -->
<div class="grid-cols-[1fr,700px,2fr]">
<!-- ... -->
</div>Это очень полезно для создания идеальных по пикселям дизайнов, где есть несколько элементов, требующих гиперспецифических стилей, например, тщательно расположенное фоновое изображение на маркетинговом сайте.
Скорее всего, в будущем мы добавим некоторую форму «строгого режима» для требовательных к власти руководителей команд, которые не доверяют своим коллегам ответственно использовать эту функцию.
Обратите внимание, что вам все равно нужно писать очищаемый HTML при использовании произвольных значений, и ваши классы должны существовать как полные строки для Tailwind чтобы правильно их обнаружить.
Не используйте конкатенацию строк для создания имен классов
<div className={`mt-[${size === 'lg' ? '22px' : '17px' }]`}></div>Динамически выбирайте полное имя класса
<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>Tailwind не включает в себя какую-либо среду выполнения на стороне клиента, поэтому имена классов должны быть статически извлекаемыми во время сборки и не могут зависеть от каких-либо произвольных динамических значений, которые меняются на клиенте. Используйте встроенные стили для этих ситуаций или объедините Tailwind с библиотекой CSS-in-JS, такой как Emotion, если это имеет смысл для вашего проекта.
Произвольные значения не могут быть вычислены из динамических значений
<div class="bg-[{{ userThemeColor }}]"></div>Используйте встроенные стили для действительно динамических или определяемых пользователем значений
<div style="background-color: {{ userThemeColor }}"></div>Также важно отметить, что классы CSS не могут содержать пробелы, что означает, что вы не можете использовать произвольные значения, такие как calc(100px - 4rem) или 1fr 700px 2fr как есть. Чтобы использовать такие произвольные значения в именах ваших классов, вам нужно удалить пробелы в таких вещах, как вызовы calc, и заменить их запятыми в списках, таких как 1fr 700px 2fr. Tailwind автоматически повторно вводит пробелы в вызовах calc и заменяет запятые пробелами в списках при генерации соответствующего CSS.
Не используйте пробелы в произвольных значениях
<div class="h-[calc(1000px - 4rem)]">...</div>
<div class="grid-cols-[1fr 700px 2fr]">...</div>Удалите пробелы или замените их запятыми, если это необходимо
<div class="h-[calc(1000px-4rem)]">...</div>
<div class="grid-cols-[1fr,700px,2fr]">...</div>Если вы используете переменную CSS в качестве произвольного значения, это может иногда приводить к тому, что имена классов неоднозначны для движка, например:
<!-- Это утилита размера шрифта или утилита цвета текста? -->
<div class="text-[var(--mystery-var)]">В этих ситуациях вы можете указать движку, добавив к произвольному значению префикс имени типа:
<div class="text-[color:var(--mystery-var)]">Поддерживаемые типы:
lengthcoloranglelistВы можете сделать любую утилиту важной, добавив в ее начало символ !:
<p class="font-bold !font-medium">
Это будет средний размер, даже если жирный шрифт появится позже в CSS.
</p>! всегда стоит в начале имени утилиты, после любых вариантов, но перед любым префиксом:
<div class="sm:hover:!tw-font-bold">Это может быть полезно в редких ситуациях, когда вам нужно повысить специфичность, потому что вы ведете войну с некоторыми стилями, которые вы не контролируете.
Вместо использования таких утилит, как bg-opacity-50, text-opacity-25 или placeholder-opacity-40, JIT-движок позволяет вам просто добавить непрозрачность прямо к концу цвета:
- <div class="bg-red-500 bg-opacity-25">
+ <div class="bg-red-500/25">Это означает, что теперь вы можете изменять непрозрачность цветов в любом месте Tailwind, даже там, где раньше у нас не было специальных утилит непрозрачности, например, в градиентах:
<div class="bg-gradient-to-r from-red-500/50">Значения непрозрачности берутся из вашей шкалы opacity, но вы также можете использовать произвольные значения непрозрачности, используя запись в квадратных скобках:
<div class="bg-red-500/[0.31]">Запрошенный с 2017 года, но оставленный из-за соображений размера файла, механизм JIT наконец-то добавляет поддержку для установки цвета границы для каждой стороны элемента независимо:
<div class="border-2 border-t-blue-500 border-r-pink-500 border-b-green-500 border-l-yellow-500">
<!-- ... -->
</div>Механизм JIT добавляет поддержку стилизации псевдоэлементов, таких как ::before, ::after, ::first-letter, ::first-line, ::marker и ::selection.
<div class="before:block before:bg-blue-500 after:flex after:bg-pink-300">Когда вы добавляете любой вариант before или after, свойство content автоматически устанавливается на "", чтобы убедиться, что элемент действительно виден. Чтобы изменить свойство содержимого, используйте новые утилиты контента.
Как уже упоминалось, мы также добавили поддержку других псевдоэлементов, таких как ::selection, которые позволяют стилизовать выделенный текст:
<p class="selection:bg-yellow-300 ...">
Я жёлтый, когда ты меня выделяешь.
</p>Или псевдоэлемент ::marker, который позволяет вам стилизовать маркеры списка:
<ul class="marker:text-gray-500">
<li>Odio et sed.</li>
<li>Voluptatem perferendis optio est id.</li>
<li>Accusamus et aut odit.</li>
</ul>Мы добавили новые утилиты content-* для установки свойства content - они очень полезны наряду с новыми вариантами before и after variants:
<div class="before:content-['hello'] before:block ...">Они даже поддерживают такие вещи, как функция attr, поэтому вы можете ссылаться на значение, хранящееся в атрибуте:
<div data-content="hello world" class="before:content-[attr(data-content)] before:block ...">В дополнение к существующим вещам, таким как hover, focus и другие, мы добавили поддержку каждого псевдокласса, который, по нашему мнению, имеет хоть какой-то смысл, например, required, invalid, placeholder-shown и многое другое.
<input class="invalid:border-red-500 ...">Вот полный список новых вариантов псевдокласса:
only (для only-child)first-of-typelast-of-typeonly-of-typetargetdefaultindeterminateplaceholder-shownautofillrequiredvalidinvalidin-rangeout-of-rangeТеперь вы можете установить цвет курсора в полях формы с помощью новых утилит caret-{color}:
<input class="caret-red-500">Их можно настроить с помощью клавиши caretColor в разделе theme вашего файла tailwind.config.js.
Подобно вариантам group-* , которые мы поддерживали годами для стилизации элемента на основе родительского состояния, вы можете использовать новые варианты peer-* для стилизации элемента на основе состояния одного из его предыдущих братьев и сестер:
<label>
<input type="checkbox" class="peer sr-only">
<span class="h-4 w-4 bg-gray-200 peer-checked:bg-blue-500">
<!-- ... -->
</span>
<!-- ... -->
</label>Просто отметьте интересующего вас предыдущего брата классом peer, затем используйте такие варианты, как peer-hover, peer-checked, peer-focus и т. д., чтобы стилизовать ваш элемент в зависимости от состояния этот брат.
Классы transform, filter и backdrop-filter больше не нужны для «включения» их соответствующего набора составных утилит.
- <div class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm">
+ <div class="scale-50 grayscale backdrop-blur-sm">Теперь эти функции автоматически включаются каждый раз, когда вы используете любую из соответствующих вспомогательных утилит.
Мы рассматриваем JIT-движок как предварительную версию того, что мы планируем выпустить как Tailwind CSS v3.0, поэтому есть несколько небольших критических изменений, которые следует учитывать при выборе. Мы действительно не ожидаем, что они повлияют на очень многих людей, но их стоит прочитать. , особенно если вы заметили какие-то тонкие различия в том, как выглядят ваши проекты.
В классическом движке варианты утилит сгруппированы вместе в сгенерированном CSS для каждой утилиты следующим образом:
/* Классический движок */
.bg-black { background-color: #000 }
.hover\:bg-black:hover { background-color: #000 }
.focus\:bg-black:focus { background-color: #000 }
/* ... */
.opacity-75 { opacity: 0.75 }
.hover\:opacity-75:hover { opacity: 0.75 }
.focus\:opacity-75:focus { opacity: 0.75 }
/* ... */
.translate-x-4 { --tw-translate-x: 1rem }
.hover\:translate-x-4:hover { --tw-translate-x: 1rem }
.focus\:translate-x-4:focus { --tw-translate-x: 1rem }В движке JIT варианты группируются вместе на вариант:
/* JIT движок */
.bg-black { background-color: #000 }
.opacity-75 { opacity: 0.75 }
.translate-x-4 { --tw-translate-x: 1rem }
/* ... */
.hover\:bg-black:hover { background-color: #000 }
.hover\:opacity-75:hover { opacity: 0.75 }
.hover\:translate-x-4:hover { --tw-translate-x: 1rem }
/* ... */
.focus\:bg-black:focus { background-color: #000 }
.focus\:opacity-75:focus { opacity: 0.75 }
.focus\:translate-x-4:focus { --tw-translate-x: 1rem }Это означает, что больше невозможно указать порядок вариантов для каждого основного плагина - варианты всегда будут в одном порядке для всех утилит. Это может быть проблемой для вас, если ранее вам нужно было hover, чтобы обойти focus, например, для конкретной утилиты, и вы гарантировали, что hover появится после focus в списке вариантов.
// tailwind.config.js
module.exports {
// Конфигурация вариантов (включая порядок) не соблюдается механизмом JIT
- variants: {
- // ...
- backgroundColor: ['focus', 'hover']
- }
}Чтобы справиться с этими ситуациями с помощью механизма JIT, мы рекомендуем вместо этого использовать варианты с накоплением:
<!-- Это гарантирует, что элемент будет синим при наведении, даже если он также сфокусирован -->
<div class="focus:bg-red-500 hover:bg-blue-500 hover:focus:bg-blue-500">Сложенные варианты позволяют вам указать, как что-то должно быть стилизовано, когда одновременно активны несколько вариантов, поэтому вместо того, чтобы пытаться переопределить стили focus с помощью стилей hover, вы явно объявляете, как должен выглядеть элемент, когда оба hover и focus активны одновременно.
В классическом движке все варианты утилит вводятся как часть директивы @tailwind utilities.
В движке JIT варианты вводятся в директиве @tailwind variants, которая была переименована из @tailwind screens.
Эта директива является необязательной (как всегда была @tailwind screens) и полезна только в том случае, если вы хотите явный контроль над тем, куда вводятся варианты утилит. По умолчанию они всегда вводятся в самый конец вашей таблицы стилей.
Если вы раньше использовали @tailwind screens, вам следует обновить свой код, чтобы использовать @tailwind variants:
@tailwind base;
@tailwind components;
@tailwind utilities;
- @tailwind screens;
+ @tailwind variants;
/* Некоторые кастомные CSS... */Функция @tailwind variants считается расширенным аварийным выходом, и мы рекомендуем по умолчанию опускать ее. Вы должны использовать его только в том случае, если ваш проект не будет работать должным образом без него, что действительно верно только в том случае, если вы вводите Tailwind в устаревшую систему с очень хрупкой существующей кодовой базой CSS, которая имеет стили, которые абсолютно должны быть в самом конце таблицы стилей, чтобы все работало.
Классы transform, filter и backdrop-filter не нужны для “включения” этих функций при использовании JIT-движка:
- <div class="transform scale-50 filter grayscale backdrop-filter backdrop-blur-sm">
+ <div class="scale-50 grayscale backdrop-blur-sm">Это означает, что вы больше не можете ожидать, что преобразования и фильтры будут бездействующими по умолчанию и будут условно активированы путем добавления transform, filter или backdrop-filter.
Вместо этого вы захотите поместить любые варианты в сами вспомогательные утилиты:
- <div class="scale-105 -translate-y-1 hover:transform">
+ <div class="hover:scale-105 hover:-translate-y-1">Этот новый движок поддерживает почти все функции, существующие в классическом движке, а также множество новых функций, которые были бы невозможны, если бы все было заранее сгенерировано заранее.
Однако из-за особенностей работы движка есть несколько вещей, которые в настоящее время невозможны:
safelist не поддерживает регулярные выражения. Поскольку по умолчанию CSS не создается, список надежных отправителей должен быть списком полных имен классов. Невозможно добавить регулярное выражение в список надежных отправителей, потому что нет заранее созданного списка имен классов, который мог бы соответствовать этому регулярному выражению.prefix не может определять полные имена классов при настройке как функции. Поскольку мы не генерируем имена классов заранее, мы можем передать служебное «пространство имен» только пользовательским префиксным функциям. Смотрите этот комментарий в качестве примера.@apply, которые являются частью ядра, сгенерированы плагинами или определены в правиле @layer. В настоящее время вы не можете использовать @apply произвольные классы CSS, которые не определены в правиле @layer, хотя мы можем добавить поддержку для этого в будущем.Мы также все еще решаем некоторые проблемы совместимости с некоторыми инструментами сборки, за которыми вы можете следить в нашем трекере проблем.
Если вы столкнетесь с другими проблемами или обнаружите какие-либо ошибки, пожалуйста, откройте проблему, чтобы мы могли исправить это.
Когда JIT-движок работает в режиме просмотра, вы можете заметить, что когда вы добавляете класс в свой HTML, а затем удаляете его, этот класс все еще присутствует в вашем CSS.
Это не ошибка, а скорее преднамеренная оптимизация производительности, которая резко увеличивает скорость инкрементных перестроек, особенно в больших проектах.
Мы рекомендуем вам всегда компилировать свой CSS в отдельную разовую сборку перед развертыванием в производственной среде, чтобы вы могли минимизировать вывод. Для большинства современных инструментов (например, Next.js) такие вещи происходят автоматически, потому что ваш скомпилированный CSS никогда не привязан к контролю версий.
Если вы хотите, чтобы Tailwind полностью перестроил CSS с нуля в режиме просмотра, сохранение файла tailwind.config.js или входного файла CSS сделает недействительными все кеши и вызовет новую перестройку.
Начиная с Tailwind CSS v2.2 +, механизм JIT зависит от сообщений о зависимостях каталогов PostCSS, чтобы зарегистрируйте файлы содержимого как зависимости сборки CSS с помощью инструмента сборки. Это довольно новое дополнение к PostCSS (добавлено в мае 2021 года), и еще не все инструменты сборки были обновлены для их поддержки.
Если ваш CSS не перестраивается при изменении файлов содержимого, попробуйте установить TAILWIND_MODE=watch как часть сценария наблюдения, чтобы Tailwind использовал вместо этого устаревшую стратегию отслеживания зависимостей, которая хорошо работает со многими инструментами сборки.
Например, если вы используете postcss-cli, установите TAILWIND_MODE=watch в свой сценарий dev/watch:
// package.json
{
// ...
scripts: {
// Установите TAILWIND_MODE=watch при запуске сервера разработки
"dev": "TAILWIND_MODE=watch postcss -i tailwind.css -o build.css --watch",
// Не устанавливайте TAILWIND_MODE для разовых сборок
"build": "postcss -i tailwind.css -o build.css --minify",
// ...
},
// ...
}Если вы используете Windows, мы рекомендуем cross-env для установки переменных среды в ваших скриптах.
Обратите внимание, что установка TAILWIND_MODE=watch запускает длительный процесс наблюдения в фоновом режиме, поэтому, если вы установите эту переменную среды при попытке выполнить одноразовую сборку, это будет выглядеть так, как будто сборка зависает.
Вы должны устанавливать TAILWIND_MODE=watch только тогда, когда вы фактически запускаете процесс разработки server/watch, и только если ваш инструмент сборки еще не поддерживает сообщения о зависимостях каталогов PostCSS. Этот флаг является временным решением для несовместимых инструментов и в конечном итоге будет удален в будущей версии Tailwind CSS.
Если кажется, что ваш CSS перестраивается в бесконечном цикле, есть большая вероятность, что ваш инструмент сборки не поддерживает параметр glob в PostCSS при регистрации зависимостей.
Многие инструменты сборки (например, webpack) не поддерживают эту опцию, и в результате мы можем сказать им только смотреть определенные файлы или все каталоги. Например, мы не можем указать webpack смотреть только файлы *.html в каталоге.
Это означает, что если создание вашего CSS приводит к изменению любых файлов в этих каталогах, будет запущена перестройка, даже если измененный файл не соответствует расширению в вашем glob.
// tailwind.config.js
module.exports = {
purge: [
// Ваш CSS будет перестроен в любое время *любой* файл в `src` изменится
'./src/**/*.{html,js}',
],
// ...
}Итак, если вы следите за изменениями в src/**/*.html, но записываете выходной файл CSS в src/css/styles.css, вы получите бесконечный цикл перестройки в некоторых инструментах.
В идеале мы могли бы предупредить вас об этом в консоли, но многие инструменты прекрасно это поддерживают (включая наш собственный инструмент CLI), и у нас нет надежного способа определить, какой инструмент сборки вы используете.
У вас есть несколько вариантов решения этой проблемы:
Используйте более конкретные пути в конфигурации purge. Убедитесь, что вы включили только каталоги, которые не изменятся при сборке CSS.
// tailwind.config.js
module.exports = {
purge: [
- './src/**/*.{html,js}',
+ './src/pages/**/*.{html,js}',
+ './src/components/**/*.{html,js}',
+ './src/layouts/**/*.{html,js}',
+ './src/index.html',
],
// ...
}При необходимости отрегулируйте фактическую структуру каталогов проекта, чтобы убедиться, что вы можете настроить таргетинг на файлы шаблонов, не перехватывая случайно файл CSS или другие артефакты сборки, например файлы манифеста.
Используйте инструмент сборки с поддержкой PostCSS glob. Если вы абсолютно не можете изменить конфигурацию очистки или структуру каталогов, лучше всего скомпилировать CSS отдельно с помощью инструмента, который имеет полную поддержку glob. Мы рекомендуем использовать Tailwind CLI, который представляет собой быстрый, простой, специально созданный инструмент для компиляции вашего CSS с помощью Tailwind.
Если у вас возникли странные, трудно описываемые проблемы с выходными данными или что-то просто не кажется, что они вообще работают, есть большая вероятность, что это связано с тем, что ваш инструмент сборки не поддерживает сообщения о зависимостях PostCSS должным образом (или вообще). Одним из известных примеров этого в настоящее время является Stencil.
Когда у вас возникают такие проблемы, мы рекомендуем использовать инструмент Tailwind CLI для отдельной компиляции CSS вместо того, чтобы пытаться интегрировать Tailwind в существующие инструменты.
Вы можете использовать такие пакеты, как npm-run-all или concurrently, чтобы скомпилировать ваш CSS вместе с вашей обычной командой разработки, добавив несколько скриптов в ваш проект, например:
// package.json
{
// ...
"scripts": {
"dev": "npm-run-all --parallel dev:*",
"dev:parcel": "parcel serve ./src/index.html",
"dev:css": "tailwindcss -o src/tailwind.css --watch",
"build": "npm-run-all build:css build:parcel",
"build:parcel": "parcel build ./src/index.html",
"build:css": "tailwindcss -o src/tailwind.css --minify",
},
}В любом случае обязательно проверьте наличие существующей проблемы или откройте новую, чтобы мы могли выяснить проблему и попытаться улучшить совместимость с любым инструментом, который вы используете.
К инструментам с известными проблемами совместимости в настоящее время относятся: