Tailwind 3.3 – больше оттенков и улучшенная типизация

Готовьтесь разнообразить свою веб-разработку с помощью последнего релиза Tailwind CSS v3.3! Это обновление предлагает обширную палитру цветов, которая удовлетворит даже самых искушенных дизайнеров. Но это еще не все - наслаждайтесь новой поддержкой ESM/TS, которая сделает ваш рабочий процесс более гладким, чем шелк. И, как если бы этого было мало, теперь вы можете насладиться превосходными свойствами и другими вкусными функциями, которые поднимут ваш веб-сайт на новый уровень. Не упустите этого вкусного обновления - ваши вкусовые рецепторы (и клиенты) будут благодарны вам!

Для начала обновим существующую версию Tailwind до последней:

npm install -D tailwindcss@latest

С новой версией вы можете создать файл конфигурации для TS (или ESM):

npx tailwindcss init --ts

Теперь добавим в палитру красок: к каждому цвету добавлены темные оттенки с индексом -950:

<span class="font-bold text-slate-950">-950 оттенков</span>

Для тех, кто использует опции языка RTL и LTR, жизнь станет проще благодаря тегам ms-3 (margin start) и me-3 (margin end). Те же свойства были добавлены к start-, end-, padding, rounded, border и scroll.

классы ms и me

<div class="group flex items-center"> <div class="me-3"> <p class="text-sm font-medium text-slate-700">أوليج ريبنيكوف</p> <p class="text-sm font-medium text-slate-500">مطور ويب</p> </div> <img class="shrink-0 h-12 w-12 rounded-full" src="@/assets/Oleg.jpg" alt="Oleg Rõbnikov Web Development logo" /> <div class="ms-3"> <p class="text-sm font-medium text-slate-700">Oleg Rõbnikov</p> <p class="text-sm font-medium text-slate-500">Web developer</p> </div> </div>

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

class="bg-gradient-to-r from-rose-400 from-30% via-fuchsia-500 via-60% to-indigo-500 to-90% h-10 w-300"

Теперь не нужно использовать плагин для line-clamp. Просто добавьте класс "line-clamp-2" и т.д. для указания числа строк.

Классы line-height и font-size объединены в один, например 'font-lg/7', а также поддерживают произвольные значения, например 'font-xl/[17px]'.

Цветовые переменные теперь поддерживаются в аргументах классов без префикса 'var'.

style="--brandColor: #e500ff; --hoverBrandColor: #000000" class="text-[--brandColor] hover:text-[--hoverBrandColor]"

Расширенные опции для семейства шрифтов включают fontVariationSettings в дополнение к fontFeatureSettings, которые уже были. Оба доступны в tailwind.config.ts. Пожалуйста, не забудьте обновить ваш TypeScript до v.5 и PostCSS до v.8.4. Так как я был нетерпелив и хотел попробовать все новые функции новой версии Tailwind, я не сделал это, и вуаля, несколько новых функций работали не так, как я ожидал. Поэтому, пожалуйста, не забудьте обновить ваши зависимости.

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

Еще одна полезная функция - возможность настроить изображение маркера списка, используя list-image-*.

<ul class="ms-14 list-image-[url('/logo.png')]">

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ul>

hyphens-manual позволяет добавить пользовательскую точку переноса для длинных слов, таких как pneumonoultramicroscopicsilicovolcanoconiosis. Это делается с помощью тега ­.

<p class="ms-10 w-20 hyphens-manual"> pneumo&shy;noultra&shy;microscopic&shy;silico&shy;volcanoco&shy;niosis </p>

Заголовок таблицы теперь может быть выровнен по верхнему или нижнему краю таблицы с помощью одного класса caption-*.

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

Вы можете сэкономить некоторое время, клонируя мой проект Tailwind на GitHub.