使用滚动内容制作 tailwindcss 模态对话框？

Question

基于 tailwindcss 2 模态示例 https://alpinetoolbox.com/examples/modal 我用多行的页眉/页脚/内容制作模态对话框。 我尝试使用滚动条设置内容，例如

<div  style="height : calc( 100vh - 120 ) !important;" >
    <div class="modal-header flex justify-between items-center pb-2">
         ...
    </div>

     <div class="modal-content py-4 text-left px-6  overflow-y-auto "  style="height : calc( 100vh - 320 ) !important;">
                   
            

但是失败了。请看一下代码笔：https://codepen.io/sergeynilov/pen/vYyPrrE

修改块： 如果在内容块样式定义中进行设置，我会根据需要滚动。

<div class="modal-content py-4 text-left px-6"  style="overflow-y: auto; max-height: 680px;">

接下来我可以制作自定义类（现在还没有实现）并放置

overflow-y: auto; max-height: 680px

进去。对于任何设备，我都会制作具有不同高度的@media 块。 这就是我通常使用 scss 的方式。但我想 tailwindcss 有更好的决定吗？

谢谢！