Tailwind 4: Новые возможности

Время на прочтение статьи
На чтение15 мин
Дата обновления статьи
Обновлено
Просмотров статьи
Просмотров

Слово Tailwind ("попутный ветер") буквально означает ветер, дующий в том же направлении, что и направление движения самолета или лодки. Это помогает объекту двигаться быстрее и достигать места назначения, обеспечивая скорость и эффективность.

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

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

Начало работы с Tailwind v4.0

Tailwind v4.0 находится в разработке уже несколько месяцев, а первая публичная бета-версия была выпущена в ноябре 2024 года.

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

Новый производительный движок

Команда Tailwind анонсировала новый движок повышения производительности Tailwind Oxide в марте 2024 года. Некоторые преимущества включают унифицированный набор инструментов и упрощенную конфигурацию для ускорения процесса сборки.

CSS-first configuration

С текущей версией Tailwind, tailwind.config.js файл позволяет вам переопределить маркеры дизайна Tailwind'а по умолчанию. Это центр настройки, где вы можете добавлять пользовательские служебные классы и темы, отключать плагины и многое другое.

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

Вот код по умолчанию для файла tailwind.config.js при настройке нового проекта с помощью Tailwind v3:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Удаленные директивы

После настройки конфигурационного файла следующим шагом было добавление директив Tailwind в файл index.css.

Это директивы в Tailwind v3:

@tailwind base;
@tailwind components;
@tailwind utilities;

В Tailwind v4 вам не нужны tailwind.config.js файл и директивы @tailwind. Вам нужно будет только импортировать "tailwindcss" в ваш основной CSS-файл, и все готово:

@import "tailwindcss";

Это сокращает количество шагов при настройке нового проекта и количество файлов.

Вы все еще можете использовать конфигурационный файл JS, например, если у вас уже есть существующий проект версии 3, используя новую директиву @config для его загрузки в ваш CSS-файл:

@import "tailwindcss";

@config "../../tailwind.config.js";

Однако не все функции, такие как corePlugins, important и separator, вероятно, будут поддерживаться в полной версии версии 4.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, упрощает добавление пользовательского стиля в ваш проект Tailwind. Любые настройки будут добавлены непосредственно в основной файл CSS, а не в файл конфигурации JavaScript.

Если, например, вы хотите настроить новые цвета для пользовательской темы в Tailwind CSS v3, вам нужно будет определить новые служебные классы в разделе темы файла 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 версии 4.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, поэтому в HTML мы указываем className, а не class. Утилиты остаются неизменными независимо от того, с каким фреймворком вы работаете.

Переменные темы

Из предыдущего примера вы можете видеть, что переменные CSS управляют всеми стилями тем в Tailwind версии 4.0:

@theme {
  --font-display: "Poppins", "sans-serif";

  --ease-fluid: cubic-bezier(0.3,0,0,1);

  --color-background-100: #764abc;
}

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

List Of Tailwind Utilities

Чтобы переопределить всю тему оформления по умолчанию, используйте --*: initial. Если вы хотите переопределить шрифт Tailwind по умолчанию и задать свой собственный, вы можете использовать --font-*: initial, за которым следует ваш собственный стиль:

@import "tailwindcss";

@theme {
  --font-*: initial
  --font-display: "Poppins", "sans-serif";
}

В этом случае font-display будет единственной утилитой семейства шрифтов, доступной в вашем проекте.

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

Default Tailwind CSS Font And Text Styling

Вот 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 и вес шрифта 700. Аналогично, любой элемент с именем класса text-big по умолчанию будет иметь размер шрифта 6rem, вес шрифта 700 и интервал между буквами -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>

Вот скриншот страницы с пользовательским стилем оформления:

Custom Styling Sample

В версии Tailwind версии 4.0 будет меньше зависимости от значений Tailwind по умолчанию, поскольку несколько классов могут быть заменены одной пользовательской утилитой. В нашем примере название класса text-big заменяет служебные классы text-5xl и text-bold для заголовка h1.

Опять же, это не ограничивается определенными пространствами имен - вы можете делать это с любой утилитой.

Упрощенная настройка темы

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

В версии Tailwind v3 вам нужно будет определить количество столбцов в вашем файле tailwind.config.js, но в версии Tailwind v4.0 вы можете использовать любое число, от небольшого, например, grid-cols-5, до большого, например, grid-cols-73. Это также относится к утилитам z-index (например, z-40) и opacity-*.

Tailwind версии 4.0 также имеет встроенную поддержку таких параметров, как data-*. Вы можете использовать их без произвольных значений.

Основное преимущество этих изменений заключается в том, что разработчики смогут тратить меньше времени на настройку несущественных или непрофильных дизайнерских токенов.

Динамическая шкала интервалов

Утилиты для создания интервалов, такие как m-*, w-*, mt-*, px-* и другие, генерируются динамически с использованием базового значения интервала в 0,25бэр, определенного в теме Tailwind v4.0 по умолчанию.

В шкале интервалов доступно любое значение, кратное базовому значению интервала. Таким образом, если mt-1 равен 0,25бэр, то mt-2 будет равен 0,25бэр, умноженному на два, что составляет 0,5бэр, а mt-21 будет равен 5,25бэр:

Tailwind V4 Spacing Scale

Вы можете использовать утилиты для определения интервалов со значениями, которые не определены явно. В 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 Oklch Color Palette

Поддержка запросов к контейнерам

