Всем привет. Вопрос по tailwind. Почему не работает truncate внутри

flexbox?
<div class="main-table overflow-y-auto overflow-x-auto">
<div class="flex h-10">
{#each characteristics as characteristic}
<div class="flex h-full items-center gap-2 pl-2 w-20">
<div style="min-width: 0;" class="flex-grow truncate whitespace-nowrap text-left">{characteristic.title}</div>
{#if characteristic.sort == 1 && sort == 0 }
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><line x1="12" y1="19" x2="12" y2="5" /><polyline
points="5 12 12 5 19 12"
/></svg
>
{:else if characteristic.sort == 1 && sort == 1}
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><line x1="12" y1="5" x2="12" y2="19" /><polyline
points="19 12 12 19 5 12"
/></svg
>
<!-- {:else if !characteristic.sort || characteristic.sort == 0}
<div style="width: 20px" /> -->
{/if}

<div class="draggable-vertical-separator" />
</div>
{/each}
</div>
</div>
Делаю таблицу на html, пока только заголовок. Остальные классы tailwind работают.
Не фронтендер, так что верстку не особо знаю.

<div class="main-table overflow-y-auto overflow-x-auto"> <div class="flex h-10"> {#each characteristics as characteristic} <div class="flex h-full items-center gap-2 pl-2 w-20"> <div class="flex-shrink-0 max-w-xs truncate whitespace-nowrap text-left"> {characteristic.title} </div> <!-- Остальной код --> </div> {/each} </div> </div>

наверное потому, что в tailwind нет встроенного класса truncate .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }