使用Tailwind/Flowbite时Modal的top-center定位不生效问题

我使用Tailwind CSS和Flowbite实现了一个可正常运行的模态框，尝试将其设置为顶部居中（top-center）定位。按照官方文档说明，只需为模态框的根div添加data-modal-placement="top-center"属性即可实现，但添加后模态框仍保持默认居中行为，开发者控制台中可见模态框被赋予默认类justify-center items-center flex。

我的模态框代码如下：

<div id="modal-detail" tabindex="-1" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full" data-modal-placement="top-center">
    <div class="relative w-full max-w-7xl max-h-full">
        <!-- Modal content -->
        <div class="relative bg-white rounded-lg shadow dark:bg-zinc-900">
            <button type="button" id="close-detail-modal" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ml-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white">
                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
                <span class="sr-only">Close modal</span>
            </button>
            <!-- Modal header -->
            <div class="flex flex-col justify-start px-6 py-4 border-b rounded-t dark:border-gray-600">
                <h3 class="text-base font-normal text-gray-900 lg:text-lg dark:text-white">Item Detail</h3>
            </div>
            <!-- Modal body -->
            <div class="p-6 overflow-y-auto">

            </div>
        </div>
    </div>
</div>

• Flowbite版本过低：data-modal-placement属性是Flowbite v1.6.0及以上版本才支持的功能，若你使用的是更早的版本，该属性不会生效。检查当前Flowbite版本，升级至最新稳定版即可。
• 手动初始化未传入参数：如果是手动初始化模态框而非依赖Flowbite自动初始化，仅添加data属性无效，需在初始化代码中明确指定placement参数：

  const modalDetail = new Modal(document.getElementById('modal-detail'), {
      placement: 'top-center'
  });
  

• 自定义样式优先级冲突：检查你的自定义CSS或Tailwind配置，是否存在强制为模态框容器添加justify-center items-center类的情况，导致Flowbite动态生成的定位样式被覆盖。可通过开发者工具查看类优先级，移除冲突的自定义样式。
• 容器层级识别错误：确保添加data-modal-placement的div是Flowbite识别的模态框根容器，若结构嵌套错误，Flowbite无法正确读取属性并应用定位逻辑。当前代码结构无误，但若之前修改过模态框层级，需核对根容器是否正确。

内容的提问来源于stack exchange，提问作者Source Matters