Подготовка к Tailwind v4.0
Tailwind CSS — это ориентированный на утилиты фреймворк, который позволяет «быстро создавать современные веб-сайты, не покидая HTML». Это не чашка чая для каждого разработчика, но Tailwind CSS приобрел значительную популярность с момента своего выпуска в 2019 году.
В этой статье будет представлен предварительный просмотр и углубленный анализ следующей версии Tailwind v4.0. Мы рассмотрим стратегии миграции существующих проектов и примеры, демонстрирующие новые возможности Tailwind v4.0. Мы также сравним его с похожими CSS-фреймворками и рассмотрим преимущества и ограничения использования этого фреймворка.
Начало работы с Tailwind v4.0
Разработка Tailwind v4.0 длилась несколько месяцев, а первая публичная бета-версия была выпущена в ноябре 2024 года.
Для получения более подробной информации вы можете посетить предварительную документацию, но в этом руководстве будут освещены некоторые из многих новых и интересных функций, которые разработчики могут ожидать в Tailwind CSS v4.0.
Новый производительный двигатель
В марте 2024 года команда Tailwind анонсировала новый движок производительности Tailwind Oxide. Среди его преимуществ — унифицированная цепочка инструментов и упрощенная конфигурация для ускорения процесса сборки.
Конфигурация CSS-first
В текущей версии Tailwind файл tailwind.config.js позволяет вам переопределять токены дизайна Tailwind по умолчанию. Это центр настройки, где вы можете добавлять пользовательские служебные классы и темы, отключать плагины и многое другое.
Его важнейшая функция — определение источников контента для вашего проекта, чтобы Tailwind мог сканировать соответствующие имена служебных классов и выдавать правильный вывод.
Вот код файла по умолчанию при настройке нового проекта с помощью Tailwind v3:
/** @type {import('tailwindcss').Config} */ export default { content : [ "./index.html" , "./src/**/*.{js,ts,jsx,tsx}" , ], theme : { extend : {}, }, plugins : [], }
Удалены директивы
После настройки файла конфигурации следующим шагом стало добавление директив в файл index.css Tailwind.
Вот директивы в Tailwind v3:
@tailwind base;
@tailwind components;
@tailwind utilities;В Tailwind v4 вам не нужны tailwind.config.js файл и директивы @tailwind. Вам нужно будет только импортировать "tailwindcss" в ваш основной файл CSS, и все готово:
@import "tailwindcss";Это сокращает количество шагов при настройке нового проекта и количество файлов.
Например, вы по-прежнему можете использовать файл конфигурации JS, если у вас уже есть проект v3, загрузив его в свой файл CSS с помощью новой директивы @config:
@import "tailwindcss";
@config "../../tailwind.config.js";Однако не все функции, такие как corePlugins, important и separator, вероятно, будут поддерживаться в полной версии v4.0. Некоторые опции, такие как safelist могут вернуться с изменениями в поведении.
Обнаружение источника
Если есть файлы, которые вы не хотите включать, вы можете использовать функцию source() при импорте Tailwind, чтобы ограничить автоматическое обнаружение:
@import "tailwindcss" source("../src");Дополнительные источники, которые Tailwind не обнаруживает по умолчанию, например, что-либо в вашем файле .gitignore, можно добавить с помощью директивы @source:
@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";Вы также можете полностью отключить обнаружение источника:
@import "tailwindcss" source(none);Отключение предварительной проверки
Вы можете импортировать отдельные слои, необходимые для вашего проекта, и отключить базовые стили Tailwind:
@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);Настройка тем
Новый подход CSS-first упрощает добавление пользовательского стиля в ваш проект Tailwind. Любая настройка будет добавлена непосредственно в основной файл CSS, а не в файл конфигурации JavaScript.
Если, например, вы хотите настроить новые цвета для пользовательской темы в Tailwind CSS v3, вам необходимо определить новые служебные классы в theme разделе файла tailwind.config.js.
Вот как это можно сделать в файле конфигурации JavaScript:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
background:'#764abc',
lilac: '#eabad2',
light: '#eae3f5'
}
},
},
plugins: [],
}Вот как можно добавить классы в ваш HTML-файл:
<div className="bg-background">
<header className="flex justify-between py-4 px-8">
<a href="/" className="text-light">LogRocket - Oscar</a>
<ul className="text-lilac">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>В этом примере служебными классами являются bg-background, text-light и text-lilac.
В Tailwind CSS v4.0 все настройки CSS настраиваются с помощью новой @theme директивы:
@import "tailwindcss";
@theme {
--color-background-100: #764abc;
--color-lilac-100: #eabad2;
--color-light-100: #eae3f5;
}Затем в HTML добавляются служебные классы. Вы можете выбрать разные оттенки одного и того же цвета, например, цвета Tailwind по умолчанию:
<div className="bg-background-100">
<header className="flex justify-between py-4 px-8">
<a href="/" className="text-light-100">LogRocket - Oscar</a>
<ul className="text-lilac-100">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>Если вы тестируете его с помощью VS Code, директива @import может быть выделена как ошибка, но не волнуйтесь, все будет работать нормально.
Обратите внимание, что приведенные выше примеры были созданы с помощью Tailwind CSS и React, поэтому у нас есть className в HTML, а не class. Утилиты остаются теми же, независимо от того, с каким фреймворком вы работаете.
Тематические переменные
Из предыдущего примера видно, что переменные CSS управляют всеми стилями темы в Tailwind v4.0:
@theme {
--font-display: "Poppins", "sans-serif";
--ease-fluid: cubic-bezier(0.3,0,0,1);
--color-background-100: #764abc;
}В v4.0 вы можете переопределить определенное пространство имен темы — то есть утилиты по умолчанию для цветов, шрифтов, текста и т.д. или всю тему Tailwind и настроить свою собственную. Вы можете легко настроить пользовательский стиль практически для каждой утилиты Tailwind в основном файле CSS:
Чтобы переопределить всю тему по умолчанию, используйте --*: initial. Если вы хотите переопределить шрифт Tailwind по умолчанию и определить свой собственный, вы должны использовать --font-*: initial, а затем свой собственный стиль:
@import "tailwindcss";
@theme {
--font-*: initial
--font-display: "Poppins", "sans-serif";
}В этом случае font-display будет единственная утилита font-family, доступная в вашем проекте.
Вы можете задать стиль по умолчанию для пользовательского свойства, используя двойные тире. Вот страница со шрифтом CSS Tailwind по умолчанию и стилем текста:
Вот HTML-разметка этой страницы:
<div className="bg-background h-screen">
<header className="flex justify-between py-4 px-8">
<a href="/" className="text-lg text-light font-bold">LogRocket - Oscar</a>
<ul className="hidden md:flex flex- items-center align-middle gap-4 font-bold text-lilac">
<li>
<a href="#" className="py-2 px-4 rounded-md">Home</a>
</li>
<li><a href="#" className="">About</a></li>
<li><a href="#" className="">Contact</a></li>
</ul>
</header>
<div className="container px-32 py-32">
<div className="flex">
<div>
<h1 className="text-5xl text-lilac font-bold">Tailwind CSS</h1>
<br />
<h3 className="text-3xl text-light font-semibold">
Build websites with utility classes from the comfort of your HTML
</h3>
<br />
<p className="text-2xl text-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fu gi at veniet atque unde laudantium. Ipsa nam quisquam quod non fficiis porro? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos iure nemo a hic sunt incidunt?
</p>
</div>
</div>
</div>
</div>Мы используем пользовательские цвета из предыдущего примера и настраиваем новый шрифт и стиль текста:
@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@theme {
--font-display : "Poppins", sans-serif;
--font-logo: "Roboto", sans-serif;
--text-logo: 1.5rem;
--text-logo--font-weight: 700;
--text-big: 6rem;
--text-big--font-weight: 700;
--text-big--letter-spacing: -0.025em;
--color-background-100: #764abc;
--color-lilac-100: #eabad2;
--color-light-100: #eae3f5;
}В этом примере мы импортируем два шрифта и сохраняем их под переменными --font-display и --font-logo для использования в логотипе и заголовке h1. Мы также настраиваем новые размеры текста и стили по умолчанию для обоих.
Итак, когда вы добавляете класс утилиты text-logo в свой HTML, элемент будет иметь размер шрифта 1.5rem и font-weight700 по умолчанию. Аналогично, любой элемент с именем класса text-big, будет иметь font-size6rem, и letter-spacing-0.025em по умолчанию.
Теперь добавим новые служебные классы в HTML-файл:
<div className="bg-background-100 h-screen">
<header className="flex justify-between py-4 px-8">
<a href="/" className="font-logo text-logo text-light-100">LogRocket - Oscar</a>
<ul className="hidden md:flex flex items-center align-middle gap-4 font-display text-lilac-100">
<li>
<a href="#" className="py-2 px-4 rounded-md">Home</a>
</li>
<li><a href="#" className="">About</a></li>
<li><a href="#" className="">Contact</a></li>
</ul>
</header>
<div className="container px-32 py-32 font-display">
<div className="flex">
<div>
<h1 className="text-lilac-100 text-big">Tailwind CSS</h1>
<br />
<h3 className="text-3xl text-light-100">
Build websites with utility classes from the comfort of your HTML
</h3>
<br />
<p className="text-2xl text-light">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fu gi at veniet atque unde laudantium. Ipsa nam quisquam quod non fficiis porro? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eos iure nemo a hic sunt incidunt?
</p>
</div>
</div>
</div>
</div>Вот скриншот страницы с пользовательским стилем:
В Tailwind v4.0 будет меньше зависимости от значений Tailwind по умолчанию, поскольку несколько классов могут быть заменены одной пользовательской утилитой. В нашем примере text-big имя класса заменяет классы text-5xl и text-bold утилиты для заголовка h1.
Опять же, это не ограничивается конкретными пространствами имен — вы можете сделать это с любой утилитой.
Упрощенная конфигурация темы
Некоторые утилиты больше не основаны на конфигурации вашей темы в Tailwind v4.0. Вы сможете указать, что именно вы хотите, прямо в вашем HTML-файле без дополнительной настройки.
В Tailwind v3 вам нужно было бы определить количество столбцов в вашем файле tailwind.config.js, но в Tailwind v4.0 вы можете использовать любое число от самого маленького grid-cols-5 до самого большого grid-cols-73. Это также применимо к утилитам z-index (например, z-40) и opacity-*.
Tailwind v4.0 также имеет встроенную поддержку вариантов типа data-*. Вы можете использовать их без произвольных значений.
Главное преимущество этих изменений заключается в том, что разработчики смогут тратить меньше времени на настройку необязательных или неосновных токенов дизайна.
Динамическая шкала интервалов
Утилиты интервала, такие как m-*w-*mt-*px-* и другие, генерируются динамически с использованием базового значения интервала 0.25rem, определенного в теме Tailwind v4.0 по умолчанию.
Каждое кратное базовому значению интервала доступно в шкале интервалов. Так что если mt-10.25rem и mt-20.25rem, будет умножено на два, что равно 0.5rem, и mt-21 будет 5.25rem:
Вы можете использовать утилиты интервалов со значениями, которые явно не определены. В Tailwind v3 вам нужно будет использовать произвольное значение, например mt-[5.25rem], или пользовательскую тему. Нет необходимости в дополнительной настройке, и вы можете создавать более последовательные дизайны.
Если вы хотите ограничить доступные значения интервала, вы можете отключить переменную по умолчанию и определить пользовательский масштаб:
@theme {
--spacing: initial
--spacing-1: 0.25rem
--spacing-2: 0.5rem
--spacing-4: 1rem
--spacing-8: 2rem
--spacing-12: 3rem
}При такой настройке каждая утилита интервального регулирования Tailwind будет использовать только специально определенные значения.
Обновленная цветовая палитра
Tailwind v4 переходит от rgb цветовой палитры по умолчанию к oklch, которая обеспечивает более яркие цвета и менее ограничена, чем rgb:
Поддержка контейнерных запросов
Контейнерные запросы теперь имеют встроенную поддержку в Tailwind CSS v4.0; вам не понадобится плагин @tailwindcss/container-queries для создания адаптивных контейнеров.
Запросы контейнеров используются для применения стиля к элементу на основе размера его родительского контейнера. Это означает, что макет вашего сайта адаптируется к отдельным компонентам, а не ко всему окну просмотра.
В v4.0 вы создаете запросы контейнера, добавляя @containerутилиту к родительскому элементу. Для дочерних элементов вы используете адаптивные утилиты, такие как @sm и @lg для применения стилей на основе размера родителя:
<div className="@container">
<header className="flex justify-between @sm:grid-cols-2 @lg:grid-cols-4">
<!-- child content -->
</header>
</div>Tailwind v4.0 также представляет новый вариант для запросов контейнера максимальной ширины @max-*. Он упрощает добавление стилей, когда контейнер становится меньше определенного размера. Вы можете комбинировать @min-*@max-* для определения диапазонов запросов контейнера:
<div className="@container">
<div className="flex @min-md:@max-xl:hidden">
<!-- child content -->
</div>
</div>В этом коде дочерний элемент div будет скрыт, если ширина родительского контейнера находится в пределах от md до xl (768px и 1280px).
Варианты использования контейнерных запросов включают навигацию, боковые панели, карточки, галереи изображений и адаптивный текст. Они также обеспечивают большую гибкость и хорошо поддерживаются в разных браузерах, поэтому вы можете начать использовать их в своих проектах v4.0.
Переход с v3 на Tailwind CSS v4.0
Если вы хотите обновить проект v3 до v4, Tailwind предоставил инструмент обновления, который выполнит большую часть работы за вас.
Чтобы обновить свой проект, выполните следующую команду:
npx @tailwindcss/upgrade@nextИнструмент обновления автоматизирует несколько задач, таких как обновление зависимостей, перенос файла конфигурации JS в CSS и обработка изменений в файлах шаблонов.
Tailwind рекомендует использовать новую ветку для обновления, чтобы сохранить основную ветку нетронутой, и внимательно просмотреть diff. Выполнение git diff команды поможет вам увидеть и понять изменения в вашем проекте. Вы также захотите протестировать свой проект в браузере, чтобы убедиться, что все работает так, как должно.
Сложные проекты могут потребовать от вас внесения ручных корректировок, и Tailwind обрисовал основные изменения и способы адаптации к ним, о чем мы расскажем ниже.
Изменения зависимости
Плагин PostCSS: В версии 4.0 плагин PostCSS теперь доступен как отдельный пакет @tailwindcss/postcss. Вы можете удалить postcss-import и auto-prefixer из файла postcss.config.mjs в вашем существующем проекте:
export default {
plugins: {
'@tailwindcss/postcss': {},
},
};Если вы начинаете новый проект, вы можете установить Tailwind вместе с плагином PostCSS, выполнив следующую команду:
npm install tailwindcss@next @tailwindcss/postcss@next
Плагин Vite: Tailwind CSS v4.0 также имеет новый специализированный плагин Vite, на который рекомендуется перейти с плагина PostCSS:
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
tailwindcss()
],
});Как мы видели на примере PostCSS, вы можете установить v4.0 вместе с плагином Vite при настройке нового проекта:
npm install tailwindcss@next @tailwindcss/vite@next
Tailwind CLI: использование инструмента CLI — самый простой и быстрый способ настройки Tailwind CSS, и теперь он находится в специальном пакете @tailwind/cli.
Вам необходимо обновить команды сборки соответствующим образом:
npx @tailwindcss/cli -i input.css -o output.css
Устаревшие утилиты
Несколько устаревших или недокументированных утилит были удалены и заменены современными альтернативами:
Настройка container утилиты
В версии 4.0 утилиту container можно настроить следующим образом @utility:
@import "tailwindcss";
@utility container {
margin-inline: auto;
padding-inline: 2rem;
}Такие параметры конфигурации, как center и padding, отсутствуют в версии 4.0.
Изменения масштаба по умолчанию
Для каждой утилиты тени, размытия и радиуса границы были внесены корректировки масштаба по умолчанию, чтобы убедиться, что у них есть именованное значение:
Вам придется заменить каждую утилиту в вашем проекте, чтобы убедиться, что все выглядит одинаково.
Изменение цвета границы по умолчанию
В v3 цвет границы по умолчанию — gray-200. Вам не нужно было явно задавать цвет при использовании утилиты border:
<header className="flex justify-between border-b-2 py-4 px-8">
<--! content -->
</header>
В Tailwind CSS v4 цвет границы обновлен до currentColor, и ваш текущий проект может визуально измениться, если вы не укажете цвет в любом месте, где используете border утилиту.
Вот цвет границы по умолчанию в версии 4.0:
Чтобы сохранить поведение v3 по умолчанию, вы можете добавить в свой проект следующие строки CSS:
the v3 behavior:
@import "tailwindcss";
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}Изменение ширины ring по умолчанию
Утилита ring добавляет кольцо 3px в v3, но по умолчанию в v4 оно равно 1px. Замените любое использование утилиты ring на ring-3 при обновлении вашего проекта, чтобы сохранить его внешний вид.
Изменение заполнителя по умолчанию
В v4 текст-заполнитель будет использовать текущий цвет текста при 50% непрозрачности по умолчанию. Он использует цвет gray-400 в v3, и если вы хотите сохранить это поведение, добавьте это в свой CSS:
@layer base {
input::placeholder,
textarea::placeholder {
color: theme(--color-gray-400);
}
}Изменения в контуре
Также в v4 утилита outline-none не добавляет прозрачный контур 2px, как в v3. В v4 есть новая утилита outline-hidden, которая ведет себя как outline-none из v3.
При обновлении проекта вам необходимо outline-none заменить его на outline-hidden, чтобы сохранить его текущее состояние, если только вы не хотите полностью удалить контур.
Добавление пользовательских утилит
Пользовательские утилиты теперь работают с новым @utility API вместо утилиты @layer. Это изменение обеспечивает совместимость с собственными каскадными слоями.
Теперь это просто имена отдельных классов, а не сложные селекторы:
@utility tab-4 {
tab-size: 4;
}Варианты, чувствительные к порядку укладки
Tailwind v4.0 располагает варианты, подобные first и last, слева направо, поэтому вам нужно будет упорядочить варианты в вашем проекте.
Переменные CSS в произвольных значениях
Синтаксис для переменных в произвольных значениях был изменен с квадратных скобок на круглые, чтобы избежать двусмысленности с новыми стандартами CSS. Вам нужно будет обновить это в вашем проекте:
<div class="bg-(--brand-color)">
<!-- ... -->
</div>Стили наведения на мобильных устройствах
В версии 4 стили наведения будут работать только на устройствах, поддерживающих взаимодействие с наведением, в целях соответствия практикам обеспечения доступности.
Вы можете включить обратную совместимость, определив вариант hover в файле CSS:
@import "tailwindcss";
@variant hover (&:hover);Использование функции theme()
Tailwind CSS v4.0 генерирует переменные для всех значений темы, поэтому функция theme() не нужна. Tailwind рекомендует заменить все функции theme() в вашем проекте на переменные CSS везде, где это возможно:
@import "tailwindcss";
.my-class {
background-color: var(--color-red-500);
}Более подробную информацию об изменениях в Tailwind v4.0 можно найти в предварительной документации.
Tailwind и альтернативные CSS-фреймворки
Наиболее очевидной альтернативой Tailwind CSS является Bootstrap, самый популярный CSS-фреймворк в мире. Он имеет обширную библиотеку предопределенных компонентов.
Bootstrap, возможно, более дружелюбен к новичкам, чем Tailwind CSS. Вы можете создавать готовые к использованию компоненты, используя конкретные и простые имена классов. Tailwind требует от вас понимания утилит и их базовых правил CSS.
Еще одно преимущество Bootstrap перед Tailwind CSS заключается в том, что он включает JavaScript по умолчанию, так что вы можете делать больше бэкенд-вещей. Tailwind CSS должен быть объединен с фреймворками JS.
Однако Bootstrap не так настраиваем и гибок, как Tailwind CSS. Давний аргумент заключается в том, что все сайты Bootstrap выглядят одинаково. Благодаря подходу «утилитарность прежде всего» Tailwind предлагает больше гибкости и контроля.
Минусы CSS Tailwind
В последние годы появилось больше фреймворков CSS, ориентированных на утилиты, например missing.css и Mojo CSS. Ни один из них не смог отобрать корону у Tailwind, но это не значит, что он не лишен своих изрядных ограничений:
Крутая кривая обучения: как упоминалось ранее, подход, ориентированный на полезность, и большое количество классов могут оказаться сложными для освоения новичками.
Читаемость кода: поскольку вы работаете в основном с HTML-файлом, код может стать трудночитаемым, поскольку каждый элемент накапливает утилиты.
Непоследовательный дизайн: гибкость Tailwind CSS может привести к непоследовательному дизайну во всем проекте, если вы не будете внимательны.
Смена фреймворка: проекты могут стать тесно связанными с Tailwind CSS, что затруднит переключение на другой фреймворк.
Переход на Tailwind CSS v4.0
Обновление существующих проектов до новой версии Tailwind может показаться сложной задачей, и это правда, если у вас сложный проект, но преимущества того стоят. Tailwind делает все быстрее и проще, удаляя дополнительные инструменты и файлы и предоставляя более понятный синтаксис.
Ваш интерфейс перегружает процессор пользователей?
По мере того, как веб-фронтенды становятся все более сложными, ресурсоемкие функции требуют от браузера все больше и больше. Если вы заинтересованы в мониторинге и отслеживании использования процессора на стороне клиента, использования памяти и многого другого для всех ваших пользователей в производстве, попробуйте LogRocket.
LogRocket — это как DVR для веб и мобильных приложений, который записывает все, что происходит в вашем веб-приложении, мобильном приложении или на веб-сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете объединять и сообщать о ключевых показателях производительности интерфейса, воспроизводить сеансы пользователей вместе с состоянием приложения, регистрировать сетевые запросы и автоматически выявлять все ошибки.
