this code displays skeleton text loaders, for some reason it doesn't display anything in my next.js tailwind app, but i tried it with a vanilla js app and it works fine. is there any reason why it's not be showing anything?

<div role="status" class="max-w-sm animate-pulse"> <div class="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div> <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px] mb-2.5"></div> <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-2.5"></div> <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[330px] mb-2.5"></div> <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[300px] mb-2.5"></div> <div class="h-2 bg-gray-200 rounded-full dark:bg-gray-700 max-w-[360px]"></div> <span class="sr-only">Loading...</span> </div>