<div :class="{ ‘pb-2’: isActive }"></div>
data() {
return {
isActive: true,
}
}
Где pb-2 это любой класс из tailwind.
Классы tailwind доступны глобально, поэтому в шаблоне Vue вам надо думать о них, как о видимых классах внутри шаблона.
В итоге все, что Вам остаётся это привязать логическую переменную к названию класса внутри шаблона.
Запись
‘pb-2’: isActive буквально означает: «повесь мне класс pb-2, ЕСЛИ переменная isActive истинная».
Можно делать и более интересные штуки, например:
<div :class="{ ‘pb-${size}’: isActive }"></div>
props: {
size: {
type: string,
default: 4,
},
data() {
return {
isActive: true,
}
}