Tailwind CSS — это новая платформа CSS, впервые выпущенная в конце 2017 года. Она использует другой подход к стилизации, который может вас удивить. В частности, Tailwind отказывается от семантических имен классов в пользу более целенаправленных классов, присутствующих в «функциональном CSS».
Функциональный CSS против семантического CSS
Чтобы почувствовать разницу, рассмотрим элемент заголовка. Допустим, мы хотим сделать его жирным и красным. В семантическом CSS нам рекомендуется создать класс, описывающий роль, которую класс играет в нашем приложении, скажем, app-header, а затем применить необходимые стили: app-header: { font-weight: bold; color: red; }. Идея здесь заключается в том, что вы создаете классы, которые имеют для вас значение с точки зрения их семантической (а не синтаксической) роли в дизайне пользовательского интерфейса.
С другой стороны, в функциональном CSS вы должны создать класс, описывающий действие стиля, например text-bold-red. Tailwind использует этот режим и создает множество служебных классов для использования в ваших приложениях. Например, в Tailwind вы должны использовать font-bold и text-red чтобы создать свой стиль заголовка.
Это противоречит общепринятому мнению при создании таблиц стилей. Но иногда общепринятое мнение оказывается неполным, и оказывается, что подход Tailwind обеспечивает мощный и простой подход к стилизации пользовательского интерфейса. Tailwind использует согласованное соглашение об именах, и в результате вы можете начать (гораздо быстрее, чем с помощью CSS или другой инфраструктуры, такой как Bootstrap) хранить все его возможности в своей голове, чтобы вы могли стилизовать свое приложение, не сбиваясь с шага.
Например, в Tailwind сокращение для заполнения — p-0, где первая буква обозначает заполнение, а вторая — значение этого заполнения. Так p-0 устанавливает заполнение равным 0, что эквивалентно padding 0px 0px 0p 0px в стиле. Более того, вы можете установить левое дополнение на ноль с помощью pl-0слева и справа до нуля с px-0а верх и низ до нуля с помощью py-0. Это очень удобно.
В этом уроке вы увидите, как создать адаптивный макет, чтобы глубже понять, как работает Tailwind CSS.
Включая попутный ветер
Начните с создания новой папки для хранения учебного проекта и файла index.html. Самый быстрый способ включить Tailwind в ваш файл — через unpkg — показан в листинге 1. Добавьте этот заголовок в свой файл.
Листинг 1. Заголовок Tailwind
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css">
<title>Intro to Tailwind CSS</title>
</head>
<body>
</body>
</html>
Пример навигационной панели попутного ветра
Начнем с панели навигации. В листинге 2 представлена простая панель навигации с заголовком, несколькими ссылками и цветом фона.
Листинг 2. Простая панель навигации
<body>
<nav class="flex justify-between items-center h-28 bg-blue-400 px-20">
<h1>Tailwind Intro</h1>
<ul class="flex justify-between items-center w-56">
<a href="#">
<li>Link</li>
</a>
<a href="#" >
<li>Link</li>
</a>
<a href="#" >
<li>Link</li>
</a>
</ul>
</nav>
</body>
В листинге 2 указан гибкий макет с flex Класс попутного ветра. В нем также указывается justify-content: space-between; стиль с justify-between и justify-items: center; с items-center. Вы можете начать понимать, как служебные классы Tailwind предоставляют своего рода сокращение для стилей.
Далее в листинге 2 используется h-28 утилита для придания навигационной панели фиксированной высоты 7rem. Высота и ширина в Tailwind — это порядковые числа, связанные со значениями rem (подробнее об утилитах высоты здесь).
Фон навигационной панели устанавливается с помощью bg-blue-400. Цвета попутного ветра соответствуют формату интенсивности цвета свойства; в данном случае фон — синий и 400.
Наконец, заполнение слева и справа 20 устанавливается с помощью синтаксиса, который вы уже видели: px-20.
Адаптивные макеты в Tailwind
Теперь вы увидите, как сделать вещи отзывчивыми. Что касается навигационной панели, мы хотим центрировать все, скрыть ссылки и заменить их значком мобильной панели инструментов, который открывает меню. (Для отображения/скрытия мы воспользуемся небольшим количеством ванильного JavaScript.)
Tailwind включает встроенные точки останова для управления реагированием. Они показаны в таблице 1. Также можно настроить собственные точки останова.
Таблица 1. Адаптивные точки останова по умолчанию
Идея здесь заключается в том, что вы используете имя точки останова в качестве префикса, чтобы определить, будет ли применяться класс с префиксом, например: breakpoint:class. Ключевой момент, который нужно знать о Tailwind, заключается в том, что это сначала мобильный, поэтому классы по умолчанию будут применяться ко всему. Затем точки останова управляют тем, что применяется при увеличении размера. Вернитесь теперь к панели навигации, чтобы получить конкретное представление об этой идее.
Пример адаптивной навигационной панели
Измените index.html, чтобы он выглядел как в листинге 3.
Листинг 3. Адаптивная панель навигации
<nav class="flex flex-col md:flex-row justify-between items-center bg-blue-400 text-white px-20 md:h-28">
<h1>Tailwind Intro</h1>
<svg id="mobile-button" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 103.17"
class="h-10 md:hidden" xml:space="preserve">
<g><path d="M26,0h70.87c7.15,0,13.65,2.93,18.36,7.64l0.22,0.24c4.58,4.69,7.42,11.1,7.42,18.13v51.16c0,7.15-2.93,13.65-7.64,18.36 c-4.71,4.71-11.21,7.64-18.36,7.64H26c-7.14,0-13.64-2.93-18.35-7.64H7.64C2.93,90.82,0,84.32,0,77.16V26 c0-7.13,2.92-13.63,7.64-18.35l0.02-0.03C12.38,2.92,18.87,0,26,0L26,0z M41.31,29.74h40.26c2.25,0,4.09,1.84,4.09,4.09l0,0 c0,2.25-1.84,4.09-4.09,4.09H41.31c-2.25,0-4.09-1.84-4.09-4.09l0,0C37.22,31.58,39.06,29.74,41.31,29.74L41.31,29.74L41.31,29.74z M41.31,65.25h40.26c2.25,0,4.09,1.84,4.09,4.09l0,0c0,2.25-1.84,4.09-4.09,4.09l-40.26,0c-2.25,0-4.09-1.84-4.09-4.09l0,0 C37.22,67.09,39.06,65.25,41.31,65.25L41.31,65.25L41.31,65.25z M41.31,47.5h40.26c2.25,0,4.09,1.84,4.09,4.09l0,0 c0,2.25-1.84,4.09-4.09,4.09H41.31c-2.25,0-4.09-1.84-4.09-4.09l0,0C37.22,49.34,39.06,47.5,41.31,47.5L41.31,47.5L41.31,47.5z M96.88,8.2H26c-4.9,0-9.35,2-12.57,5.22l-0.02,0.02C10.2,16.65,8.2,21.1,8.2,26v51.16c0,4.89,2.01,9.34,5.23,12.56l-0.01,0.01 c3.23,3.22,7.68,5.23,12.57,5.23h70.87c4.88,0,9.33-2.01,12.56-5.24c3.23-3.23,5.24-7.68,5.24-12.56V26c0-4.8-1.93-9.17-5.04-12.39 l-0.19-0.18C106.21,10.21,101.77,8.2,96.88,8.2L96.88,8.2z"/></g>
</svg>
<ul id="mobile-menu" class="flex flex-col md:flex-row hidden md:flex justify-between items-center w-56">
<a href="#">
<li>Link</li>
</a>
<a href="#" >
<li>Link</li>
</a>
<a href="#" >
<li>Link</li>
</a>
</ul>
</nav>
Обратите внимание, что мы добавили flex-col и md:flex-row классы для самой навигационной панели. Это означает, что на устройствах с разрешением 768 пикселей или больше гибкий макет будет строковым. Это обычная схема определения мобильных стилей по умолчанию, а затем их переопределения на больших экранах. Мы также разрешаем высоту панели по умолчанию, а затем переопределяем ее на экранах среднего и большого размера с помощью md:h-28.
Подобные приемы мы используем для организации ul элементы.
Обратите также внимание, что мы скрываем мобильную кнопку (определенную как встроенный SVG) для средних размеров с помощью mh:hidden. Таким образом, кнопка будет выглядеть так, как мы хотим, на экранах меньшего размера.
JavaScript, используемый для отображения/скрытия меню на мобильных устройствах, показан в листинге 4. Обратите внимание, что он просто использует Tailwind hidden сорт. Этот скрипт находится в конце тела HTML.
Листинг 4. Показать/скрыть JavaScript
<script>
var button = document.querySelector('#mobile-button');
button.addEventListener('click', function (event) {
var menu = document.querySelector('#mobile-menu');
if (menu.classList.contains("hidden")){
menu.classList.remove("hidden");
} else {
menu.classList.add("hidden");
}
});
</script>
Макеты столбцов в Tailwind
Теперь обратите внимание на тело страницы. Обычный адаптивный макет — это сетка карточек, состоящая из одного, двух или трех столбцов в зависимости от размера экрана. Далее мы собираемся создать это с помощью Tailwind.
Сначала создайте несколько простых элементов div для карточек, как показано в листинге 5. Эти карточки имеют ширину, высоту и закругленную рамку, используя синтаксис, который вы видели.
Листинг 5. Простая карточка
... </nav>
<div class="grid">
<div class="w-64 h-64 border border-solid border-blue-900">Card 1</div>
<div class="w-64 h-64 border border-solid border-blue-900">Card 2</div>
<div class="w-64 h-64 border border-solid border-blue-900">Card 3</div>
<div class="w-64 h-64 border border-solid border-blue-900">Card 4</div>
<div class="w-64 h-64 border border-solid border-blue-900">Card 5</div>
<div class="w-64 h-64 border border-solid border-blue-900">Card 6</div>
</div>
...
Далее давайте сделаем контейнер карточки адаптивной сеткой, используя классы из листинга 6.
Листинг 6. Адаптивный контейнер сетки
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 justify-items-center gap-2">
Tailwind позволяет очень просто изменять столбцы сетки на основе точек останова. Вы можете увидеть, как макет по умолчанию будет содержать один столбец, а затем постепенно будет добавляться больше столбцов для больших размеров. Вы можете просмотреть это в своем браузере, изменить размер экрана и посмотреть, как изменится макет.
Теперь давайте улучшим стиль карточек. В листинге 7 приведен образец карточки с заголовком.
Листинг 7. Оформление карточки
<div class="w-64 h-64 md:w-11/12 border border-solid border-blue-900 rounded bg-blue-200">
<div class="w-full bg-blue-500 font-bold pl-2">Title 1</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
В листинге 7 используется множество сочетаний клавиш Tailwind для добавления закругленных границ и выделенной цветной строки заголовка. Также обратите внимание, что карта теперь использует md:w-11/12. Этот синтаксис ширины обеспечивает пропорциональную ширину 11/12 (или эквивалент width: 91.666667%;).
Шпаргалка по попутному ветру
Tailwind сочетает в себе много возможностей с запоминающимся и кратким синтаксисом. Отличным ресурсом является шпаргалка Tailwind CSS, которая удобна для быстрого поиска того, что вам нужно.
Tailwind — альтернатива таким подходам, как Bootstrap или Foundation. Кажется, он завоевал популярность благодаря своей большей простоте. Кроме того, Tailwind возглавляет рейтинги по интересу и удовлетворенности разработчиков.
Дальше читайте это:
- Облачные вычисления больше не являются пустяком
- Что такое генеративный ИИ? Искусственный интеллект, который создает
- Программирование с помощью ИИ: советы и лучшие практики от разработчиков
- Python пытается удалить GIL и повысить параллелизм
- 7 причин, по которым Java по-прежнему хороша
- Война за лицензирование открытого исходного кода окончена
