Strange issue with blade showing after the css

Hello all,

I am having a weird issue. I have a grid in tailwind like this within a blade template:

<div class="mt-4 md:m-0 grid sm:grid-cols-1 md:grid-cols-{{$count}} lg:grid-cols-{{$count}} xl:grid-cols-{{$count}} gap-2 content-evenly">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

When I read the dom after the dom is loaded, I am getting the correct values as:

<div class="mt-4 md:m-0 grid sm:grid-cols-1 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 gap-2 content-evenly">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

But in my front end only the grid sm:grid-cols-1 works. I can only see 1 column.

Now here is the weird thing, if I replace by hand all the {{$count}} to "5", only then I will get the correct grid count.

From what I understand, the CSS loads before the PHP code and can only read the first grid sm:grid-cols-1

Any idea how to go aorund this please?

Thank you