title: how to change font-size of "v-text-field" in vuetify?
body: <p>I am working in a &quot;Nuxt&quot; app and using &quot;Vuetify&quot; as my framework. this is the code of one of my components:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
  
  &lt;v-text-field
    color="var(--color4)"
    class="px-15"
  &gt;
  
    &lt;template v-slot:label&gt;
  
        &lt;span class="labelClass"&gt;
            please enter your name
        &lt;/span&gt;
  
    &lt;/template&gt;
  
  &lt;/v-text-field&gt;
  
  &lt;/template&gt;
  
  &lt;style scoped&gt;
  .labelClass {
    font-size: 1.2rem;
  }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I wanted to increase the font-size of label in input. according to <a href="https://vuetifyjs.com/en/components/text-fields/" rel="nofollow noreferrer">Vuetify ducomentation</a> we must use &quot;slots&quot; for doing that. so I added a new template and &quot;slot&quot; to that. Then I used <strong>labelClass</strong> for the <strong>span</strong> inside that to control the font-size. the font-size changed but the problem here is that if I increase  font-size (for example to 1.8rem), some parts of the text of that disappears:</p>
  <p><a href="https://i.stack.imgur.com/hdlF8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hdlF8.jpg" alt="enter image description here" /></a></p>
  <p>And it becomes worse, if the font-size increases. I also read <a href="https://stackoverflow.com/questions/46967557/how-do-i-change-font-size-in-vuetify-component">this question</a>, but it did not help me. I also tried to set &quot;height&quot; prop for <strong>v-text-field</strong> and some classes like <strong>v-text-field__slot</strong> but they did not work for me.</p>