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="mainBox.background">
    {{ mainBox.background }}
  </div>
  <div class="fs">
    <div class="ttl">font size</div>
    <input type="range" v-model="fontSize" min="10">
    {{ fontSize }}
  </div>
  <div class="br">
    <div class="ttl">border radius</div>
    <input type="range" v-model="boxRadius" max="50">
    {{ boxRadius }}
  </div>
  <div class="boxes">
    <div
      v-for="n in elements"
      :class="n.classes"
      :style="n.styles"
    >{{ n.text }}</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: () => ({
    fontSize: 24,
    boxRadius: 0,
    mainBox: {
      background: '#000000',
    },
  }),
  computed: {
    elements() {
      return [
        [ 'main', 'main', this.mainBox ],
        [ 'blue', '4' ],
        [ 'red', '0' ],
      ].map(([ name, text, styles = {} ]) => ({
        classes: [ 'box', `box--${name}` ],
        text,
        styles: { ...styles, ...this.boxStyles },
      }));
    },
    cssText() {
      return this.elements.map(({ classes, styles }) => [
        classes.map(n => '.' + n),
        '{',
        Object
          .entries(styles)
          .map(n => `${n[0].replace(/(?<=[a-z])[A-Z]/g, m => '-' + m.toLowerCase())}: ${n[1]};`),
        '}',
      ]).flat(Infinity).join('');
    },
    boxStyles() {
      return {
        fontSize: this.fontSize + 'px',
        borderRadius: this.boxRadius + 'px',
      };
    },
  },
});