Tailwind CSS v 3.3: Новые возможности

• Расширенная цветовая палитра для более тёмных оттенков: Новые более тёмные 950 оттенков для каждого цвета.
• Поддержка ESM и TypeScript: Пишите файл конфигурации с помощью ESM или TypeScript.
• Упрощённая поддержка RTL с логическими свойствами: Создавайте макеты, которые адаптируются к различным направлениям письма.
• Точная настройка цветовых границ градиента: Укажите, где именно вы хотите, чтобы находилась каждая точка цвета.
• line-clamp из коробки: Обрезайте многострочный текст без плагина.
• Новый модификатор line-height: Установите font-size и line-height с помощью одного класса.
• Переменные CSS без var(): Новый сокращённый синтаксис для произвольных значений.
• Конфигурируемые font-variation-settings: Встроенные непосредственно в ваши font-* утилиты.
• Новые утилиты list-style-image: Таким образом, вы можете ужасные картинки для маркеров списков.
• Новые утилиты hyphens: Для точной настройки расстановки переносов.
• Новые утилиты caption-side: Стильно подписывайте свои таблицы.

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

Обновить свои проекты так же просто, как установить последнюю версию tailwindcss из npm:

npm install -D tailwindcss@latest

Вы также можете попробовать все новые возможности в Tailwind Play, прямо в браузере.

Расширенная цветовая палитра для более тёмных оттенков

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

Желаем удачи — в Tailwind CSS v3.3 мы добавили 950 новый оттенок для каждого отдельного цвета.

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

А в остальном цветовом спектре мы оптимизировали 950 для высококонтрастного текста и тонированного фонового изображения.

Хотите, верьте, хотите нет, но самым сложным в этом проекте было убедить себя, что всё в порядке с 11 оттенками каждого цвета. Попытка сделать так, чтобы это хорошо выглядело в документации по цветовой палитре, была кошмаром.

Также налейте по одной за шутки 50 оттенков серого, которые мы когда-то умели делать.

Поддержка ESM и TypeScript

Теперь вы можете конфигурировать Tailwind CSS в ESM или даже в TypeScript:

ES Module:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

TypeScript:

import type { Config } from 'tailwindcss'

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

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

Вы также можете явно сгенерировать файл конфигурации ESM, используя флаг --esm:

npx tailwindcss init --esm

Чтобы сгенерировать файл конфигурации TypeScript, используйте флаг --ts:

npx tailwindcss init --ts

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

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

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

Упрощённая поддержка RTL с логическими свойствами

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

Используя новые утилиты письма, такие как ms-3 и me-3, вы можете стилизовать начало и конец элемента, чтобы ваши стили автоматически адаптировались в RTL, вместо того, чтобы писать код, подобный ltr:ml-3 rtl:mr-3:

 <div class="group flex items-center">
   <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
-  <div class="ltr:ml-3 rtl:mr-3">
+  <div class="ms-3">
     <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p>
     <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p>
   </div>
 </div>

Мы добавили новые утилиты логических свойств для inset, margin, padding, border-radius, scroll-margin, и scroll-padding.

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

Это должно сэкономить массу кода, если вы регулярно делаете сайты, которым необходимо поддерживать языки LTR и RTL. И вы всегда можете комбинировать их с вариантами ltr и rtl, когда вам нужно больше контроля.

Точная настройка цветовых границ градиента

Мы добавили новые утилиты, такие как from-5%, via-35% и to-85% позволяющие настроить фактическое положение каждой цветовой границы в ваших градиентах:

<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">
  <!-- ... -->
</div>

Мы включили каждое значение от 0% до 100% с шагом 5 из коробки, но вы, конечно, можете использовать произвольные значения, чтобы получить именно тот эффект, который вы хотите:

<div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">
  <!-- ... -->
</div>

Больше информации можно узнать из документации по цветовым границам градиента.

line-clamp из коробки

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

<article>
  <div>
    <time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 10, 2020</time>
    <h2 class="mt-2 text-lg font-semibold text-gray-900">Boost your conversion rate</h2>
    <p class="line-clamp-3 mt-4 text-sm/6 text-gray-600">
      Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.
    </p>
  </div>
  <div class="mt-4 flex gap-x-2.5 text-sm font-semibold leading-6 text-gray-900">
    <img src="..." class="h-6 w-6 flex-none rounded-full bg-gray-50" />
    Lindsay Walton
  </div>
