Обзор синтаксиса Tailwind CSS
Салют, Хабр!
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 делает его значительно больше.
маленький текст
большой текст
Контроль за жирностью шрифта осуществляется через утилиты, начинающиеся на font-, например, font-bold для жирного текста или font-light для легкого:
жирный текст
легкий текст
Для применения курсива:
Курсивный текст
Межстрочный интервал, или интерлиньяж, регулируется с помощью утилит, начинающихся на leading-:
Узкий межстрочный интервал
Широкий межстрочный интервал
Выравнивание текста по горизонтали управляется утилитами text-left, text-center, text-right, и text-justify:
левый край
центр
правый край
Цвета и фон
Tailwind CSS предлагает естественно огромную палитру предопределенных цветов, которые можно использовать для текста, фона, границ и других элементов. Цвета идут с различными оттенками, начиная от светлых (сотка) до темных (900).
текст
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 и так далее, указывая направление градиента, а также классы для начального и конечного цветов градиента:
Ваш текст на градиентном фоне
Здесь горизонтальный градиент от синего к бирюзовому.
Раскладка и грид
Для флексбокса есть серия классов, начиная от flex для активации Flexbox для контейнера, до justify-content, align-items и flex-wrap для управления поведением элементов внутри flex-контейнера:
Элемент 1
Элемент 2
Контейнер div использует Flexbox для центрирования своих дочерних элементов как по горизонтали, так и по вертикали.
Tailwind CSS интегрирует поддержку CSS Grid через набор классов grid, grid-cols-* и grid-rows-* для определения количества столбцов и строк сетки, а также gap, row-gap и col-gap для управления расстояниями между элементами:
Элемент 1
Элемент 2
Элемент 3
Создали сетку из трех столбцов с равными промежутками между ними, где каждый элемент сетки имеет свой фоновый цвет.
Можно создавать систему отступов и зазоров. С классами вроде m-, my-, mx-, p-, py-, и px- можно применять маржины и паддинги в любом направлении и с любой точностью:
блок имеет внешние и внутренние отступы.
Эффекты, фильтры и переходы
Для добавления теней к элементам можно юзать классы shadowс различной интенсивностью, начиная от легкой shadow-sm до интенсивной shadow-2xl:
контент с заметной тенью
Классы прозрачности opacity позволяют регулировать видимость элементов, делая их полностью или частично прозрачным
Также есть фильтры blur), saturate и contrast, к примеру:
Для создания плавных анимаций и переходов между состояниями можно использовать классы transition и animate:
Пару примеров использования
Адаптивная карточка продукта:
названия продукта
Описание продукта
#тег1
#тег2
Адаптивная нав.панель:
Модальное окно:
Формы с адаптивным дизайном:
В завершение хочу напомнить о том, что в календаре мероприятий OTUS, вы можете зарегистрироваться на ряд бесплатных вебинаров. Подробнее по ссылке.
