Доступна версия 3.0 Tailwind CSS, фреймворка, который позволяет быстро создавать современные веб-сайты. Она обеспечивает невероятный прирост производительности.

Каскадные таблицы стилей, широко известные как CSS, являются одним из основных языков Интернета. CSS, используемый для стилизации HTML-документа, описывает, как должны отображаться элементы HTML. 10 декабря Адам Уотан, генеральный директор Tailwind Labs, объявил о выпуске версии 3 фреймворка Tailwind CSS. Этот основной выпуск обеспечивает впечатляющий прирост производительности, улучшения рабочего процесса и функциональности.

Tailwind CSS – это утилита, но также и CSS-фреймворк, наполненный такими классами, как сгибать, пт-4, текстовый центр и повернуть-90, которые можно составить для создания любого дизайна прямо в тегах HTML. Он был разработан для того, чтобы можно было быстро создавать современные веб-сайты, даже не покидая HTML-кода. Вот некоторые новые функции, предоставляемые версией 3 Tailwind CSS:

Точно в срок, стабильный двигатель

В марте прошлого года Tailwind Labs представила свой новый движок Just-in-Time, который обеспечил огромный прирост производительности, разблокировал новые функции, такие как произвольные значения, и заставил исчезнуть сложные варианты конфигурации. В Tailwind CSS v3.0 новый движок стал стабильным и заменил классический движок, поэтому каждый проект Tailwind может извлечь выгоду из этих улучшений прямо из коробки.

Привязка прокрутки API

Команда добавила полный набор утилит в модуль CSS Scroll Snap, который позволяет создавать очень богатые возможности прокрутки прямо в HTML-коде:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

Многоколоночный макет

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

Родные элементы управления формой

Мы добавили поддержку нового свойства accent-color вместе с модификатором стиля кнопок ввода файлов, так что теперь проще, чем когда-либо, добавить свой собственный поворот к элементам управления встроенной формы.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

form>
  <div class="flex items-center space-x-6">
    <div class="shrink-0">
      <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" />
    </div>
    <label class="block">
      <span class="sr-only">Choose profile photo</span>
      <input type="file" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-full file:border-0
        file:text-sm file:font-semibold
        file:bg-violet-50 file:text-violet-700
        hover:file:bg-violet-100
      "/>
    </label>
  </div>
  <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-gray-600">
    <input type="checkbox" class="accent-violet-500" checked/>
    <span>Yes, send me all your stupid updates</span>
  </label>
</form>

Произвольные свойства

Теперь возможно добавление полностью произвольного CSS, который можно комбинировать с такими модификаторами, как hover, lg. Кроме того, документация Tailwind была полностью пересмотрена и исправлена ​​с недавними примерами.

Источник : Попутный ветер CSS

А ты ?

Что вы думаете о Tailwind CSS?

Какое улучшение, внесенное в версию 3.0, вас больше всего интересует?

Смотрите также:

Tailwind CSS v2.0 поставляется с новой цветовой палитрой, насчитывающей в общей сложности 220 цветов, и новым рабочим процессом для создания ваших собственных цветовых моделей.

WebStorm, IDE для разработки веб-приложений, доступна в версии 2020.3 с поддержкой Tailwind CSS и улучшения внешнего вида и удобства использования.

Выпущен PhpStorm 2020.3, который обеспечивает поддержку PHP 8, PHPStan, Psalm, Tailwind CSS и Xdebug 3, а также совместную разработку с Code With Me.

Tailwind UI, компоненты пользовательского интерфейса, разработанные создателями Tailwind CSS, которые, по словам его дизайнеров, позволяют создавать собственные стили, не покидая HTML.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.