Vue.js & Tailwind reuse component with different size - css

Question

I'm starting to play with Vue.js and Tailwindcss. I would like to create a component that scale depending on the container in which it's in. Is there a way to do that easily ?
For instance my current component is the following one :
NowPlaying.vue
<template>
<div class="flex flex-row flex-grow items-center p-24">
<TrackImage class="h-64 w-64" :image="image" :blurred="!isPlaying" />
<div class="ml-10 flex-1">
<div
class="uppercase tracking-tight font-extrabold text-5xl text-left text-white break-normal"
>
{{ name }}
</div>
<div
class="tracking-tight font-semibold text-3xl text-white text-left w-auto inline-block pb-4"
>
{{ artistsList }}
</div>
<ProgressBar />
</div>
</div>
</template>
Which is used in the following page:
<template>
<div class="h-screen bg-black">
<div class="container mx-auto h-full flex flex-col">
<NowPlaying :class="nowPlayingClasses" />
<TopTracks v-if="!isPlaying" />
</div>
</div>
</template>
My idea with nowPlayingClasses was to dynamically set classes of the NowPlaying component to resize it so I can later add a scaling animation without rebuilding my page.
But I can't get how I could do this.
I did try to use the scale css transformation, but it keeps the initial component size which is not what I want.