JSFiddle - React, Tailwind, and code Playground

by Bill Criswell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.min.js"></script>
<div id="app">
  <pre>{{ $data | json }}</pre>
  <div v-if="displayIsLarge">
    Large
  </div>
  
  <div v-if="displayIsSmall">
    Small
  </div>
</div>

JavaScript

new Vue({
      el: '#app',
      data: {
        displayIsLarge: false,
        displayIsSmall: true
      },
      ready: function () {
        var self = this;
        enquire.register("screen and (min-width: 400px)", {
            match: function () {
                self.displayIsLarge = true;
                self.displayIsSmall = false;
            },
            unmatch: function () {
                self.displayIsLarge = false;
                self.displayIsSmall = true;
            }
        })
      }
    })