How to pass a reactive font size to a UTextarea ?

[mathieunicolas]

Description

Hello there,

With const fsize = ref(1) :

The following code gives a textarea with a responsive size :

<textarea :style="'font-size: '+fsize+'rem; line-height: '+fsize+'rem;'" />

The following code does not :

<UTextarea :style="'font-size: '+fsize+'rem; line-height: '+fsize+'rem;'" />

I don't understand why, and I don't understand how I should pass this reactive prop to set a reactive font size in UTextarea.

Thanks for you help !

[benjamincanac]

Why don't you use Tailwind CSS and the ui prop to achieve that? Font size and line height is already defined on the Textarea: https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config.ts#L380C3-L387C5

[mathieunicolas]

That's because I tried at first with the most big size, and didn't notice any change, thanks to your answer I see the "xl" size is actually the "base" font size. I tried with :ui, then :class (tailwind), then :style and my example was my last try.

I can't use the input presets because it doesn't cover my needs. Still, the following code don't work :

<template>
      <UButtonGroup>
      <UButton @click="fsize++" label="+" />
      <UButton @click="fsize--" label="-" />
      </UButtonGroup>
      <UTextarea class="font-mono" :class="'text-'+fsizee[fsize]" ref="editor" id="editor" v-model="text" @keyup.enter="newline" autoresize />
</template>

<script setup>
const fsize = ref(1)
const fsizee = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl']
</script>

This line neither :

      <UTextarea class="font-mono" :ui="{ size: 'text-'+fsizee[fsize] }" ref="editor" id="editor" v-model="text" @keyup.enter="newline" autoresize />

Should I update the presets ?? I only need this resizing for one textarea.

[mathieunicolas]

Ok I finally understood what was wrong, I think I spent too much time on this yesterday and started making stupid things. After re-reading the docs and the examples, I :

• added few presets in app.config.ts with the t prefix so it won't mess up the other components
• added :size="..." in my UTextarea call
• updated the name of the size presets so it's now ['txs', 'tsm', ...]

And now it works. Thanks for taking the time to answer, and sorry for the stupid question !