Как повесить active class?

Question

[Alex]

Добрый день, подскажите пожалуйста, как правильно повесить active class при клике используя vue js + tailwind css. Я попробовал вариант как оф. сайте но не могу понять как потом с помощью tailwind css добавить стили. Заранее спасибо.
<div :class="{ active: isActive }"></div>

data() {
  return {
    isActive: true,
  }
}

Answer 1

[zxf]

<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,
  }
}

Comments

[Alex]

zxf, спасибо большое за ответ. Еще маленький вопрос, а если цикл например v-for проходится как повесить active class, с помощью index ? Заранее спасибо.

[zxf]

Alex, имеете в виду, повестит класс в зависимости от значения индекса? Повесить, например, класс только на нечетные элементы?
Если да, тогда:

<div v-for=“(element, index) in elements” :class="{ ‘class’: index % 2 }"></div>

[Alex]

zxf, пример у меня массивы водится через цикл v-for и при клике на item сделать его active и например поменять цвет, через tailwind css.

[zxf]

Alex, https://codesandbox.io/embed/quizzical-sun-bt61ym?...

Исходник в App.vue
При клике на квадраты они меняют цвет

[Alex]

zxf, спасибо вам большое ! Вариант хороший, а как на tailwind вешать стили на класс active, здесь пример с обычным css3

[zxf]

Alex,

Классы tailwind доступны глобально, поэтому в шаблоне Vue вам надо думать о них, как о видимых классах внутри шаблона.

Если tailwind корректно подключен, то его можно использовать в шаблоне. В чем сложность? Просто писать название класса и он будет работать.