Контейнерные запросы теперь имеют встроенную поддержку в Tailwind CSS версии 4.0; вам не понадобится плагин @tailwindcss/container-queries для создания адаптивных контейнеров.

Запросы к контейнерам используются для применения стиля к элементу в зависимости от размера его родительского контейнера. Это означает, что макет вашего сайта адаптируется к отдельным компонентам, а не ко всему экрану просмотра.

В версии 4.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 (768 пикселей и 1280 пикселей соответственно).

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

Переход с версии 3 на Tailwind CSS версии 4.0

Если вы хотите обновить проект версии 3 до версии 4, Tailwind предоставил инструмент обновления, который выполнит большую часть работы за вас.

Чтобы обновить свой проект, выполните следующую команду:

npx @tailwindcss/upgrade@next

Инструмент обновления автоматизирует несколько задач, таких как обновление зависимостей, перенос вашего файла конфигурации JS в CSS и обработка изменений в файлах шаблонов.

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

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

Изменения в зависимости

Плагин PostCSS: В версии 4.0 плагин PostCSS теперь доступен в виде специального пакета, @tailwindcss/postcss. Вы можете удалить postcss-импорт и автоматический префикс из файла postcss.config.mjs в вашем существующем проекте:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

Если вы начинаете новый проект, теперь вы можете установить Tailwind вместе с плагином PostCSS, выполнив следующую команду:

npm install tailwindcss@next @tailwindcss/postcss@next

Плагин Vite: В Tailwind CSS версии 4.0 также есть новый специальный плагин Vite, на который рекомендуется перейти из плагина PostCSS:

import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    tailwindcss()
  ],
});

Как мы видели на примере PostCSS, вы можете установить версию 4.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

Устаревшие утилиты

Несколько устаревших или недокументированных утилит были удалены и заменены современными альтернативами:

Deprecated Tailwind Utilities

Настройка контейнерной утилиты

В версии 4.0 вы настраиваете контейнерную утилиту с помощью @utility:

@import "tailwindcss";

@utility container {
  margin-inline: auto;
  padding-inline: 2rem;
}

В версии 4.0 отсутствуют такие параметры конфигурации, как центр и отступы.

Изменения масштаба по умолчанию

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

Default Scale Changes In Tailwind V4

Вам нужно будет заменить каждую утилиту в вашем проекте, чтобы все выглядело по-другому.

Изменение цвета границы по умолчанию

В версии 3 цвет границы по умолчанию - серый-200. Вам не нужно было явно задавать цвет при использовании утилиты border:

<header className="flex justify-between border-b-2 py-4 px-8">
      <--! content --> 
  </header>

Default Border Color In Tailwind V3

В Tailwind CSS версии 4 цвет границы обновлен до currentColor, и ваш текущий проект может визуально измениться, если вы не укажете цвет везде, где используете утилиту border.

Вот цвет рамки по умолчанию в версии 4.0:

Default Border Color In Tailwind V4

Чтобы сохранить поведение версии 3 по умолчанию, вы можете добавить эти строки CSS в свой проект:

the v3 behavior:
@import "tailwindcss";

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

Изменение ширины кольца по умолчанию

Утилита ring добавляет кольцо размером 3 пикселя в версии 3, но в версии 4 оно по умолчанию равно 1 пикселю. Замените любое использование утилиты ring на ring-3 при обновлении вашего проекта, чтобы сохранить его внешний вид.

Изменение заполнителя по умолчанию

В версии 4 текст-заполнитель по умолчанию будет использовать текущий цвет текста с непрозрачностью 50%. В версии 3 используется цвет gray-400, и если вы хотите сохранить это поведение, добавьте его в свой CSS:

@layer base {
  input::placeholder,
  textarea::placeholder {
    color: theme(--color-gray-400);
  }
}

Изменения в структуре

Также в версии 4 утилита outline-none не добавляет прозрачный контур размером 2 пикселя, как в версии 3. В версии 4 появилась новая утилита outline-hidden, которая работает так же, как outline-none из версии 3.

При обновлении вашего проекта вам потребуется заменить outline-none на outline-hidden, чтобы сохранить его текущее состояние, за исключением того, что вы хотите полностью удалить outline.

Добавление пользовательских утилит

Пользовательские утилиты теперь работают с новым API @utility вместо @layer utility. Это изменение обеспечивает совместимость с собственными каскадными слоями.

Теперь это просто имена одного класса и больше не сложные селекторы:

@utility tab-4 {
  tab-size: 4;
}

Варианты, зависящие от порядка укладки

Tailwind v4.0 размещает такие варианты, как "первый" и "последний", слева направо, поэтому вам нужно будет упорядочить варианты в вашем проекте.

Переменные CSS в произвольных значениях

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

<div class="bg-(--brand-color)">
  <!-- ... -->
</div>

Стили наведения курсора мыши на мобильном устройстве

В версии 4 стили наведения курсора будут работать только на устройствах, поддерживающих взаимодействие при наведении курсора в соответствии с требованиями специальных возможностей.

Вы можете включить обратную совместимость, определив вариант наведения курсора в файле CSS:

@import "tailwindcss";

@variant hover (&:hover);

Использование функции theme()

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

@import "tailwindcss";

.my-class {
  background-color: var(--color-red-500);
}

Для получения более подробной информации об изменениях, которые появятся в Tailwind версии 4.0, вам следует ознакомиться с предварительной документацией.

Переход на Tailwind CSS версии 4.0

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

#CSS#TailwindCSS