JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <button @click="screenSize = 'md'">
    Click
  </button>
  <div :style="setStyle(col.container)">
  
  </div>
</div>

JavaScript

new Vue({
  el: '#app',

  data () {
    return {
      screenSize: '',
    
      col: {
        container: {
						style: {
							responsive: {
								md: {
									background: `right center / contain no-repeat url(/img/2-creative-belt-IMG_2351.e1f168a8.png)`,
								},
								xs: {
									background: `right center / contain no-repeat url(/img/2-creative-belt-IMG_2351.e1f168a8.png)`,
								}
							}
						}        
        }
      }
    }
  },
  
  methods: {
		setStyle: function(item) {
      //debugger
    
			// Checks if styles are present
			if(typeof item === 'object' && Object.keys(item).indexOf('style') === -1) {
				return false;
			}
			// Checks if styles are not responsive, simply return the object
			if(typeof item.style === 'object' && Object.keys(item.style).indexOf('responsive') === -1) {
				return item.style;
			}
			// Match the media then return the object
			for(let [breakpoint, style] of Object.entries(item.style.responsive)) {
				if(typeof style === 'object' && breakpoint == this.screenSize) {
					// Matching responsive style.
					/**
						The problem lies here:
						This responsive style must be returned to the template (console.log confirms that the data is an inline style object) where it says renders the columns
					*/
					return style;
				}
			}
      
      return null
		}  
  }
})