svelte + tailwind drag drop example css collision

I'm trying to follow the example at https://svelte.dev/repl/e62f83d69cea4fda9e8a897f50b5a67c?version=4.2.18

<script>    // https://svelte.dev/repl/915db3b3ed704fddb7ddfb64bcbc2624?version=3.31.1    let list = [        { id: 1, value: "red" },        { id: 2, value: "green" },        { id: 3, value: "blue" },        { id: 4, value: "cyan" },    ];    let mouseYCoordinate = null; // pointer y coordinate within client    let distanceTopGrabbedVsPointer = null;    let draggingItem = null;    let draggingItemId = null;    let draggingItemIndex = null;    let hoveredItemIndex = null;    $: {        // prevents the ghost flickering at the top        if (mouseYCoordinate == null || mouseYCoordinate == 0) {            // showGhost = false;        }    }    $: {        if (            draggingItemIndex != null &&            hoveredItemIndex != null &&            draggingItemIndex != hoveredItemIndex        ) {            // swap items            [list[draggingItemIndex], list[hoveredItemIndex]] = [                list[hoveredItemIndex],                list[draggingItemIndex],            ];            // balance            draggingItemIndex = hoveredItemIndex;        }    }    let container = null;</script><div class="container" bind:this={container}>    {#if mouseYCoordinate}<div            class="item ghost"            style="top: {mouseYCoordinate + distanceTopGrabbedVsPointer}px; background: {draggingItem.value};">            {draggingItem.value}</div>    {/if}    {#each list as item, index (item)}<div            class="item {draggingItemId == item.id ? 'invisible' : ''}"            style="background: {item.value};"            draggable="true"            on:dragstart={(e) => {                mouseYCoordinate = e.clientY;                //console.log('dragstart', mouseYCoordinate);                draggingItem = item;                draggingItemIndex = index;                draggingItemId = item.id;                distanceTopGrabbedVsPointer = e.target.getBoundingClientRect().y - e.clientY;            }}            on:drag={(e) => {                mouseYCoordinate = e.clientY;                //console.log('drag', mouseYCoordinate);            }}            on:dragover={(e) => {                hoveredItemIndex = index;            }}            on:dragend={(e) => {                //console.log('dragend', mouseYCoordinate);                //console.log('\n');                // mouseYCoordinate = e.clientY;                draggingItemId = null; // makes item visible                hoveredItemIndex = null; // prevents instant swap            }}>            {item.value}</div>    {/each}</div><!-- {draggingItemIndex}{hoveredItemIndex}<br />mouseYCoordinate:{mouseYCoordinate}distanceTopGrabbedVsPointer:{distanceTopGrabbedVsPointer}<br />{showGhost}<br /> -->{JSON.stringify(list)}<style>    .container {        background: yellow;        padding: 10px;    }    .item {        width: 300px;        background: white;        padding: 10px;        margin-bottom: 10px;        cursor: grab;    }    .ghost {        margin-bottom: 10px;        pointer-events: none;        z-index: 99;        position: absolute;        top: 0;        left: 10;    }    .invisible {        opacity: 0;    }</style>

And I have tailwind included in my project like this

@tailwind base;@tailwind components;@tailwind utilities;

But example only works if I disable the tailwind include, I can't figure out which default tailwind values causes example to not work.

I tried to check the dom class differences with developer tools without any successalso tried to use !important on some css options