left and bottom values are not being recognised when using absolute position in Phoenix Liveview html template

Question

I am trying to build a simple car race game using Phoenix Liveview / tailwind CSS and I have the below html template function cars() called by the render() function to display 6 cars at their respective initial positions. For every car, the position_class() function returns a string like "absolute left-[20px] bottom-[130px]" for example to position the car image.

defp cars(assigns) do
    ~H"""
    <div class="cars">
      <%= for car <- @cars do %>
       <img src={"/images/#{car.image}"} class={position_class(car)}/>
      <% end %>
    </div>
    """
  end

defp position_class(%Car{
         x: x,
         y: y
       }) do
    "absolute left-[#{x}px] bottom-[#{y}px]"
  end

@cars list looks like this:

[
    %Car{
      x: 20,
      y: 0,
      image: "white.png",
      car_id: 1
    },
    %Car{
      x: 20,
      y: 130,
      image: "blue-red.png",
      car_id: 2
    },
    %Car{
      x: 120,
      y: 0,
      image: "white.png",
      car_id: 3
    },
    %Car{
      x: 120,
      y: 130,
      image: "red.png",
      car_id: 4
    },
    %Car{
      x: 220,
      y: 0,
      image: "blue.png",
      car_id: 5
    },
    %Car{
      x: 220,
      y: 130,
      image: "yellow.png",
      car_id: 6
    }
  ]

The issue is that irrespective of left and bottom values returned by position_class() all the cars are positioned at the origin with respect to their parent div (which has position "relative"). When I inspect the html, the left and bottom values don't appear in the "computed" window. Only "position: absolute" appears. Looks like I am doing something wrong.

I was expecting 6 car images appearing at the following positions:

car1:

position: absolute
bottom: 0px,
left: 20px

car2:

position: absolute
bottom: 130px,
left: 20px

car3:

position: absolute
bottom: 0px,
left: 120px

car4:

position: absolute
bottom: 130px,
left: 120px

car5:

position: absolute
bottom: 0px,
left: 220px

car6:

position: absolute
bottom: 130px,
left: 220px

Here is the strange thing about this problem: When I hard code a value like "absolute left-[220px] bottom-[130px]" for example in the position_class() function, all the cars are appearing at this one position as expected and when I revert back to the earlier code "absolute left-[#{x_position}px] bottom-[#{y_position}px]", car5 which is expected to have position left: 220px is appearing at the expected left position but with wrong bottom position and the cars car2, car4 which are expected to have position bottom: 130px are appearing at the expected bottom position but with wrong left positions. And car6 appears exactly at the expected position (left: 220px, bottom: 130px). The browser seems to somehow remember the left and bottom values I had hardcoded earlier. Is it something related to cache? Can someone kindly help. Thanks.