制作带有滚动内容的 tailwindcss 模式对话框？

Question

基于 tailwindcss 2 模态示例https://alpinetoolbox.com/examples/modal 我使用 header/footer/ 内容制作模态对话框，其中包含许多行。我尝试用滚动条设置内容，例如

<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>