</article>

Поэтому при обновлении до Tailwind CSS v3.3. вы можете безопасно удалить плагин line-clamp, если вы его использовали:

tailwind.config.js:

 module.exports = {
   // ...
   plugins: [
-    require('@tailwindcss/line-clamp')
   ]
}

Ознакомьтесь с новой документацией по line-clamp, чтобы узнать больше о том, как всё это работает, если вы ещё не играли с ним.

Новое сокращение line-height для font-size утилит

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

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

-  <p class="text-lg leading-7 ...">
+  <p class="text-lg/7 ...">
     So I started to walk into the water. I won't lie to you boys, I was terrified. But
     I pressed on, and as I made my way past the breakers a strange calm came over me.
     I don't know if it was divine intervention or the kinship of all living things but
     I tell you Jerry at that moment, I <em>was</em> a marine biologist.
   </p>

Вы можете использовать любое значение, определённое в вашей шкале line-height, или использовать произвольные значения, если вам нужно отклониться от ваших токенов дизайна:

<p class="text-sm/[17px] ..."></p>

Ознакомьтесь с документацией по размеру шрифта, чтобы увидеть ещё несколько примеров.

Переменные CSS без var()

В духе того, чтобы меньше печатать, мы сделали возможным опускать var() при использовании переменной CSS в качестве произвольного значения:

my-component.jsx:

 export function MyComponent({ company }) {
   return (
     <div
       style={{
         '--brand-color': company.brandColor,
         '--brand-hover-color': company.brandHoverColor,
       }}
-       className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]"
+       className="bg-[--brand-color] hover:bg-[--brand-hover-color]"
     />
   )
 }

Это довольно крутой трюк для использования таких вещей, как hover: со стилями, которые берутся из базы данных или что-то в этом роде.

Конфигурируемые font-variation-settings для пользовательских семейств шрифтов

При использовании пользовательских шрифтов вам часто нужно настраивать такие вещи, как font-feature-settings или font-variation-settings, чтобы использовать определённые настройки, предлагаемые шрифтом.

Некоторое время мы упрощали это для font-feature-settings, но теперь вы можете сделать то же самое с font-variation-settings, указав для него в объекте значения, которые вы можете добавить после списка шрифтов в вашем файле конфигурации.

tailwind.config.js:

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        'Inter var, sans-serif',
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      ],
    },
  },
}

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

Новые утилиты list-style-image

Вы когда-нибудь хотели использовать изображение моркови в качестве маркера элемента списка? Что ж, теперь вы можете это сделать с помощью новых утилит list-image-*.

<ul class="list-image-[url(carrot.png)] ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

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

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

Новые утилиты hyphens

Вы когда-нибудь слышали о HTML сущности ­? Я тоже, пока мы не добавили поддержку в эти hyphens-* утилиты.

Используя hyphens-manual и тщательно расставленные ­, вы можете сообщить браузеру, куда вставить перенос, когда нужно разбить слово на несколько строк:

<p class="hyphens-manual ...">
    ... Kraftfahrzeug&shy;Haftpflichtversicherung is a ...
</p>

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

Ознакомьтесь с документацией по переносам, чтобы узнать больше.

Новые утилиты caption-side

Ещё одна новинка — элемент <caption>! У нас есть новые caption-*, используемые для заголовков таблиц, чтобы управлять их отображением вверху или внизу таблицы, к которой они прикреплены.

<table>
  <caption class="caption-bottom">
    Table 3.1: Professional wrestlers and their signature moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td >The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

Ознакомьтесь с документацией по caption-side, чтобы увидеть больше примеров.

Итак, это Tailwind CSS v3.3! Никаких критических изменений, просто куча забавных новинок. Попробуйте их в своих проектах уже сегодня, обновив Tailwind CSS до последней версии с помощью npm:

npm install -D tailwindcss@latest

Ага, ещё один релиз без text-shadow утилит. Помните тот эпизод Сайнфелда, где Крамер пытался увидеть, как далеко он может проехать, не останавливаясь на заправке? Это мой любимый эпизод.