使用滚动内容制作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;">
                   
            

但是失败了。请看一下codepen：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 有更好的决定？

谢谢！

Answer 1

有一个类似的问题并在这里找到了解决方案：

https://tailwind-elements.com/docs/standard/components/modal/#dialog_scrollable

我意识到这个问题很老了，只是为了他人的利益而回答和链接资源。

编辑：需要深入研究他们的风格才能使其作为独立的解决方案发挥作用。这里是：

<div class="z-40 fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto"
  id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableLabel" aria-hidden="true">
  <div class="sm:h-[calc(100%-3rem)] max-w-lg my-6 mx-auto relative w-auto pointer-events-none">
    <div
      class="max-h-full overflow-hidden border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
      <div
        class="flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
        <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalScrollableLabel">
          Modal title
        </h5>
        <button type="button"
          class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
          data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="flex-auto overflow-y-auto relative p-4">
        <p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p>This content should appear at the bottom after you scroll.</p>
      </div>
      <div
        class="flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
        <button type="button"
          class="inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
          data-bs-dismiss="modal">
          Close
        </button>
        <button type="button"
          class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">
          Save changes
        </button>
      </div>
    </div>
  </div>
</div>