JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<h1 class="texto">Teste</h1>

CSS

* {
			margin: 0;
			padding: 0;
			color: #0096FF;
		}
		.texto {
			padding-top: 10%;
      position: fixed;
		}
		body {
			height: 5000px;
		}
		.t1 {
			font-size: 46px;
		}
		.t2 {
			font-size: 56px;
		}
		.t3 {
			font-size: 66px;
		}
		.t4 {
			font-size: 76px;
		}

JavaScript

$(document).ready(function(){
  			$(window).scroll(function() {
    			if ($(document).scrollTop() > 50) {
      				$(".texto").addClass("t1");
    			} else {
      				$(".texto").removeClass("t1");
    			}
    			if ($(document).scrollTop() > 100) {
    				$(".texto").removeClass("t1");
      				$(".texto").addClass("t2");
    			} else {
      				$(".texto").removeClass("t2");
    			}
    			if ($(document).scrollTop() > 150) {
    				$(".texto").removeClass("t1");
    				$(".texto").removeClass("t2");
      				$(".texto").addClass("t3");
    			} else {
      				$(".texto").removeClass("t3");
    			}
    			if ($(document).scrollTop() > 200) {
    				$(".texto").removeClass("t1");
    				$(".texto").removeClass("t2");
    				$(".texto").removeClass("t3");
      				$(".texto").addClass("t4");
    			} else {
      				$(".texto").removeClass("t4");
    			}
  			});
		});