10 декабря 2021 года Адам Ватан, основатель TailwindCSS, объявил об общем выпуске TailwindCSS v3.0, в котором реализован ряд улучшений производительности, усовершенствований рабочего процесса разработки и множество новых функций.
Итак, какие интересные новые функции эта ослепительная звезда в области инженерии CSS привносит в версию 3.0? Мы представим их один за другим.
Режим Just-in-Time на ходу
В Tailwind 2.x представлен новый режим Just-in-Time, который может обеспечивать согласованность разработки и производства и создавать их по запросу. что производительность была значительно улучшена.Для любого инструмента сборки, такого как Webpack, для завершения сборки требуется всего 800 мс, в то время как раньше это могло занимать 30-45 с.
А благодаря режиму JIT Tailwind поддерживает ряд новых функций, таких как «вспомогательные классы с произвольными значениями».
При использовании JIT ранее необходимо указать режим в файле конфигурации:
// tailwind.config.js
module.exports = {
// ...
mode: 'jit',
// ...
}
Затем вы можете наслаждаться чрезвычайно быстрыми сборками и использовать вспомогательные классы с произвольными значениями, такими как:
<div class="top-[-113px]"></div>
Это было запрещено в предыдущих версиях Tailwind. Если вам нужно переопределить это произвольное значение, вам все равно придется определить имя класса и написать соответствующий CSS:
<div class="arbitrary-values"></div>
<style>
.arbitrary-values {
top: -113px;
}
</style>
Эта форма кажется относительно фрагментированной в Tailwind, поэтому в режиме JIT, поскольку он поддерживает построение по требованию, эта форма произвольного значения также может быть записана с использованием унифицированного синтаксиса Tailwind.
В версии 3.0 Tailwind имеет встроенный JIT, поэтому нет необходимости объявлять JIT-режим в файле конфигурации, по умолчанию используется сборка по требованию, могут использоваться любые вспомогательные классы, а методы разработки и сборки производства унифицирован с продуктом, избегая несоответствий и получая отличную оптимизацию производительности.
Все цвета доступны из коробки
До версии 3.0 Tailwind приходилось осторожно ограничивать доступные цвета, чтобы сосредоточиться на размере тома CSS в режиме разработки, но после версии 3.0 мы можем ввести множество новых цветов палитры, таких как голубой (небо синий цвет), rose (роза), fuchsia (фуксия), лайм (лаймово-оранжевый) и 15 оттенков серого, не беспокоясь о росте размера файла CSS.
Поддержка цветных теней
Раньше в Tailwind было сложно поддерживать цветные тени комбинированным способом, хотя пользователи давно просили об этой функции, она так и не была реализована. После 5 неудачных попыток эта функция была наконец реализована в Tailwind v3.0, и теперь вы можете использовать эти цветовые оттенки в Tailwind:
Например следующий код:
<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>
Можно получить следующие эффекты:
API захвата прокрутки
Мы добавили полный набор вспомогательных классов для реализации модуля захвата прокрутки CSS, чтобы вы могли напрямую реализовать очень богатые эффекты захвата прокрутки в HTML:
Что такое захват прокрутки? То есть при переходе к следующему элементу вы можете перейти к определенному положению этого элемента, например, к следующему расположению в середине изображения.
Для вышеуказанного эффекта требуется только следующий более простой вспомогательный класс Tailwind:
<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>
В контейнере привязки Snap-Center, Snap-Start и т. д. задают элементы для позиционирования прокрутки, а Scroll Margin используется для установки смещения относительно позиционирования.scroll-m{side}-{size}Установите такой форматscroll-ml-6, это длина, смещенная на 6 единиц слева:
<div class="snap-x ...">
<div class="scroll-ml-6 snap-start ...">
<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="scroll-ml-6 snap-start ...">
<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="scroll-ml-6 snap-start ...">
<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="scroll-ml-6 snap-start ...">
<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="scroll-ml-6 snap-start ...">
<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>
Как показано в приведенном выше коде, центр привязки будет располагаться в начале изображения при прокрутке, а добавлениеscroll-ml-6После этого он будет смещен на 6 единиц относительно левого, что приведет к следующему эффекту:
Многоколоночный макет
мы присоединилисьcolumnsПоддержка макета столбца, также известного как тип «макета новостей», этот макет очень полезен, а также очень полезен при применении к дизайну макета нижней панели навигации.
Например, дизайн панели навигации с несколькими столбцами в нижней части большинства наших веб-сайтов. Возьмем в качестве примера официальный сайт Tailwind:
Когда вы используете соответствующий вспомогательный класс следующим образом:
<div class="columns-1 sm:columns-3 ...">
<p>...</p>
<!-- ... -->
</div>
Вы можете получить следующие эффекты:
Собственные стили управления формой
Мы добавили поддержку CSSaccent-colorПоддержка атрибутов, таких как добавление стилей к кнопке поля ввода файла в форме, позволяет вам добавлять стили к собственным кнопкам управления формы более детальным образом, например, с помощью следующего кода:
<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>
Можно получить следующие эффекты:
Перед выбором файлов:
После выбора файла:
модификатор печати
мы добавилиprintМодификаторы, которые позволяют отображать, как выглядит ваш сайт, когда пользователь его распечатывает:
<div>
<article class="print:hidden">
<h1>My Secret Pizza Recipe</h1>
<p>This recipe is a secret, and must not be shared with anyone</p>
<!-- ... -->
</article>
<div class="hidden print:block">
Are you seriously trying to print this? It's secret!
</div>
</div>
Например, приведенная выше логика кода в режиме печати является первой.articleблоки не отображаются, аdivотображение блока.
современныйaspect ratio API
Мы добавили роднойaspect ratio**** поддержка атрибута, потому что поддержка браузера сейчас очень высока, то есть мы можем получить относительно идеальное соотношение сторон.
Например, следующий код может установить наилучшее соотношение сторон видео:
<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>
Приведенный выше код дает следующий результат:
хороший стиль подчеркивания
Теперь мы также поддерживаем изменение цвета, толщины и других атрибутов подчеркивания~
Например, следующий код:
<p>
I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at
<a href="#" class="underline decoration-sky-500 decoration-2">My Company, Inc</a>. Outside of work, I
like to <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2">watch pod-racing</a>
and have <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2">light-saber</a>
fights.
</p>
Можно получить следующие эффекты:
Модификаторы RTL и LTR
Мы также добавили экспериментальную поддержку многонаправленных макетов, таких как RTL (справа налево) и LTR (справа на право), со следующим кодом:
<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">
<p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">...</p>
<p class="text-sm font-medium text-gray-500 group-hover:text-gray-700">...</p>
</div>
</div>
Можно получить следующие эффекты:
Портрет и Лмодификатор ландшафта
Мы также добавили поддержку модификаторов в различных ориентациях экрана, таких какportrait(вертикальный экран),landscape(landscape), который позволяет управлять стилем в соответствующей ориентации экрана с помощью различных модификаторов:
<div>
<div class="portrait:hidden">
<!-- ... -->
</div>
<div class="landscape:hidden">
<p>
This experience is designed to be viewed in landscape. Please rotate your
device to view the site.
</p>
</div>
</div>
Поддержка вспомогательного класса с произвольными значениями
Это не кажется разумным, но мы добавили вспомогательный класс Tailwind для произвольных значений CSS и позволяют комбинироватьhover,lgиспользование модификатора etc:
<div class="[mask-type:luminance] hover:[mask-type:alpha]">
<!-- ... -->
</div>
Или произвольное значение, такое как 56px или 44px, используемое с модификатором lg:
<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
<!-- ... -->
</div>
Использование CDN для использования Tailwind
В настоящее время не существует хорошего способа CDN на основе CSS для использования Tailwind CSS v3.0, поэтому мы создали библиотеку JavaScript, которая поможет вам его использовать:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script src="https://cdn.tailwindcss.com/"></script>
</head>
<body>
<!-- -->
</body>
</html>
Этот метод используется только в средах разработки или когда вы хотите создать демоверсию или попробовать интересную идею. Просто добавьте любой HTML-документ, который хочет использовать функцию Tailwind.scriptтег для цитированияcdn.tailwindcss.com/Вот и все.
Выше перечислены все особенности обновления TailwindCSS v3.0. Глядя на это, что вы думаете об TailwindCSS v3.0? Готовы ли вы использовать его в производстве или добавить в свой набор инструментов при создании следующего приложения 🐴?
❤️/Спасибо за поддержку/
Выше приведено все содержание этого обмена, я надеюсь, что это поможет вам ^_^
Если вам понравилось, не забудьте поделиться, поставить лайк и добавить в избранное~
Добро пожаловать в публичный аккаунтавтобус программиста, три брата из Byte, Shopee и Zhaoyin, делятся опытом программирования, техническими галантерейными товарами и планированием карьеры, чтобы помочь вам избежать окольных путей, чтобы попасть на большую фабрику.