Адаптив во Vue3 использую tailwindcss

Question

Адаптив во Vue3 использую tailwindcss

Рейтинг: 0Ответов: 1Опубликовано: 06.05.2023

<div
    class="justify-between"
    :style="[ mainStore.getCollapsed ? 'width: 93vw' : 'width: 83vw']"
  >
<div/>

Всем привет,такой вопрос. Необходимо сделать адаптив страницы. В проекте используется библиотека tailwindcss, проект сам на vue 3. В inline стилях прописаны ширина при открытии и закрытии страницы. Прописывал адаптив в классах, но не работает. Подскажите пожалуйста где необходимо прописать адаптив?

vue.js vue3 flexbox nuxt.js tailwindcss

Источник: Stack Overflow на русском

Answer 1

▲ 0

нужно немного переделать: сперва свойство а потом условие, пример для наглядности

const color = {
  data() {
    return {
      isActiv: true
    }
  },
  methods: {
    btnClickColor() {
      this.isActiv = !this.isActiv
    }
  }
}

Vue.createApp(color).mount('#color')

<script src="https://unpkg.com/vue@next"></script>


<div id="color">
  <p :style="{color: isActiv ? 'red' : 'green' }">Очень красивый текст</p>
  <button @click="btnClickColor">Изменить цвет</button>
</div>

Адаптив во Vue3 использую tailwindcss

Ответы