Статьи по тегу «Tailwind»

4 дня назад

Курс по Tailwind CSS: Мини-лендинг на Flex, Grid и container query #10

Соберём небольшой, но «живой» лендинг: шапка, hero, карточки и футер. Главная фишка — правильно сочетать Flex, Grid и @container, чтобы страница выглядела аккуратно и на телефоне, и на десктопе.

Frontend 34

4 дня назад

Курс по Tailwind CSS: Совмещение breakpoints и container query #9

В прошлой статье мы познакомились с контейнер-кверями. Они позволяют карточкам и блокам адаптироваться по своей ширине. Но в реальных проектах почти всегда используется комбинация: глобальные брейкпоинты и локальные контейнер-квери.

Frontend 25

4 дня назад

Курс по Tailwind CSS: Container query #8

Раньше адаптивность вёрстки строилась только на медиазапросах (@media) и брейкпоинтах (sm:, md:, lg:). Но у этого подхода есть ограничение: стили меняются в зависимости от ширины экрана, а не от ширины самого блока.

Frontend 19

4 дня назад

Курс по Tailwind CSS: Grid-сетки #7

В прошлой статье мы разобрали flexbox. Он отлично подходит для выравнивания и простых макетов: меню, хедеры, блоки в строку. Но если нужно выстроить настоящую сетку карточек или галерею — удобнее использовать Grid.

Frontend 64

4 дня назад

Курс по Tailwind CSS: Flexbox #6

Flexbox — мощный инструмент для построения макетов. Он упрощает управление расположением элементов по горизонтали и вертикали. В Tailwind всё это сводится к простым утилитам, которые легко комбинировать и читать прямо в разметке.

Frontend 83