Салют, Хабр!
Tailwind CSS – это utility-first CSS фреймворк, который отличается от традиционных CSS фреймворков вроде Bootstrap или Foundation тем, что вместо предопределенных компонентов предлагает набор utility-классов, позволяющих стилизовать элементы прямо в HTML.
Utility-first подход заключается в использовании множества функциональных классов, каждый из которых отвечает за одно CSS свойство, к примеру паддинги, маржини и т.п.
В этой статье рассмотрим синтаксис Tailwind CSS, в целом, он похож на дефолт CSS.
Установка
Интегрируем Tailwind CSS в проект, довольно просто и банально с помощью npm:
npm install -D tailwindcss
npx tailwindcss initПомимо установки самого Tailwind, здесь создастся конф.файл tailwind.config.js.
Основной принцип работы с tailwind.config.js заключается в модификации ключа theme, который содержит настройки по умолчанию. Добавляя или изменяя значения в этом ключе, можно адаптировать стили под нужды. Например, чтобы добавить новые цвета или изменить существующие, можно:
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#243c5a',
},
},
},
}После настройки конфигурации пришло время вызывать Tallwind в проект проект. Создаем файл CSS и:
@tailwind base;
@tailwind components;
@tailwind utilities;Далее с Tailwind CLI можно сгенерировать итоговый CSS файл:
npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --watchОбзор синтаксиса
Типографика
Размер шрифта устанавливается с использованием утилит размеров, которые начинаются с text-, за которым следует значение размера. Например, text-xs устанавливает маленький размер текста, в то время как text-3xl делает его значительно больше.
<p class="text-xs">маленький текст</p>
<p class="text-xl">большой текст</p>Контроль за жирностью шрифта осуществляется через утилиты, начинающиеся на font-, например, font-bold для жирного текста или font-light для легкого:
<p class="font-bold">жирный текст</p>
<p class="font-light">легкий текст</p>Для применения курсива:
<p class="italic">Курсивный текст</p>Межстрочный интервал, или интерлиньяж, регулируется с помощью утилит, начинающихся на leading- :
<p class="leading-tight">Узкий межстрочный интервал</p>
<p class="leading-loose">Широкий межстрочный интервал</p>Выравнивание текста по горизонтали управляется утилитами text-left, text-center, text-right, и text-justify:
<p class="text-left">левый край</p>
<p class="text-center">центр</p>
<p class="text-right">правый край</p>Цвета и фон
Tailwind CSS предлагает естественно огромную палитру предопределенных цветов, которые можно использовать для текста, фона, границ и других элементов. Цвета идут с различными оттенками, начиная от светлых (сотка) до темных (900).
<div class="bg-blue-500 text-white">
текст
</div>bg-blue-500 задает фоновый цвет, а text-white — цвет текста.
Можно расширять стандартную палитру, добавляя собственные цвета через конф. файл tailwind.config.js:
module.exports = {
theme: {
extend: {
colors: {
'custom-color': '#663399',
},
},
},
}Можно юзать custom-color так же, как и любой другой предопределенный цвет в Tailwind.
Также у фона есть функции, назначения которых очевидно по названию: bg-img, bg-repeat,bg-position и размер bg-size.
Градиенты добавляют визуальную глубину и динамику дизайну. С таилвиндом создавать линейные градиенты с помощью классов bg-gradient-to-t, bg-gradient-to-r и так далее, указывая направление градиента, а также классы для начального и конечного цветов градиента:
<div class="bg-gradient-to-r from-blue-500 to-teal-500">
Ваш текст на градиентном фоне
</div>Здесь горизонтальный градиент от синего к бирюзовому.
Раскладка и грид
Для флексбокса есть серия классов, начиная от flex для активации Flexbox для контейнера, до justify-content, align-items и flex-wrap для управления поведением элементов внутри flex-контейнера:
<div class="flex justify-center items-center">
<div class="p-4">Элемент 1</div>
<div class="p-4">Элемент 2</div>
</div>Контейнер div использует Flexbox для центрирования своих дочерних элементов как по горизонтали, так и по вертикали.
Tailwind CSS интегрирует поддержку CSS Grid через набор классов grid, grid-cols-* и grid-rows-* для определения количества столбцов и строк сетки, а также gap, row-gap и col-gap для управления расстояниями между элементами:
<div class="grid grid-cols-3 gap-4">
<div class="p-4 bg-blue-500">Элемент 1</div>
<div class="p-4 bg-red-500">Элемент 2</div>
<div class="p-4 bg-green-500">Элемент 3</div>
</div>Создали сетку из трех столбцов с равными промежутками между ними, где каждый элемент сетки имеет свой фоновый цвет.
Можно создавать систему отступов и зазоров. С классами вроде m-, my-, mx-, p-, py-, и px- можно применять маржины и паддинги в любом направлении и с любой точностью:
<div class="m-4 p-4 bg-gray-200">
блок имеет внешние и внутренние отступы.
</div>Эффекты, фильтры и переходы
Для добавления теней к элементам можно юзать классы shadowс различной интенсивностью, начиная от легкой shadow-sm до интенсивной shadow-2xl:
<div class="shadow-lg p-6 mb-6 bg-white rounded-lg">
контент с заметной тенью
</div>Классы прозрачности opacity позволяют регулировать видимость элементов, делая их полностью или частично прозрачным
Также есть фильтры blur), saturate и contrast, к примеру:
<img class="blur-lg" src="your-image.jpg" alt="Размытое изображение">Для создания плавных анимаций и переходов между состояниями можно использовать классы transition и animate:
<button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-700 transition-colors duration-300">
Наведите на меня
</button>Пару примеров использования
Адаптивная карточка продукта:
<!-- карточка продукта с использованием Tailwind CSS -->
<div class="max-w-sm rounded overflow-hidden shadow-lg m-4">
<img class="w-full" src="/img/product-1.jpg" alt="Изображение продукта">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2"> названия продукта</div>
<p class="text-gray-700 text-base">
Описание продукта
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#тег1</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#тег2</span>
</div>
</div>Адаптивная нав.панель:
<!-- навигационная панель с Tailwind CSS -->
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<span class="font-semibold text-xl tracking-tight">Название сайта</span>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Меню</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Документация
</a>
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
Примеры
</a>
</div>
</div>
</nav>Модальное окно:
<!-- модальное окно -->
<div class="fixed z-10 inset-0 overflow-y-auto hidden" id="modal">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<!-- Оверлей -->
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<!-- Контент модального окна -->
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<!-- Содержимое -->
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Заголовок модального окна</h3>
<div class="mt-2">
<p class="text-sm text-gray-500"> сообщение или содержание.</p>
</div>
</div>
</div>
</div>
<!-- Действия -->
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-500 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
Действие
</button>
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Закрыть
</button>
</div>
</div>
</div>
</div>Формы с адаптивным дизайном:
<div class="max-w-md mx-auto mt-10">
<form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
Имя пользователя
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
Пароль
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
Войти
</button>
</div>
</form>
</div>В завершение хочу напомнить о том, что в календаре мероприятий OTUS, вы можете зарегистрироваться на ряд бесплатных вебинаров. Подробнее по ссылке.
