JSFiddle - React, Tailwind, and code Playground

by Alex Regan

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-breakpoint/dist/index.js"></script>

<div id="root">
  <breakpoint>
    <main slot-scope="media">
      <h1>Hello world!</h1>
      <pre v-if="media.mdUp">{{ media | json }}</pre>
      <pre v-if="media.smDown">I'm too small to see!</pre>
    </main>
  </breakpoint>
</div>

JavaScript

Vue.use(VueBreakpoint.BreakpointPlugin)

// This is the default breakpoint map a la bootstrap 4.
Vue.use(VueBreakpoint.BreakpointPlugin, {
  xsUp: { minWidth: "0px" },
  xsDown: { maxWidth: "575px" },
  xsOnly: { maxWidth: "575px" },
  smUp: { minWidth: "576px" },
  smDown: { maxWidth: "767px" },
  smOnly: { minWidth: "576px", maxWidth: "767px" },
  mdUp: { minWidth: "768px" },
  mdDown: { maxWidth: "991px" },
  mdOnly: { minWidth: "768px", maxWidth: "991px" },
  lgUp: { minWidth: "992px" },
  lgDown: { maxWidth: "1199px" },
  lgOnly: { minWidth: "992px", maxWidth: "1199px" },
  xlUp: { minWidth: "1200px" },
})

window.app = new Vue({
  el: "#root",
  filters: {
    json(x) {
      return JSON.stringify(x, null, 2)
    }
  }
})