Салют, Хабр!
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>
Если вы хотите углубить свои знания в программировании, приглашаем вас ознакомиться с календарем открытых уроков. Здесь вы найдете бесплатные вебинары по разным направлениям — от основ разработки до продвинутых технологий.
Если вас интересуют курсы по программированию, обратите внимание на наш каталог. В нем представлены программы для разных уровней подготовки — от базовых тем до специализированных технологий.
Чтобы оставаться в курсе актуальных технологий и трендов, подписывайтесь на Telegram‑канал OTUS.
