Повторяющиеся классы

Посмотрите на четыре кнопки «Взять» в карточках кошек. У каждой список из девяти классов, и списки должны совпадать:

<a href="#" class="mt-4 inline-block rounded-full bg-brand-500 px-5 py-2 font-semibold text-white hover:bg-brand-600">Взять Тигра</a>

Это путь Tailwind: каждый элемент сам говорит, как он выглядит, прямо в HTML. В большинстве случаев это преимущество. Вы видите, как выглядит элемент, там же, где он находится, и, меняя один элемент, не можете случайно сломать другой. Но когда элемент повторяется, вместе с ним повторяется и список его классов. Если приюту понадобятся другие кнопки, придётся одинаково изменить все четыре списка. А если пропустить один, эта кнопка будет выглядеть не так, как остальные. На нашей странице так уже случилось: кто-то поменял скругление кнопок с rounded-lg на rounded-full и пропустил одну кнопку. Присмотритесь к предпросмотру.

Что с этим можно сделать?

• Написать элемент только один раз. Настоящие сайты редко пишут вручную, карточка за карточкой. Список кошек берётся из базы данных, а карточка пишется один раз, в шаблоне или компоненте (компонент — это многоразовая часть страницы, как в JavaScript-фреймворках вроде React). Затем код повторяет её для каждой кошки. Так её классы тоже оказываются в одном месте. Именно это решение авторы Tailwind рекомендуют в первую очередь.
• Изменить все места сразу. Когда повторяющиеся элементы стоят рядом, как наши четыре кнопки, их можно просто изменить все вместе. В этом помогают редакторы кода, и этот тоже: выделите фрагмент текста и нажмите Ctrl+D (на Mac Cmd+D), и следующее место с таким же текстом тоже выделится. Каждое нажатие добавляет следующее. Всё, что вы затем напечатаете, попадёт во все выделенные места сразу.
• Дать списку классов имя. Когда ни то ни другое не подходит, Tailwind позволяет создать собственный класс из списка своих классов. Как это сделать, вы узнаете в следующем упражнении.