Why doesn't dynamic Tailwind class override static class in my element?

I would like the col-span-1 override col-span-2 however I'm trying to apply Tailwind CSS classes dynamically using a variable in my Svelte component.

Here's the code:

<script>  const hostClass = 'col-span-1';</script><div class="col-span-2 {hostClass}">Test</div>

I expected col-span-1 from hostClass to override the static col-span-2 class, but it doesn't seem to work — the element keeps the col-span-2 style.

Is there a way to make col-span-1 override col-span-2?