Несколько месяцев назад (на момент написания статьи) Tailwind CSS открыл исходный код своей работы над Tailwind CSS v4.0. (Вы можете найти его на GitHub здесь).

Недавно компания Tailwind анонсировала общедоступную бета-версию Tailwind CSS 4, и в этой статье я расскажу об основных моментах новой версии. Итак, начнем!

Общие изменения структуры

Двигатель компании Tailwind был переработан, что значительно улучшило его характеристики. Полные сборки выполняются до 5x быстрее, инкрементальные сборки — до 100x (вы правильно прочитали) быстрее.

Tailwind v4 также имеет унифицированную цепочку инструментов. Помните, что во всех ваших проектах Tailwind нужно было устанавливать autoprefixer и postcss? Вам больше не придется!

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

Tailwind также получает поддержку новейших функций CSS.

У CSS новый логотип (и новые функции)! ?

Лучшие коды ・ 23 ноября

#css #webdev #программирование #обсуждать

Теперь, когда общие изменения уже позади, давайте посмотрим, что конкретно добавляет Tailwind!

Новые возможности?

Если вы хотите попробовать Tailwind v4, просмотрите документацию по началу работы для v4 (бета-версия).

Если вы хотите легко обновить свой проект, просто запустите npx @tailwindcss/upgrade@next, и Tailwind сделает это за вас. Будьте осторожны! Могут быть критические изменения.

Цвета

Цветовая палитра Tailwind v4 основана на oklch вместо RGB. Цветовая система RGB немного ограничена с точки зрения согласованности на экранах и яркости. Поскольку система цветности oklch теперь широко поддерживается, Tailwind v4 воспользуется ею!

Контейнерные запросы

Tailwind v4 теперь по умолчанию поддерживает запросы к контейнерам. Если вы не знаете, что такое контейнерные запросы, позвольте мне объяснить.

Вы знаете в Tailwind такие вещи, как md:, sm: и т. д., которые позволяют вам настроить, какой CSS будет применяться на экранах разных размеров?
В этих случаях классы относятся к размеру окна. При использовании контейнерных запросов вместо этого они могут ссылаться на размер контейнера.

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


  
  
  Размер поля


Размер поля еще не является универсально поддерживаемой функцией CSS, но когда это произойдет, это будет здорово! Вместо использования JS для создания текстовых областей с автоматическим изменением размера вы можете использовать только CSS.

И Tailwind v4 поддерживает это!

Попробуйте демо-версию на сайте Tailwind.

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

  
  
  Обновления потомков


Стабильная версия Tailwind (возможно, вы об этом не знаете) имеет * вариант, который позволяет вам нацеливаться на прямые дочерние элементы элемента с помощью класса. Например:






Новый вариант ** в Tailwind v4 будет нацелен на всех потомков:







  
  
  Вставленные тени (и кольца)


Также теперь будет легко создавать вложенные тени и кольца на элементах, используя классы inset-shadow и inset-ring.












  
  
  Это гораздо больше!


Если вы хотите увидеть все новые дополнения, перейдите на https://tailwindcss.com/docs/v4-beta и ознакомьтесь с ними!

Этот пост является постом #discuss! Вот почему я сделал это кратким; Я хочу знать, что вы думаете!

Я знаю, что многие из вас, ненавистники Tailwind, вероятно, оставят мне какие-нибудь отзывы ?

Определенно есть некоторые спорные новые функции, и я хочу узнать мнения ?

Резюме: оставьте комментарий!




Спасибо, что прочитали!

Лучшие коды