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">
  <font-size v-for="n in fontsize" :target="n"></font-size>
</div>

<div id="aaa" class="xxx">hello, world!!</div>
<div id="bbb" class="xxx">fuck the world</div>
<div id="ccc" class="xxx">fuck everything</div>

CSS

.xxx {
  color: red;
  font-family: monospace;
}

JavaScript

Vue.component('font-size', {
  props: [ 'target' ],
  template: '<div><input type="range" v-model="size"></div>',
  data: () => ({
    size: 15 + Math.random() * 25 | 0,
  }),
  watch: {
    size: {
      immediate: true,
      handler(val) {
        fontSize(this.target, val);
      },
    },
  },
});

new Vue({ 
  el: '#app',
  data: () => ({
    fontsize: Array.from(document.querySelectorAll('.xxx'), n => n.id),
  }),
});

function fontSize(id, size) {
  document.querySelector(`#${id}`).style.fontSize = `${size}px`;
}