Паттерн фонаlink

С помощью модификаторов паттернов фона (pattern-{номер}) вы можете задать повторяющийся узор в качестве фонового изображения. Каждый паттерн задаётся встроенным (inline) SVG-кодом, который не требует дополнительных ресурсов.

Таблица классовlink

Класс	Значение
.pattern-1	url(data:image/svg+xml;utf8,);
.pattern-2	url(data:image/svg+xml;utf8,);
.pattern-3	url(data:image/svg+xml;utf8,);
.pattern-4	url(data:image/svg+xml;utf8,);
.pattern-5	url(data:image/svg+xml;utf8,);
.pattern-6	url(data:image/svg+xml;utf8,);
.pattern-7	url(data:image/svg+xml;utf8,);
.pattern-8	url(data:image/svg+xml;utf8,);
.pattern-9	url(data:image/svg+xml;utf8,);

Описаниеlink

Адаптивный модификатор pattern-{1...9} задаёт определённый встроенный узор (паттерн) в качестве фонового изображения. Это позволяет быстро добавлять декоративные узоры для фона элемента без необходимости подключать внешние изображения.

pattern-1, pattern-2, pattern-3 и т.д. — каждый из этих модификаторов устанавливает свой уникальный встроенный SVG-паттерн.

Синтаксисlink

Использование: {контрольная точка}:{модификатор} или {модификатор}

Контрольная точка (необязательный параметр): Применяет модификатор начиная с определенной ширины экрана (sm, md, lg, xl).
Модификатор (обязательный параметр): один из классов pattern-{1...9}, выбирающих конкретный паттерн.

Пример использованияlink

<!-- Установить паттерн №1 в качестве фона -->
<div class="pattern-1 w-full h-e8 bg-repeat">
    <!-- Ваш контент -->
</div>

<!-- Установить паттерн №2 при ширине экрана md и более -->
<div class="md:pattern-2 w-full h-e8 bg-repeat">
    <!-- Ваш контент -->
</div>

Адаптивностьlink

Для изменения паттерна фона, начиная с определенного размера экрана, добавьте префикс контрольной точки. Например, md:pattern-2 применит паттерн №2 только на экранах от размера Medium и больше.