JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" />
	<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
	integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
	crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
</head>
<body>

		<!-- THE IMPORTANT FORM: -->
	<form >
		<!-- INPUT WITHOUT BOOTSTRAP CLASSES -> Increasing the font works fine-->
	<div>
		<label>Title</label>
  	<input type="text"/>
	</div>
	<!-- TEXTAREA WITHOUT BOOTSTRAP CLASSES -> Increasing the font doesn't work -->
  <div>
  	<label >Longer Description</label>
		<textarea></textarea>
  </div>
  <!-- TEXTAREA WITH BOOTSTRAP CLASSES -> Increasing the font doesn't work -->
	<div class="form-group row">
		<label for="longerDescription" class="control-label col-sm-4">Longer Description</label>
		<div class="col">
			<textarea id="longerDescription" class="form-control" th:field="*{description}" required="required"></textarea>
		</div>
	</div>
	<!-- INPUT WITH BOOTSTRAP CLASSES -> Increasing the font works fine again -->
	<div class="form-group row">
		<label for="contact" class="control-label col-sm-4">Contact</label>
		<div class="col">
			<input type="text" id="contact" class="form-control" th:field="*{contact}" required="required"/>
		</div>
	</div>

CSS

body {
  font-size: 150%;
    }
    
input[type=text] {
  height: 100px;
  font-size: 200%;
  box-sizing: border-box;
}

textarea {
  height: 100px;
  font-size: 200%;
  box-sizing: border-box;
}