JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <div class="fs">
    <div class="ttl">main box bg</div>
    <input type="color" v-model="styles.mainBox.background">
    {{ styles.mainBox.background }}
  </div>
  <div class="fs">
    <div class="ttl">font size</div>
    <input type="range" v-model="styles.box.fontSize" min="10">
    {{ styles.box.fontSize }}
  </div>
  <div class="br">
    <div class="ttl">border radius</div>
    <input type="range" v-model="styles.box.radius" max="50">
    {{ styles.box.radius }}
  </div>
  <div class="boxes" ref="boxes">
    <div class="box box--main" :style="[ styles.mainBox, boxStyles ]">main</div>
    <div class="box box--blue" :style="boxStyles">4</div>
    <div class="box box--red" :style="boxStyles">0</div>
  </div>
  <div class="csstext">
    <textarea :value="cssText"></textarea>
  </div>
</div>

CSS

.boxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-gap: 10px;
  }
  
  .box {
    width: 100px;
    height: 100px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  
  .box--blue {
    background: blue;
  }
  
  .box--red {
    background: red;
  }
  
  .csstext {
    margin-top: 30px;
  }
  
  textarea {
    resize: vertical;
    max-width: 315px;
    width: 100%;
    height: 100px;
  }

JavaScript

new Vue({
  el: '#app',
  data: () => ({
    styles: {
      mainBox: {
        background: '#000000',
      },
      box: {
        fontSize: 24,
        radius: 0,
      },
    },
    cssText: '',
  }),
  computed: {
    boxStyles() {
      return {
        fontSize: this.styles.box.fontSize + 'px',
        borderRadius: this.styles.box.radius + 'px',
      };
    },
  },
  watch: {
    styles: {
      deep: true,
      immediate: true,
      handler() {
        this.$nextTick(() => {
          this.cssText = Array.from(
            this.$refs.boxes.querySelectorAll('.box'),
            n => `${n.className.replace(/^| /g, '.')}{${n.getAttribute('style')}}`
          ).join('')
        });
      },
    },
  },
});