Tailwind CSS v3.0: 10 лучших новых возможностей
Tailwind CSS v3.0 вышел 9 декабря 2021 года. Это принесло исключительный прирост производительности, значительное улучшение рабочего процесса и огромное количество новых функций. Эта версия — одна из самых интересных для пользователей Tailwind CSS. Поздравляем команду Tailwind и её сообщество, которые усердно работали над тем, чтобы этот крупный релиз имел огромный успех!
Я продемонстрирую 10 лучших функций, предлагаемых в Tailwind CSS v3.0, чтобы вы могли начать использовать их и улучшать свой опыт фронтэнд разработки, попробовав один из лучших CSS фреймворков. Эта статья будет полезна как начинающим, так и опытным разработчикам/дизайнерам.
10 самых удивительных функций, предлагаемых в Tailwind CSS v3.0
- Play CDN
- Необычные стили подчёркивания
- Цветные тени
- Каждый цвет из коробки
- Произвольные свойства
- Многоколоночный макет
- Модификатор
print - Современный API соотношения сторон
- Стабильный Just-In-Time Engine
- Собственный стиль управления формой
1. Play CDN
Play CDN позволяет включать Tailwind CSS в ваши проекты без загрузки полного пакета через npm или yarn. Это не CDN на основе CSS, это CDN на основе скриптов. Добавьте его в заголовок вашего HTML-файла и начните использовать служебные классы Tailwind для оформления своего контента.
Play CDN не предназначен для использования в продакшене, а служит быстрым способом для начала работы с фреймворком с нулевой конфигурацией (без настройки).
Следующий фрагмент кода демонстрирует, как подключить Tailwind с помощью Play CDN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS v3.0</title>
<!-- Import Tailwind CSS Through Play CDN -->
<script src="https://cdn.tailwindcss.com/"></script>
</head>
<body>
<!-- Your Tailwind components here -->
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>Также вы можете использовать их онлайн-площадку, что бы мгновенно приступить к работе с их компонентами.
2. Необычные стили подчёркивания
Необычные стили подчёркивания позволяют изменять цвет, стиль, толщину и смещение подчёркиваний. Давайте испробуем каждый из них.
- Цвет подчёркивания текста
- Стиль подчёркивания текста
- Толщина подчёркивания текста
- Смещение подчёркивания текста
2.1 Цвет линии подчёркивания текста
Эта утилита используется для управления цветом подчёркивания текста. Вы можете использовать decoration-{цвет}, чтобы изменить цвет подчёркивания текста. Посмотрите следующий фрагмент кода, чтобы понять, как вы можете их использовать.
<div>
<p>
I’m Tara Parasd Routray, a full-stack developer based in India.
I love to build amazing websites keeping
<!-- Utilties used: underline, decoration-sky-500 -->
<a class="underline decoration-sky-500">performance and security</a> in mind.
<!-- Utilties used: underline, decoration-pink-500 -->
Outside of work, I love to <a class="underline decoration-pink-500">watch Nextflix
<!-- Utilties used: underline, decoration-indigo-500 -->
</a> and play <a class="underline decoration-indigo-500">outdoor games</a> with my friends.
</p>
</div>Так же вы можете управлять прозрачностью подчёркивания текста с помощью модификатора прозрачности цвета.
<div>
<p>
I’m Tara Parasd Routray, a full-stack developer based in India.
I love to build amazing websites keeping
<!-- Utilties used: underline, decoration-sky-500/30 -->
<a class="underline decoration-sky-500/30">performance and security</a> in mind.
<!-- Utilties used: underline, decoration-pink-500/30 -->
Outside of work, I love to <a class="underline decoration-pink-500/30">watch Nextflix
<!-- Utilties used: underline, decoration-indigo-500/30 -->
</a> and play <a class="underline decoration-indigo-500/30">outdoor games</a> with my friends.
</p>
</div>2.2 Стиль линии подчёркивания текста
Эта утилита используется для управления стилем подчёркивания текста. Вы можете использовать decoration-{стиль} для изменения стиля подчёркивания. В следующем фрагменте кода демонстрируется, как вы можете его использовать.
<div>
<!-- Utitlies used: underline, decoration-solid -->
<p class="underline decoration-solid">The quick brown fox...</p>
<!-- Utitlies used: underline, decoration-double -->
<p class="underline decoration-double">The quick brown fox...</p>
<!-- Utitlies used: underline, decoration-dotted -->
<p class="underline decoration-dotted">The quick brown fox...</p>
<!-- Utitlies used: underline, decoration-dashed -->
<p class="underline decoration-dashed">The quick brown fox...</p>
<!-- Utitlies used: underline, decoration-wavy -->
<p class="underline decoration-wavy">The quick brown fox...</p>
</div>2.3 Толщина линии подчёркивания текста
Эта утилита используется для контроля толщины линии подчёркивания. Вы можете использовать decoration-{толщина} для изменения толщины линии подчёркивания. В следующем фрагменте кода демонстрируется, как вы можете его использовать.
<div>
<!-- Utitlies used: underline, decoration-1 -->
<p class="underline decoration-1">The quick brown fox...</p>
<!-- Utitlies used: underline, decoration-2 -->
<p class="underline decoration-2">The quick brown fox...</p>
<!-- Utitlies used: underline, decoration-4 -->
<p class="underline decoration-4">The quick brown fox...</p>
</div>2.4 Отступ линии подчёркивания текста
Эта утилита используется для контроля отступа линии подчёркивания. Вы можете использовать decoration-offset-{ширина} для изменения отступа линии подчёркивания. В следующем фрагменте кода демонстрируется, как вы можете его использовать.
<div>
<!-- Utitlies used: underline, underline-offset-1 -->
<p class="underline underline-offset-1">The quick brown fox...</p>
<!-- Utitlies used: underline, underline-offset-2 -->
<p class="underline underline-offset-2">The quick brown fox...</p>
<!-- Utitlies used: underline, underline-offset-4 -->
<p class="underline underline-offset-4">The quick brown fox...</p>
<!-- Utitlies used: underline, underline-offset-8 -->
<p class="underline underline-offset-8">The quick brown fox...</p>
</div>3. Цветные тени
Цветные тени позволяют добавлять эффекты свечения, отражения и более естественные тени на цветном фоне. Вы можете использовать утилиту shadow-{цвет} для изменения цвета box-shadow. Мо умолчанию непрозрачность тени составляет 100%, но вы можете изменить это с помощью модификатора непрозрачности. В следующем фрагменте кода демонстрируется, как вы можете его использовать.
<div>
<!-- Utilities used: shadow-blue-500/50 -->
<button class="py-2 px-3 bg-blue-500 text-white text-xs rounded-md shadow-lg shadow-blue-500/50 focus:outline-none">Subscribe</button>
<!-- Utilities used: shadow-red-500/50 -->
<button class="py-2 px-3 bg-red-500 text-white text-xs rounded-md shadow-lg shadow-red-500/50 focus:outline-none ml-3">Subscribe</button>
<!-- Utilities used: shadow-green-500/50 -->
<button class="py-2 px-3 bg-green-500 text-white text-xs rounded-md shadow-lg shadow-green-500/50 focus:outline-none ml-3">Subscribe</button>
</div>Цветные тени выглядят более реалистично и естественно, чем стандартные чёрные тени, которые имеют тенденцию казаться серыми и размытыми.
4. Каждый цвет из коробки
В Tailwind v3.0 каждый отдельный цвет из цветовой палитры был включён по умолчанию, включая: сланцевый, серый, цинковый, нейтральный, каменный, красный, оранжевый, янтарный, жёлтый, салатовый, зелёный, изумрудный, бирюзовый, голубой, небесный, синий, индиго, фиолетовый, фиолетовый, фуксия, розовый и розовый. В официальной документации по настройке цветовой палитры вы можете изучить все доступные оттенки цвета и узнать как их использовать.
5. Произвольные свойства
Произвольные свойства позволяют добавить настраиваемый CSS, который вы можете комбинировать с такими модификаторами, как hover, lg и многими другими. Например, если вы хотите использовать CSS свойство, которое Tailwind не предоставляет в качестве стандартной утилиты, вы можете использовать обозначение в квадратных скобках
для написания произвольного CSS кода. В следующем фрагменте кода демонстрируется, как вы можете его использовать.
<div>
<!-- Arbitrary properties used: [font-size:24px], [line-height:1.8], [color:#608180] -->
<div class="[font-size:24px] [line-height:1.8] text-center [color:#608180]">
Tailwind is ❤
</div>
</div>6. Многоколоночный макет
Многоколоночный макет позволяет контролировать количество столбцов внутри элемента. Вы можете использовать утилиту columns-{количество}, для определения необходимого количества столбцов для содержимого внутри элемента. Ширина столбца будет автоматически преобразована в соответствии с этим числом. В следующем фрагменте кода демонстрируется, как вы можете его использовать.
<div>
<!-- Utility used: columns-3, gap-8 -->
<div class="relative columns-3 gap-8">
<!-- This will act as first column -->
<div class="relative">
<img class="w-full object-cover rounded-lg" src="https://images.pexels.com/photos/10549951/pexels-photo-10549951.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<!-- This will act as second column -->
<div class="relative">
<img class="w-full object-cover rounded-lg" src="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
<img class="w-full object-cover rounded-lg mt-8" src="https://images.pexels.com/photos/3960199/pexels-photo-3960199.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
</div>
<!-- This will act as third column -->
<div class="relative">
<img class="w-full object-cover rounded-lg" src="https://images.pexels.com/photos/2880718/pexels-photo-2880718.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" />
</div>
</div>
</div>7. Модификатор print
Модификатор print позволяет контролировать, как должна выглядеть ваша страница, когда её кто-то распечатывает. Вы можете использовать модификатор print для условного применения стилей, которые применяются только при печати страницы. В следующем фрагменте кода демонстрируется, как вы можете использовать модификатор print.
<div class="text-center [font-size: 24px]">
<!-- Utilty used: print:hidden -->
<!-- Этот контент виден пользователю при посещении страницы. -->
<article class="print:hidden">
<h1>Хотите распечатать эту страницу? 😉</h1>
<p>Вы должны нажать комбинацию клавиш (ctrl + p) 👌</p>
</article>
<!-- Utility used: print:block -->
<!-- Этот контент виден пользователю, когда он печатает эту страницу -->
<div class="hidden print:block [font-size:48px]">
Вы действительно пытаетесь это распечатать? Это секрет!
</div>
</div>8. Современный API соотношения сторон
Современный API соотношения сторон позволяет контролировать соотношение сторон элемента. Вы можете использовать утилиту aspect-{соотношение}, чтобы установить предпочтительное соотношение сторон для элемента. Этот API использует CSS свойство aspect-ratio, которое не поддерживалось в Safari до 15 версии. По умолчанию Tailwind содержит небольшой набор соотношений сторон, поскольку вы можете использовать произвольные свойства для определения собственного соотношения сторон. В следующем фрагменте кода демонстрируется, как вы можете использовать современный API соотношения сторон.
<div>
<!-- Utilty used: aspect-video -->
<!-- You can also customize the aspect ratio by using arbitrary values like:
aspect-[4/3] -->
<iframe class="w-full aspect-video" src="https://www.youtube.com/embed/TwXilp2mUtE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>9. Стабильный Just-In-Time Engine
Tailwind CSS v3.0 поставляется со стабильным JIT движком (Just-In-Time Engine). До версии 2.0 Tailwind использовал классический движок, который был заменён на JIT. Преимущество этого обновления в следующем:
- Невероятно быстрое время сборки.
- Все варианты доступны по умолчанию.
- Произвольные стили могут создаваться без написания CSS.
- Идентичный CSS в разработке и продакшене.
- Улучшена производительность браузера для среды разработки.
10. Собственный стиль управления формой
Собственный стиль управления формой позволяет стилизовать элементы формы в соответствии с вашим стилем не изобретая велосипед. В этом выпуске была добавлена поддержка нового CSS свойства accent-color и модификатор для стилизации элементов был добавлен в релиз. Что упрощает создание пользовательского дизайна элементов формы.
Вы можете использовать утилиту accent-{цвет}, для изменения акцента цвета элемента. Это полезно для стилизации таких элементов, как checkbox, radio groups путём переопределения цвета по умолчания предоставляемого браузером. В следующем фрагменте кода демонстрируется, как вы можете использовать свойство accent-color.
<div>
<div>
<label>
<!-- Utilty used: accent-rose-500 -->
<input type="checkbox" class="accent-rose-500" checked> Customized Checkbox
</label>
</div>
<div>
<label>
<!-- Utilty used: accent-rose-500 -->
<input type="radio" class="accent-rose-500" checked> Customized Radio
</label>
</div>
</div>Для стилизации кнопки выбора файла, вы можете использовать модификатор file.
<div>
<form class="flex items-center space-x-6">
<div class="shrink-0">
<img class="h-16 w-16 object-cover rounded-full bg-blue-100" src="https://tararoutray.com/assets/images/tararoutray.png" alt="Current profile photo" />
</div>
<label class="block">
<span class="sr-only">Choose profile photo</span>
<!-- Utility used: text-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-normal file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200 -->
<input type="file" class="block w-full text-sm text-blue-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-normal file:bg-blue-100 file:text-blue-700 hover:file:bg-blue-200" />
</label>
</form>
</div>Поздравляю! Вы завершили изучение функций, предлагаемых Tailwind CSS v3.0. Теперь вы можете приступить к их реализации в своих текущих или будущих проектах.