Задача

Нужно создать кнопку с текстом по центру а также добавить иконку (слева или справа), которая не будет сдвигать текст из-за своего присутствия.

Мы используем следующую разметку...

<button>
	<span>🎁</span>
	Открыть
</button>

И хотим, чтобы результат был таким:

Position Absolute (традиционный подход)

Если с текстом по центру все понятно, ведь это неотъемлемая часть кнопки и его можно отцентрировать через стиль самой кнопки...

<button class="text-center">
	<span>🎁</span>
	Открыть
</button>

..., то с 🎁 сложнее. Помимо того, что 🎁 должен существовать внутри кнопки, он также не должен влиять на позиционирование ее текста. Для решения этой задачи существует следующий традиционный подход:

1. Сделать кнопку relative контейнером.
2. Желаемому элементу добавить absolute позицию.
3. Наконец, сдвинуть элемент в нужное место с помощью свойств top и left, а также translate-x и translate-y.

Выглядеть это будет следующим образом:

<button class="relative text-center">
	<span class="absolute left-4 top-1/2 -translate-y-1/2">🎁</span>
	Открыть
</button>

Так мы получаем желаемый результат:

Но можно проще.

Grid Template Areas Stack

В первую очередь, необходимо сделать и текст кнопки и 🎁 самостоятельными элементами:

<button>
	<span>🎁</span>
	<span>Открыть</span>
</button>

Далее необходимо дать кнопке класс grid а также для свойства grid-template-areas необходимо указать 'stack'. Так как grid-template-areas является нестандартным для Tailwind классом, его можно добавить как произвольное свойство:

<button class="grid [grid-template-areas:'stack']">
	<span>🎁</span>
	<span>Открыть</span>
</button>

И так как элементы внутри кнопки теперь самостоятельные, мы можем дать им класс [grid-area:stack], который поместит их в ту самую единственную клетку:

<button class="grid [grid-template-areas:'stack']">
	<span class="[grid-area:stack]">🎁</span>
	<span class="[grid-area:stack]">Открыть</span>
</button>

Теперь разукрасим кнопку...

<button class="grid h-10 w-full rounded-md bg-gradient-to-r from-amber-400 to-orange-500 px-4 font-medium text-white shadow-xl shadow-orange-500/50 [grid-template-areas:'stack']">
	<span class="[grid-area:stack]">🎁</span>
	<span class="[grid-area:stack]">Открыть</span>
</button>

...и посмотрим что получилось:

Дело за малым. Каждому из элементов нужно объяснить, где они должны находиться. Так как это grid элементы, то нужно использовать соответствующие классы self-{...}, justify-self-{...} и даже place-self-{...}:

<button class="grid h-10 w-full rounded-md bg-gradient-to-r from-amber-400 to-orange-500 px-4 font-medium text-white shadow-xl shadow-orange-500/50 [grid-template-areas:'stack']">
	<span class="self-center justify-self-start [grid-area:stack]">🎁</span>
	<span class="self-center [grid-area:stack]">Открыть</span>
</button>

Готово!

Почему Grid Template Areas Stack лучше Position Absolute?

• Этот подход позволяет не применять свойство translate к элементу, когда нам нужно отцентрировать элемент (а это почти всегда). Если мы захотим использовать translate для анимации в будущем, то оно будет свободно и анимания не сломает позицию элемента.
• Банально этот синтаксис может показаться вам более приятным и понятным.

Заключение

Grid Template Areas Stack это еще один способ убрать элемент из "общей раскладки" и указать ему индивидуальную позицию. Этот занятный способ можно использовать как альтернативу Position Absolute.

Демо

Посмотрите на сегодняшнюю подопытную кнопку своими глазами на Tailwind Play, добавьте в нее новый элемент, опробуйте Grid Template Areas Stack, пока прочитанное в свежей памяти.