Як динамічно задавати класи й стилі у Vue?

Для class і style Vue має розширений синтаксис :class / :style: крім рядків, вони приймають об'єкти й масиви.

Об'єкт - клас за умовою:

<button :class="{ 'opacity-50': loading, 'bg-red-600': danger }">Видалити</button>

Ключ - клас, значення - умова. Статичний class і динамічний :class об'єднуються:

<div class="card" :class="{ 'ring-2': selected }"></div>

Масив - кілька джерел класів:

<div :class="[sizeClass, { 'font-bold': active }, isError ? 'text-red-600' : 'text-gray-900']"></div>

Обчислювана властивість - коли логіка складніша:

const badgeClass = computed(() => ({
  paid: 'bg-green-100 text-green-800',
  pending: 'bg-amber-100 text-amber-800',
  failed: 'bg-red-100 text-red-800',
})[props.status]);

Стилі - об'єкт з camelCase чи kebab-case властивостями:

<div :style="{ width: progress + '%', backgroundColor: color }"></div>
<div :style="{ '--accent': theme.accent }"></div>   <!-- CSS-змінна -->

Vue автоматично додає вендорні префікси, якщо властивість їх потребує.

На компонентах: class і style, передані компоненту, додаються до класів його кореневого елемента.

Пастки з Tailwind:

• не збирати назви класів з частин: :class="`bg-${color}-500`" - Tailwind сканує файли й генерує лише ті класи, які бачить повністю. Склеєних класів у CSS не буде. Потрібна мапа з повними назвами (як у прикладі з badgeClass);
• конфлікти класів: class="p-4" на компоненті і p-2 всередині дають обидва класи - переможе той, що пізніше в згенерованому CSS, а не той, що «ззовні». Для керованого злиття - утиліти на кшталт tailwind-merge.

Динамічні значення з даних (ширина прогрес-бару, колір користувача) краще через :style чи CSS-змінні, а не через генерацію класів.

Докладніше в документації: Прив'язка класів і стилів