Michael Foster
- Предварительная документация
- Tailwind CSS v4.0 Beta
Предварительная документация
Tailwind CSS v4.0 Beta
Ознакомьтесь с тем, что появится в следующей версии Tailwind CSS.
После длительного периода альфа-тестирования мы с нетерпением ждем возможности наконец-то перевести Tailwind CSS v4.0 в бета-версию!
Определенно есть некоторые шероховатости и вещи, которые мы хотим улучшить, но мы уверены, что не будем вносить больше критических изменений до стабильного релиза.
Эта документация находится в стадии разработки, и мы продолжим улучшать ее в течение периода бета-тестирования, но ее должно быть достаточно, чтобы вы могли приступить к работе.
Если у вас возникнут какие-либо затруднения, дайте нам знать на GitHub , чтобы мы могли подготовить ее к стабильному релизу через пару месяцев.
Начало работы
Установка с помощью Vite
Если вы используете Vite или фреймворк на базе Vite, например SvelteKit или Remix, установите Tailwind вместе с нашим новым специальным плагином Vite:
Terminal
$ npm install tailwindcss@next @tailwindcss/vite@nextДалее добавьте наш плагин Vite в ваш файл vite.config.ts:
vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
tailwindcss()
],
});
Наконец, импортируйте Tailwind в ваш основной файл CSS:
src/index.css
@import "tailwindcss";
Установка с помощью PostCSS
Если ваш проект использует PostCSS или вы используете фреймворк вроде Next.js, который поддерживает плагины PostCSS, установите Tailwind вместе с нашим новым специальным плагином PostCSS:
Terminal
$ npm install tailwindcss@next @tailwindcss/postcss@nextДалее добавьте наш плагин PostCSS в ваш файл postcss.config.js:
postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};
Наконец, импортируйте Tailwind в ваш основной файл CSS:
app.css
@import "tailwindcss";
Установка с помощью CLI
Если вы хотите использовать наш специализированный инструмент CLI, установите Tailwind вместе с нашим новым специализированным пакетом CLI:
Terminal
$ npm install tailwindcss@next @tailwindcss/cli@nextДалее импортируйте Tailwind в ваш основной файл CSS:
app.css
@import "tailwindcss";
Затем скомпилируйте ваш CSS с помощью инструмента CLI:
Terminal
$ npx @tailwindcss/cli -i input.css -o output.cssВы также можете загрузить автономные сборки нового инструмента CLI с GitHub для проектов, которые иным образом не зависят от экосистемы Node.js.
Обновление с 3 версии
Если вы хотите попробовать обновить проект с версии 3 до бета-версии 4, вы можете воспользоваться нашим инструментом обновления, который выполнит большую часть сложной работы за вас:
Terminal
$ npx @tailwindcss/upgrade@nextДля большинства проектов инструмент обновления автоматизирует весь процесс миграции, включая обновление зависимостей, перенос файла конфигурации в CSS и обработку любых изменений в файлах шаблонов.
Мы рекомендуем запустить инструмент обновления в новой ветке, затем внимательно просмотреть разницу и протестировать проект в браузере, чтобы убедиться, что все изменения выглядят правильно. Возможно, вам придется вручную подправить несколько вещей в сложных проектах, но инструмент сэкономит вам массу времени в любом случае.
Также хорошей идеей будет просмотреть все критические изменения в v4.0 и получить хорошее представление о том, что изменилось, на случай, если вам нужно обновить что-то еще в вашем проекте, что инструмент обновления не улавливает.
Что нового в версии 4.0
Новый высокопроизводительный движок
Tailwind CSS v4.0 — это полностью переписанная версия фреймворка, в которой учтено все, что мы узнали об архитектуре за эти годы, и оптимизирована для максимально возможной скорости.
При сравнении производительности на наших собственных проектах мы обнаружили, что полная перестройка выполняется в 3,5 раза быстрее, а инкрементальная сборка — в 8 раз быстрее.
Вот среднее время сборки, которое мы увидели при сравнении производительности Tailwind CSS v4.0 с Catalyst:
| v3.4 | v4.0 Beta | Улучшение | |
|---|---|---|---|
| Полная сборка | 378ms | 100ms | 3.78x |
| Инкрементная перестройка с новым CSS | 44ms | 5ms | 8.8x |
| Инкрементная перестройка без нового CSS | 35ms | 192µs | 182x |
Наиболее впечатляющее улучшение касается инкрементальных сборок, которым на самом деле не нужно компилировать какой-либо новый CSS — эти сборки более чем в 100 раз быстрее и завершаются за микросекунды. И чем дольше вы работаете над проектом, тем больше таких сборок вы встречаете, потому что вы просто используете классы, которые уже использовали раньше, например flex, col-span-2 или font-bold.
Конфигурация CSS-first
Одним из самых больших изменений в Tailwind CSS v4.0 является переход от настройки проекта в JavaScript к настройке в CSS.
Вместо файла tailwind.config.js вы можете настроить все свои настройки непосредственно в файле CSS, в который вы импортируете Tailwind, что дает вам на один файл меньше, о котором нужно беспокоиться в вашем проекте:
app.css
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-avocado-100: oklch(0.99 0 0);
--color-avocado-200: oklch(0.98 0.04 113.22);
--color-avocado-300: oklch(0.94 0.11 115.03);
--color-avocado-400: oklch(0.92 0.19 114.08);
--color-avocado-500: oklch(0.84 0.18 117.33);
--color-avocado-600: oklch(0.53 0.12 118.34);
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
/* ... */
}Новая конфигурация CSS-first позволяет вам делать практически все, что вы могли бы сделать в файле tailwind.config.js, включая настройку токенов дизайна, настройку источников контента, определение пользовательских утилит и вариантов, установку плагинов и многое другое.
Чтобы узнать больше о том, как все это работает, прочтите документацию Подробная конфигурация CSS.
Переменные тем в CSS
Tailwind CSS v4.0 берет все ваши токены дизайна и делает их доступными как переменные CSS по умолчанию, так что вы можете ссылаться на любое значение, которое вам нужно во время выполнения, используя только CSS.
Используя пример @theme из предыдущего примера, все эти значения будут добавлены в ваш CSS как обычные пользовательские свойства:
dist.css
:root {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-avocado-100: oklch(0.99 0 0);
--color-avocado-200: oklch(0.98 0.04 113.22);
--color-avocado-300: oklch(0.94 0.11 115.03);
--color-avocado-400: oklch(0.92 0.19 114.08);
--color-avocado-500: oklch(0.84 0.18 117.33);
--color-avocado-600: oklch(0.53 0.12 118.34);
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
/* ... */
}Это позволяет легко повторно использовать эти значения в качестве встроенных стилей или передавать их в библиотеки, такие как Motion, для их анимации.
Нативные каскадные слои CSS
Мы используем настоящие каскадные слои CSS в v4.0, что упрощает управление приоритетом стилей и их взаимодействием друг с другом.
Вот как выглядит вывод при создании CSS с помощью v4.0:
dist.css
У нас были слои как концепция в Tailwind в течение многих лет, но собственные каскадные слои могут делать вещи, которые мы не могли бы легко воспроизвести во время сборки, например, изолировать стили внутри слоя, даже если они имеют более высокую специфичность, чем стили в другом слое. Меньше кода для нас, чтобы поддерживать!
Автоматическое определение источника
Вы знаете, как вам всегда приходилось настраивать этот раздражающий массив content в Tailwind CSS v3? В v4.0 мы придумали кучу эвристик для автоматического обнаружения всего этого, так что вам вообще не нужно его настраивать.
Например, мы автоматически игнорируем все в вашем файле .gitignore, чтобы избежать сканирования зависимостей или сгенерированных файлов, которые не находятся под контролем версий:
.gitignore
# dependencies
/node_modules
# testing
/coverage
# caches
/.next/
# production
/buildМы также автоматически игнорируем все двоичные расширения, такие как изображения, видео, файлы .zip и т. д.
И если вам когда-нибудь понадобится явно добавить источник, который исключен по умолчанию, вы всегда можете добавить его с помощью директивы @source, прямо в вашем CSS-файле:
app.css
@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";
Директива @source использует ту же эвристику, поэтому она также исключит, например, двоичные типы файлов, без необходимости явно указывать все расширения для сканирования.
Встроенная поддержка импорта
До версии 4.0, если вы хотели встроить другие файлы CSS с помощью @import, вам приходилось настраивать другой плагин, например postcss-import, чтобы он обрабатывал это за вас.
Теперь мы обрабатываем это из коробки, поэтому вам не нужны никакие другие инструменты:
postcss.config.mjs
export default {
plugins: {
'postcss-import': {},
'@tailwindcss/postcss': {},
},
};
Наша система импорта специально создана для Tailwind CSS, поэтому мы смогли сделать ее еще быстрее, тесно интегрировав ее с нашим движком.
Встроенная транспиляция CSS
При сборке для производства Tailwind CSS v4.0 автоматически пропускает ваш CSS через Lightning CSS, который обрабатывает такие вещи, как префиксы поставщиков, транспиляция современных функций, минификация и многое другое.
Это означает, что вы также можете удалить из своего проекта такие инструменты, как autoprefixer и postcss-preset-env:
postcss.config.mjs
export default {
plugins: {
'@tailwindcss/postcss': {},
'postcss-preset-env': {},
'autoprefixer': {},
},
};
В версии 4.0 Tailwind CSS — это единственное, что вам нужно настроить для управления всем конвейером CSS — никаких других инструментов не требуется.
Упрощенная настройка темы
В версии 4.0 мы действительно сократили объем настройки темы, которую вам нужно сделать, особенно для вещей, которые на самом деле не являются токенами дизайна.
Такие утилиты, как grid-cols-12, z-40 и opacity-70, больше не основаны на вашей теме — они просто работают. Нужна ли вам сетка из 5 столбцов или из 73 столбцов, вам не нужно ничего настраивать, чтобы это произошло.
<div class="grid grid-cols-73">
<div>1</div>
<!-- ... -->
<div>73</div>
</div>Мы также применили те же упрощения к таким вариантам, как data-* — вам больше не нужно настраивать их или использовать произвольные значения для простых логических атрибутов:
<div class="opacity-50 data-[selected]:opacity-100" data-selected>
<div class="opacity-50 data-selected:opacity-100" data-selected>
<!-- ... -->
</div>
Эти изменения означают, что вы будете менять конфигурацию темы гораздо реже, и она останется сосредоточенной на важных элементах дизайна, таких как типографика, цветовая палитра и контрольные точки.
Динамическая шкала интервалов
Мы упростили работу утилит интервалов, таких как px-*, mt-*, w-*, h-* и других, выведя их все из одного значения шкалы интервалов, определенного как 0.25rem в теме по умолчанию:
@theme {
--spacing: 0.25rem;
}Когда вы определяете шкалу интервалов таким образом, в вашей шкале интервалов доступно каждое кратное 0.25rem. Это означает, что утилиты вроде mt-21 будут работать без дополнительной настройки, в отличие от v3, где вам приходилось выбирать между mt-20 и mt-24 или переходить к использованию произвольного значения.
А если вам нужны дополнительные ограничения, вы всегда можете отключить переменную --spacing и указать свою собственную явную шкалу:
@theme {
--spacing: initial
--spacing-1: 0.25rem
--spacing-2: 0.5rem
--spacing-4: 1rem
--spacing-8: 2rem
--spacing-12: 3rem
}Модернизированная цветовая палитра P3
Мы обновили всю цветовую палитру по умолчанию с rgb до oklch, воспользовавшись более широкой гаммой, чтобы сделать цвета более яркими в местах, где мы ранее были ограничены цветовым пространством sRGB.
Мы постарались сохранить баланс между всеми цветами таким же, как в v3, поэтому, хотя мы обновили все по всем направлениям, это не должно ощущаться как критическое изменение при обновлении существующих проектов.
Упрощенные переменные цвета
Если вы использовали переменные CSS в своей цветовой палитре в v3, вы, возможно, помните, что приходилось делать странные вещи, например, определять цвета как просто список чисел без включения функции rgb(…) или использовать заполнитель <alpha-value>, чтобы работали модификаторы непрозрачности.
Благодаря новой функции CSS color-mix(…) function ничего из этого не нужно в v4.0 — вы просто определяете свои цвета как переменные, и все функции модификаторов непрозрачности работают автоматически:
app.css
@import "tailwindcss";
@theme {
--color-primary: var(--color-blue-500);
--color-error: var(--color-red-500);
/* ... */
}Теперь, когда вы используете такую утилиту, как bg-primary/50, она просто работает — никаких сложных обходных путей не требуется:
<div class="bg-primary/50">
<!-- ... -->
</div>Поддержка контейнерных запросов
Мы добавили поддержку контейнерных запросов в ядро для v4.0, поэтому вам больше не нужен плагин @tailwindcss/container-queries:
HTML
<div class="@container">
<div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
<!-- ... -->
</div>
</div>Мы также добавили поддержку запросов контейнера максимальной ширины с использованием нового варианта @max-*:
<div class="@container">
<div class="grid grid-cols-3 @max-md:grid-cols-1">
<!-- ... -->
</div>
</div>Как и наши обычные варианты точек останова, вы также можете объединять варианты @min-* и @max-* для определения диапазонов запросов контейнера:
<div class="@container">
<div class="flex @min-md:@max-xl:hidden">
<!-- ... -->
</div>
</div>Поддержка браузером контейнерных запросов теперь really great, и я рад сделать их использование в ваших проектах в версии 4.0 еще проще.
3D-преобразования
Мы наконец-то добавили API для выполнения 3D-преобразований, таких как rotate-x-*, rotate-y-*, scale-z-*, translate-z-* и многое другое.
Michael Foster
<div class="perspective-distant">
<article class="... transform-3d rotate-x-51 rotate-z-43 shadow-xl transition-all duration-500 hover:-translate-y-4 hover:rotate-x-49 hover:rotate-z-38 hover:shadow-2xl">
<!-- ... -->
</article>
</div>Используйте утилиту transform-3d для включения 3D-преобразований, установив правильный transform-style
Повороты
Используйте утилиты rotate-x-*, rotate-y-* и rotate-z-* для поворота элементов в трехмерном пространстве.
Все эти утилиты автоматически поддерживают любые числовые значения из коробки, но вот несколько примеров для справки:
Масштабирование
Используйте новые утилиты scale-z-* для масштабирования элементов по оси z.
Вы можете использовать любое числовое значение, которое хотите автоматически из коробки, но вот несколько примеров для справки:
Перемещение
Используйте новые утилиты translate-z-* для перемещения элементов ближе или дальше:
Эта утилита использует ваш масштаб интервалов по умолчанию и поддерживает все эти значения из коробки, но вот несколько примеров для справки:
Перспектива
Используйте такие утилиты, как perspective-near, perspective-normal и perspective-distant, а также новые утилиты perspective-origin-* для управления перспективой, используемой для 3D-преобразований:
Все утилиты perspective-* можно настроить с помощью пространства имен --perspective-* в вашей теме.
Видимость задней стороны
Используйте новые утилиты backface-visible и backface-hidden, чтобы контролировать, будет ли видна задняя сторона элемента при трансформации в трехмерном пространстве.
Углы линейного градиента
Линейные градиенты теперь поддерживают углы в качестве значений, поэтому вы можете использовать такие утилиты, как bg-linear-45, для создания градиента под углом 45 градусов:
<div class="bg-linear-45 from-indigo-500 via-purple-500 to-pink-500"></div>Вы могли заметить, что мы также переименовали bg-gradient-* в bg-linear-* — скоро вы поймете почему!
Модификаторы интерполяции градиента
Мы добавили возможность управлять режимом интерполяции цвета для градиентов с помощью модификатора, поэтому класс типа bg-linear-to-r/srgb интерполирует с использованием sRGB, а bg-linear-to-r/oklch интерполирует с использованием OKLCH:
<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400"></div>
<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400"></div>Использование полярных цветовых пространств, таких как OKLCH или HSL, может привести к гораздо более ярким градиентам, когда цвета from-* и to-* находятся далеко друг от друга на цветовом круге. Мы используем OKLAB по умолчанию в v4.0, но вы всегда можете выполнить интерполяцию, используя другое цветовое пространство, добавив один из этих модификаторов.
Конические и радиальные градиенты
Мы добавили новые утилиты bg-conic-* и bg-radial-* для создания конических и радиальных градиентов:
<div class="bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600 size-24 rounded-full"></div>
<div class="bg-radial-[at_25%_25%] from-white to-zinc-900 to-75% size-24 rounded-full"></div>Эти новые утилиты работают вместе с существующими утилитами from-*, via-* и to-*, позволяя создавать конические и радиальные градиенты таким же образом, как вы создаете линейные градиенты, и включают модификаторы для настройки метода интерполяции цвета и поддержку произвольных значений для управления такими деталями, как положение градиента.
Встроенные тени и кольца
Мы добавили специальные утилиты inset-shadow-* и inset-ring-* в версии 4.0, которые можно объединить с существующими утилитами shadow-* и ring-*, что дает вам четыре слоя теней, которые вы можете накладывать друг на друга, чтобы создавать эффекты, необходимые для ваших проектов.
Send
Send
<button class="shadow-md inset-shadow-sm inset-shadow-white/20 ring ring-blue-600 inset-ring inset-ring-white/15 ...">
<!-- ... -->
</button>Утилиты inset-ring-* поддерживают любое значение ширины, как и утилиты ring-*, а утилиты inset-shadow-* поставляются с размерами 2xs, xs и sm из коробки. Мы можем добавить больше в будущем, но эти кажутся наиболее полезными прямо сейчас.
@theme {
--inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
--inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
--inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);
}Как и обычные утилиты shadow-* и ring-*, эти обе поддерживают цвета, используя такие классы, как inset-shadow-black/25 и inset-ring-white/50.
Утилиты `field-sizing`
Мы добавили утилиты для нового свойства field-sizing, которое позволяет создавать текстовые области с автоматически изменяемым размером, используя только CSS:
Type in the textarea to see the effect
<label class="block">
<span class="block text-sm/6 font-medium text-gray-900 dark:text-white">Add your comment</span>
<textarea class="field-sizing-content ..."></textarea>
</label>Используйте field-sizing-content, чтобы изменить размер элемента управления в соответствии с его содержимым, или field-sizing-fixed, чтобы задать элементу управления фиксированный размер.
Утилиты `color-scheme`
Вас когда-нибудь раздражало, что ваше приложение отображало светлые полосы прокрутки в темном режиме? Вам нужны эти новые утилиты color-scheme.
Scroll the content to see the scrollbar themes
Light mode
It's a Mammal
Right now there are six-hundred Titleists that I got from the driving range in the trunk of my car. Why don't we drive out to Rock-a-Way… and hit `em into the ocean! Now picture this. we find a nice sweet spot between the dunes, we take out our drivers, we tee up and, that ball goes sailing up into the sky holds there for a moment and then.. gulp!
Dark mode
It's a Mammal
Right now there are six-hundred Titleists that I got from the driving range in the trunk of my car. Why don't we drive out to Rock-a-Way… and hit `em into the ocean! Now picture this. we find a nice sweet spot between the dunes, we take out our drivers, we tee up and, that ball goes sailing up into the sky holds there for a moment and then.. gulp!
<div class="grid grid-cols-2">
<div class="bg-white overflow-y-scroll scheme-light">
...
</div>
<div class="bg-slate-800 overflow-y-scroll scheme-dark">
...
</div>
</div>Вот полный список всех новых API:
Добавьте scheme-light dark:scheme-dark к элементу html или body, и ваши полосы прокрутки всегда будут выглядеть хорошо, независимо от того, какую стратегию темного режима вы используете.
Утилиты `font-stretch`
Мы добавили утилиты для нового свойства font-stretch, которое помогает вам стилизовать переменные шрифты, поддерживающие различную ширину:
font-stretch-extra-condensed
The quick brown fox jumps over the lazy dog.
font-stretch-condensed
The quick brown fox jumps over the lazy dog.
font-stretch-normal
The quick brown fox jumps over the lazy dog.
font-stretch-expanded
font-stretch-extra-expanded
Похоже, в какой-то момент название этого параметра изменится на font-width, но пока ни один браузер его не поддерживает, с нетерпением жду возможности разобраться с этим.
Компонуемые варианты
В новом движке v4.0 некоторые варианты можно объединять в цепочку с другими вариантами, что позволяет использовать простые именованные API для вещей, для которых в v3 требовались сложные произвольные варианты:
<div class="group">
<div class="group-has-[&[data-potato]]:opacity-100">
<div class="group-has-data-potato:opacity-100">
<!-- ... -->
</div>
<div data-potato>
<!-- ... -->
</div>
</div>
Это работает с любым вариантом, где это имеет смысл, включая group-*, peer-*, has-* и новые варианты not-* и in-*. Вы можете сцепить столько из них, сколько захотите, так что даже совершенно бесполезные классы, такие как group-not-has-peer-not-data-active:underline, будут генерировать настоящий CSS.
Вариант `@starting-style`
Новый вариант starting добавляет поддержку новой функции CSS @starting-style, что позволяет изменять свойства элемента при его первом отображении:
Click the button to see the popover animate in
<div>
<button popovertarget="my-popover">Check for updates</button>
<div popover id="my-popover" class="opacity-0 transition-all duration-500 transition-discrete open:opacity-100 starting:open:opacity-0">
<!-- ... -->
</div>
</div>Вариант `not-*`
Новый вариант not-* добавляет поддержку псевдокласса :not(…), позволяя вам стилизовать вещи, когда определенные условия не выполняются.
Например, добавление стилей наведения к кнопке только тогда, когда кнопка не находится в фокусе:
<button class="bg-indigo-600 hover:not-focus:bg-indigo-700">
<!-- ... -->
</button>Вы также можете объединить вариант not-* с вариантами медиазапросов, такими как forced-colors, чтобы стилизовать элемент только тогда, когда режим принудительных цветов неактивен:
<input type="radio" class="not-forced-colors:appearance-none" />Он также работает с вариантами supports-*, поэтому вы можете стилизовать элемент в зависимости от отсутствия поддержки браузером определенной функции CSS:
<div class="not-supports-[display:grid]:flex">
<!-- ... -->
</div>Вариант `inert`
Новый вариант inert позволяет стилизовать элементы, отмеченные атрибутом inert:
<main inert class="inert:opacity-50 inert:blur">
<!-- ... -->
</main>Это полезно для добавления визуальных подсказок, которые дают понять, что элемент не является интерактивным.
Вариант `nth-*`
Мы добавили четыре новых варианта для псевдоклассов :nth-child(…), :nth-last-child(…), :nth-of-type(…) и :nth-last-of-type(…):
<div class="nth-3:underline">…</div>
<div class="nth-last-5:underline">…</div>
<div class="nth-of-type-4:underline">…</div>
<div class="nth-last-of-type-6:underline">…</div>По умолчанию вы можете передать им любое число, а также использовать произвольные значения для более сложных выражений, например nth-[2n+1_of_li].
Вариант `in-*`
Знаете наши варианты group-*, такие как group-focus? Новый вариант in-* такой же, за исключением того, что вам не нужно добавлять group к родительскому элементу:
<div tabindex="0" class="group">
<div class="opacity-50 group-focus:opacity-100">
<div tabindex="0">
<div class="opacity-50 in-focus:opacity-100">
<!-- ... -->
</div>
</div>
Вам по-прежнему часто придется использовать group-*, когда вам нужен точный контроль, но в остальное время это сэкономит вам несколько символов.
Поддержка `:popover-open`
Мы обновили наш существующий вариант open, чтобы он включал псевдокласс :popover-open, а также атрибут [open]:
<div>
<button popovertarget="my-popover">Open Popover</button>
<div popover id="my-popover" class="opacity-0 open:opacity-100 ...">
<!-- ... -->
</div>
</div>Я уверен, что в конечном итоге пожалею, что не сделал его отдельным вариантом popover-open, но я действительно много думал об этом и не смог придумать ни одной ситуации, в которой элемент использовал бы и [open], и :popover-open и имел бы разные стили для каждого условия. Кто-нибудь обновит спецификацию и наверняка в будущем меня в этом подставит.
Вариант потомка
Вы знаете вариант *, который мы отправили некоторое время назад для таргетинга прямых потомков?
<ul class="*:p-4">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>В версии 4.0 мы добавили новый вариант ** для выбора всех потомков — на мой взгляд, он наиболее полезен, если вы комбинируете его с другим вариантом для сужения области выбора:
<div class="**:data-avatar:rounded-full">
<div>
<img src="…" data-avatar /> <!-- This element will be round -->
</div>
<p>…</p>
</div>
Интересный факт — синтаксис вдохновлен глобами, к лучшему или к худшему.
Подробная настройка CSS
Настройка темы
Чтобы настроить тему в Tailwind CSS v4.0, используйте новую директиву @theme непосредственно в CSS:
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-avocado-100: oklch(0.99 0 0);
--color-avocado-200: oklch(0.98 0.04 113.22);
--color-avocado-300: oklch(0.94 0.11 115.03);
--color-avocado-400: oklch(0.92 0.19 114.08);
--color-avocado-500: oklch(0.84 0.18 117.33);
--color-avocado-600: oklch(0.53 0.12 118.34);
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
--ease-snappy: cubic-bezier(0.2, 0, 0, 1);
/* ... */
}Каждая переменная CSS, которую вы здесь определяете, сообщает Tailwind о необходимости создания новых утилит и вариантов на основе этих значений, позволяя вам использовать в разметке такие классы, как font-display, 3xl:max-w-xl, text-avocado-400 и hover:ease-fluid:
<div class="max-w-lg 3xl:max-w-xl">
<h1 class="font-display text-4xl">
Data to <span class="text-avocado-400">enrich</span> your online business
</h1>
</div>Каждый набор переменных является частью пространства имен, которое связывает их с соответствующими утилитами, например, утилиты размера шрифта ссылаются на пространство имен --font-*, все утилиты цвета ссылаются на пространство имен --color-*, а утилиты transition-timing-function ссылаются на пространство имен --ease-*.
Полный список смотрите в справочнике по пространству имен тем.
Переопределение темы по умолчанию
По умолчанию добавление новых переменных CSS ведет себя как extend в Tailwind CSS v3:
@import "tailwindcss";
@theme {
/* These values are added in addition to the defaults */
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
}Чтобы переопределить все пространство имен, отмените его установку, используя синтаксис вроде --font-*: initial:
@import "tailwindcss";
@theme {
--font-*: initial;
--font-display: "Satoshi", "sans-serif";
}
Теперь в вашем проекте не будет утилит по умолчанию font-sans, font-serif и font-mono, а font-display будет единственной доступной утилитой семейства шрифтов.
Вы также можете отменить всю тему по умолчанию с помощью --*: initial, если хотите начать полностью с нуля:
@import "tailwindcss";
@theme {
--*: initial;
}
Это удалит все токены дизайна по умолчанию, включая все шрифты по умолчанию, масштаб типографики, цветовую палитру и многое другое.
Настройка высоты строк по умолчанию для утилит размера шрифта
Чтобы задать высоту строк по умолчанию, толщину шрифта или межбуквенный интервал для пользовательского размера шрифта, добавьте вспомогательную переменную с помощью двойных тире, например --text-big--line-height:
@theme {
--text-big: 16rem;
--text-big--line-height: 18rem;
--text-big--font-weight: 550;
--text-big--letter-spacing: -0.025em;
}
Настройка анимации и ключевых кадров
По умолчанию Tailwind CSS v4.0 сохраняет любые пользовательские правила @keyframes, которые вы добавляете в свой CSS, даже если вы не используете соответствующие утилиты анимации в своем проекте.
Чтобы убедиться, что неиспользуемые правила @keyframes удалены, настройте их в @theme, а не в корне вашего CSS:
@theme {
--animate-marquee: marquee 3s linear infinite;
@keyframes marquee {
to {
transform: translateY(-50%);
}
}
}Справочник по пространству имен
Поскольку мы значительно упростили конфигурацию темы в Tailwind CSS v4.0, вы в основном будете работать только с этими пространствами имен:
| Namespace | Utilities |
|---|---|
--color-* | Color utilities like bg-white, text-black, or fill-blue-500 |
--font-* | Font family utilities like font-sans |
--text-* | Font size utilities like text-sm |
--font-weight-* | Font weight utilities like font-bold |
--tracking-* | Letter spacing utilities like tracking-tight |
--leading-* | Line height utilities like leading-relaxed |
--spacing-* | Spacing and sizing utilities like pt-5, mr-2, and h-8 |
--breakpoint-* | Breakpoint variants like md:* and lg:* |
--container-* | Container query variants like @md:* and width utilities like w-sm and max-w-lg |
--radius-* | Border radius utilities like rounded-md |
--shadow-* | Box shadow utilities like shadow-lg |
--inset-shadow-* | Inset box shadow utilities like inset-shadow-sm |
--drop-shadow-* | Drop shadow utilities like drop-shadow-xl |
--ease-* | Transition timing function utilities like ease-out |
--animate-* | Animation utilities like animate-spin |
Если вам нужен более детальный контроль, большинство утилит также можно настроить в пространстве имен, которое соответствует имени свойства CSS. Например, пользовательские утилиты background-image, такие как bg-grid-pattern, можно настроить с помощью --background-image-grid-pattern: url(…).
Настройка темного режима
По умолчанию вариант dark в Tailwind CSS v4.0 использует медиа-запрос prefers-color-scheme.
Если вы хотите использовать стратегию на основе селектора в своем проекте для темного режима, переопределите вариант dark селектором, который вы хотите использовать:
@import "tailwindcss";
@variant dark (&:where(.dark, .dark *));
Настройка обнаружения источника
Если автоматическое обнаружение источника в Tailwind CSS v4.0 слишком широкое и включает файлы, которые вы не хотите включать (например, вы работаете в большом монорепозитории), вы можете использовать функцию source(…) при импорте Tailwind, чтобы указать базовый путь для автоматического обнаружения источника:
@import "tailwindcss" source("../src");Этот путь должен быть относительным к CSS-файлу, в котором он используется.
Добавление источников контента
Если вам нужно добавить дополнительные источники контента, которые не выбираются по умолчанию (например, что-то, что находится в вашем файле .gitignore), добавьте его с помощью @source:
@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";
В подобных ситуациях также может быть полезно экспортировать CSS-файл из вашей библиотеки и переместить туда директиву @source, чтобы можно было просто импортировать CSS-файл:
/node_modules/@my-company/ui-lib/index.css
@source "./src/components";app.css
@import "tailwindcss";
@import "@my-company/ui-lib";Директива @source также может быть полезна, когда вы используете плагин Vite, но вам необходимо включить источники контента, которые не являются частью модуля, например шаблоны PHP в проекте Laravel:
@import "tailwindcss";
@source "../../resources/views";
@source "../../app";
Отключение определения источника
Если вам по какой-либо причине необходимо отключить автоматическое определение источника, используйте source(none) при импорте Tailwind:
@import "tailwindcss" source(none);При отключенном определении источника вы можете просто использовать @source для явной настройки всех источников контента.
Отключение Preflight
Если вам нужно отключить базовые стили Tailwind, вы можете импортировать нужные вам части Tailwind по отдельности:
@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);Использование префикса
Чтобы добавить префикс к вашим утилитам и переменным темы, чтобы избежать конфликтов с существующим CSS, используйте функцию prefix(…) при импорте Tailwind:
@import "tailwindcss" prefix(tw);Префиксы работают немного иначе, чем в v3 — теперь они выглядят как варианты и всегда находятся в начале имени класса:
<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
<!-- ... -->
</div>При использовании префикса вам все равно следует настроить переменные темы так, как будто вы не используете префикс:
app.css
@import "tailwindcss" prefix(tw);
@theme {
--font-display: "Satoshi", "sans-serif";
--breakpoint-3xl: 1920px;
--color-avocado-100: oklch(0.99 0 0);
--color-avocado-200: oklch(0.98 0.04 113.22);
--color-avocado-300: oklch(0.94 0.11 115.03);
/* ... */
}Однако сгенерированные переменные CSS будут включать префикс, чтобы избежать конфликтов с существующими переменными в вашем проекте:
dist.css
:root {
--tw-font-display: "Satoshi", "sans-serif";
--tw-breakpoint-3xl: 1920px;
--tw-color-avocado-100: oklch(0.99 0 0);
--tw-color-avocado-200: oklch(0.98 0.04 113.22);
--tw-color-avocado-300: oklch(0.94 0.11 115.03);
/* ... */
}Добавление пользовательских утилит
Чтобы добавить пользовательскую утилиту в v4.0, используйте новую директиву @utility:
@import "tailwindcss";
@utility tab-4 {
tab-size: 4;
}Пользовательские утилиты автоматически вставляются в слой utilities вместе со всеми встроенными утилитами в фреймворке.
Добавление пользовательских вариантов
Чтобы добавить пользовательский вариант в v4.0, используйте новую директиву @variant:
@import "tailwindcss";
@variant pointer-coarse (@media (pointer: coarse));
@variant theme-midnight (&:where([data-theme="midnight"] *));Это позволяет вам писать утилиты, такие как pointer-coarse:size-48 и theme-midnight:bg-slate-900.
Использование плагинов
Чтобы загрузить плагин в v4.0, используйте новую директиву @plugin:
@import "tailwindcss";
@plugin "@tailwindcss/typography";Директива @plugin принимает либо имя пакета, либо локальный путь.
Использование устаревших файлов конфигурации
Чтобы использовать существующий файл конфигурации JS в v4.0, загрузите его с помощью директивы @config:
@import "tailwindcss";
@config "../../tailwind.config.js";Обратите внимание, что не все функции конфигурации JS поддерживаются в версии 4.0. Такие параметры, как corePlugins, important и separator, скорее всего, вообще не будут поддерживаться в стабильной версии v4.0, а такие параметры, как safelist, могут возвращаться, но с разным поведением.
Использование `@apply` в Vue/Svelte
Если вы хотите использовать @apply в блоке <style> компонента Vue или Svelte, вам нужно будет импортировать конфигурацию темы, чтобы сделать эти значения доступными в этом контексте.
Чтобы сделать это без дублирования переменных CSS в выводе CSS, используйте theme(reference) при импорте темы:
<template>
<h1>Hello world!</h1>
</template>
<style>
@import "../../my-theme.css" theme(reference);
h1 {
@apply font-bold text-2xl text-red-500;
}
</style>
Если вы используете только тему по умолчанию, вы можете импортировать "tailwindcss/theme" напрямую:
<template>
<h1>Hello world!</h1>
</template>
<style>
@import "tailwindcss/theme" theme(reference);
h1 {
@apply font-bold text-2xl text-red-500;
}
</style>
Изменения по сравнению с v3
Tailwind CSS v4.0 — это новая основная версия фреймворка, и хотя мы стремимся максимально сохранить обратную совместимость, нам пришлось внести несколько критических изменений, чтобы реализовать желаемые улучшения для нового релиза.
Чтобы сделать обновление максимально безболезненным, мы создали действительно потрясающий инструмент миграции, который автоматизирует практически все эти изменения для вас.
Чтобы автоматически обновить свой проект, запустите инструмент обновления из корневого каталога проекта в командной строке:
Terminal
$ npx @tailwindcss/upgrade@nextПосле этого просмотрите все изменения и протестируйте свой проект, чтобы убедиться, что все работает так, как ожидалось, и если повезет, вы сможете приступить к гонкам.
Но вот список всех изменений в деталях на случай, если у вас возникнут проблемы с использованием инструмента миграции.
Изменения зависимостей
Использование PostCSS
В Tailwind CSS v3 пакет tailwindcss был плагином PostCSS, но в v4.0 плагин PostCSS находится в выделенном пакете @tailwindcss/postcss.
Tailwind CSS v4.0 также обрабатывает импорт CSS и вендорные префиксы для вас, поэтому вы можете удалить postcss-import и autoprefixer, если они есть в вашем проекте:
postcss.config.mjs
export default {
plugins: {
'postcss-import': {},
'tailwindcss': {},
'autoprefixer': {},
'@tailwindcss/postcss': {},
},
};
Использование Vite
Если вы используете Vite, мы рекомендуем перейти с плагина PostCSS на наш новый специализированный плагин Vite:
vite.config.ts
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
tailwindcss()
],
});
Использование Tailwind CLI
В версии 4.0 Tailwind CLI находится в выделенном пакете @tailwindcss/cli. Обновите любую из ваших команд сборки, чтобы использовать новый пакет:
npx tailwindcss -i input.css -o output.css
npx @tailwindcss/cli -i input.css -o output.css
Удалены директивы `@tailwind`
В Tailwind CSS v4.0 вы импортируете Tailwind с помощью обычного оператора CSS @import, а не с помощью директив @tailwind, которые вы использовали в v3:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
Удалены устаревшие утилиты
Мы удалили все утилиты, которые были устаревшими в v3 и не были документированы в течение нескольких лет. Вот список того, что было удалено вместе с современной альтернативой:
| Устарело | Заменено |
|---|---|
bg-opacity-* | Используйте модификаторы непрозрачности, например bg-black/50 |
text-opacity-* | Используйте модификаторы непрозрачности, например text-black/50 |
border-opacity-* | Используйте модификаторы непрозрачности, например border-black/50 |
divide-opacity-* | Используйте модификаторы непрозрачности, например divide-black/50 |
ring-opacity-* | Используйте модификаторы непрозрачности, например ring-black/50 |
placeholder-opacity-* | Используйте модификаторы непрозрачности, например placeholder-black/50 |
flex-shrink-* | shrink-* |
flex-grow-* | grow-* |
overflow-ellipsis | text-ellipsis |
decoration-slice | box-decoration-slice |
decoration-clone | box-decoration-clone |
Настройка утилиты `container`
В v3 утилита container имела несколько параметров конфигурации, таких как center и padding, которые больше не существуют в v4.0. Чтобы настроить утилиту container в v4.0, расширьте ее с помощью @utility:
@import "tailwindcss";
@utility container {
margin-inline: auto;
padding-inline: 2rem;
}Изменения в масштабе тени по умолчанию
Мы немного изменили шкалу тени по умолчанию, чтобы убедиться, что каждая утилита тени имеет именованное значение.
Для этого мы переименовали shadow в shadow-sm, shadow-sm в shadow-xs, drop-shadow в drop-shadow-sm и drop-shadow-sm в drop-shadow-xs:
| v3 | v4 |
|---|---|
shadow-sm | shadow-xs |
shadow | shadow-sm |
drop-shadow-sm | drop-shadow-xs |
drop-shadow | drop-shadow-sm |
Утилиты shadow и drop-shadow по-прежнему будут работать для обратной совместимости, но shadow-sm и drop-shadow-sm будут выглядеть по-другому в вашем проекте, если вы не замените каждый экземпляр на shadow-xs и drop-shadow-xs.
Изменения масштаба размытия по умолчанию
Мы немного изменили масштаб размытия по умолчанию, чтобы убедиться, что у каждой утилиты размытия есть именованное значение.
Для этого мы переименовали blur в blur-sm, а blur-sm в blur-xs:
| v3 | v4 |
|---|---|
blur-sm | blur-xs |
blur | blur-sm |
Утилита blur по-прежнему будет работать для обратной совместимости, но blur-sm будет выглядеть по-другому в вашем проекте, если вы не замените каждый экземпляр на blur-xs.
Изменения шкалы радиуса по умолчанию
Мы немного изменили шкалу радиуса границы по умолчанию, чтобы убедиться, что каждая утилита радиуса границы имеет именованное значение.
Для этого мы переименовали rounded в rounded-sm, а rounded-sm в rounded-xs:
| v3 | v4 |
|---|---|
rounded-sm | rounded-xs |
rounded | rounded-sm |
Утилита rounded по-прежнему будет работать для обратной совместимости, но rounded-sm будет выглядеть по-другому в вашем проекте, если вы не замените каждый экземпляр на rounded-xs.
Изменение цвета рамки по умолчанию
В v3 рамки использовали ваш настроенный цвет gray-200 по умолчанию. Мы обновили его в v4, чтобы он был просто currentColor, что соответствует поведению по умолчанию всех браузеров.
Чтобы обновить свой проект для этого изменения, убедитесь, что везде, где вы используете утилиту цвета рамки, везде, где вы используете утилиту border, или добавьте эти строки CSS в свой проект, чтобы сохранить поведение v3:
@import "tailwindcss";
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
Изменение ширины кольца по умолчанию
В v3 утилита ring добавила кольцо размером 3 пикселя. В v4 мы изменили его на 1 пиксель, чтобы он соответствовал границам и контурам.
Чтобы обновить проект для этого изменения, замените любое использование ring на ring-3:
<div class="ring ring-blue-500">
<div class="ring-3 ring-blue-500">
<!-- ... -->
</div>
Изменение заполнителя по умолчанию
В v3 текст заполнителя по умолчанию использовал ваш настроенный цвет gray-400. Мы упростили это в v4, чтобы просто использовать текущий цвет текста с непрозрачностью 50%.
Вы, вероятно, даже не заметите этого изменения (возможно, оно даже улучшит внешний вид вашего проекта), но если вы хотите сохранить поведение v3, добавьте этот CSS в свой проект:
@import "tailwindcss";
@layer base {
input::placeholder,
textarea::placeholder {
color: theme(--color-gray-400);
}
}
`outline-none` в `outline-hidden`
В v3 утилита outline-none на самом деле была сложным классом, который не просто устанавливал outline-style: none:
/* v3 */
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}На самом деле он добавил невидимый контур в 2 пикселя, который все равно будет отображаться в режиме принудительных цветов по соображениям доступности.
Мы упростили это в версии 4.0, и теперь outline-none просто устанавливает outline-style: none, как и ожидалось:
/* v4 */
.outline-none {
outline-style: none;
}Мы добавили новую утилиту outline-hidden, которая делает то же, что outline-none делала в v3, поскольку это все еще очень полезная функция.
Чтобы обновить свой проект для этого изменения, замените любое использование outline-none на outline-hidden, если только вы действительно не хотите outline-style: none:
<input class="focus:outline-none">
<input class="focus:outline-hidden">
Добавление пользовательских утилит
В v3 любые пользовательские классы, которые вы определили в @layer utilities, будут подхвачены Tailwind как настоящий класс утилит и будут автоматически работать с такими вариантами, как hover, focus или lg.
В v4.0 мы используем собственные каскадные слои и больше не перехватываем правило @layer, поэтому мы ввели API @utility в качестве замены:
@layer utilities {
.tab-4 {
tab-size: 4;
}
}
@utility tab-4 {
tab-size: 4;
}
Пользовательские утилиты должны быть одним именем класса в v4.0, а не сложным селектором. Если ваша пользовательская утилита сложнее, чем одно имя класса, используйте вложение для определения утилиты:
@utility scrollbar-hidden {
&::-webkit-scrollbar {
display: none;
}
}Размещение вариантов, чувствительных к порядку
В версии 3 варианты, расположенные в стопке, применялись справа налево, но в версии 4 мы обновили их, чтобы они применялись слева направо, чтобы больше походить на синтаксис CSS.
Чтобы обновить свой проект для этого изменения, измените порядок любых вариантов, чувствительных к порядку, в своем проекте:
<ul class="py-4 first:*:pt-0 last:*:pb-0">
<ul class="py-4 *:first:pt-0 *:last:pb-0">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
У вас, скорее всего, их очень мало, если они вообще есть — скорее всего, вы используете прямой дочерний вариант (*) и любые варианты плагинов типографики (prose-headings), и даже в этом случае это только если вы совмещаете их с другими вариантами.
Переменные CSS в произвольных значениях
В v3 вы могли использовать переменные CSS как произвольные значения без var(…), но недавние обновления CSS означают, что это часто может быть неоднозначно, поэтому мы изменили синтаксис для этого в v4.0, чтобы использовать круглые скобки вместо квадратных.
Чтобы обновить свой проект для этого изменения, замените использование старого сокращенного синтаксиса переменных на новый сокращенный синтаксис переменных:
<div class="bg-[--brand-color]">
<div class="bg-(--brand-color)">
<!-- ... -->
</div>
Ссылка на значения темы в JS
В v3 мы экспортировали функцию resolveConfig, которую можно использовать для преобразования конфигурации JS в плоский объект, который можно использовать в других JavaScript.
Мы удалили это в v4 в надежде, что люди смогут использовать переменные CSS, которые мы генерируем напрямую, что намного проще и значительно уменьшит размер вашего пакета.
Стили наведения игнорируются на мобильных устройствах
В v4.0 мы обновили вариант hover, чтобы он применялся только тогда, когда основное устройство ввода поддерживает наведение:
@media (hover: hover) {
.hover\:underline:hover {
text-decoration: underline;
}
}Это может создать проблемы, если вы создали свой сайт таким образом, что он зависит от сенсорных устройств, которые вызывают наведение при нажатии. Если для вас это проблема, вы можете переопределить вариант hover своим собственным вариантом, который использует старую реализацию:
@import "tailwindcss";
@variant hover (&:hover);В целом я бы рекомендовал рассматривать функциональность наведения как улучшение и не полагаться на нее для работы вашего сайта, поскольку сенсорные устройства на самом деле не имеют возможности наведения.
Основные плагины нельзя отключить
В v3 была опция corePlugins, которую можно было использовать для полного отключения определенных утилит в фреймворке. Это больше не поддерживается в v4.0, но мы планируем изучить другие идеи для решения тех же проблем, для решения которых эта функция часто использовалась в более поздних бета-выпусках.
Использование функции `theme()`
Поскольку Tailwind CSS v4.0 включает переменные CSS для всех значений вашей темы, мы рекомендуем использовать эти переменные вместо функции theme(), когда это возможно:
@import "tailwindcss";
.my-class {
background-color: theme(colors.red.500);
background-color: var(--color-red-500);
}
В случаях, когда вам все еще необходимо использовать функцию theme() (например, в медиазапросах, где переменные CSS не поддерживаются), следует использовать имя переменной CSS вместо старой точечной нотации:
@import "tailwindcss";
@media (width >= theme(screens.xl)) {
@media (width >= theme(--breakpoint-xl)) {
/* ... */
}
Использование файла конфигурации JavaScript
Файлы конфигурации JavaScript по-прежнему поддерживаются для обратной совместимости, но они больше не определяются автоматически в v4.0.
Если вам по-прежнему необходимо использовать файл конфигурации JavaScript, обязательно загрузите его явно с помощью @config:
@import "tailwindcss";
@config "../../tailwind.config.js";