How to dynamically change class in nuxt.js with tailwind css?

@samara 

In Nuxt.js, you can dynamically change class in your components using conditional class rendering. You can achieve this by using class binding in your template and updating the variable that controls the class dynamically.

Here is an example of how you can dynamically change class in Nuxt.js using Tailwind CSS:

1. Inside your component's template, add a conditional class using the :class directive:

1
2
3
4
5

<template>
  <div :class="isActive ? 'bg-blue-500' : 'bg-red-500'">
    Dynamic class example
  </div>
</template>

1. In your component's script section, define a data property that controls the class dynamically:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleClass() {
      this.isActive = !this.isActive;
    }
  }
}

1. Optionally, you can toggle the class dynamically by calling the toggleClass method when needed (e.g. when a button is clicked):

1
2
3
4
5
6
7

<template>
  <div 
    :class="isActive ? 'bg-blue-500' : 'bg-red-500'"
    @click="toggleClass">
    Dynamic class example
  </div>
</template>

By following these steps, you can dynamically change the class in Nuxt.js components using Tailwind CSS. You can adjust the condition and classes as needed to fit your specific requirements.