Skip to content

The modal won't display with Astro 5.3 & Tailwind 4.0.7 #573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
dreambulare opened this issue Feb 20, 2025 · 1 comment
Closed

The modal won't display with Astro 5.3 & Tailwind 4.0.7 #573

dreambulare opened this issue Feb 20, 2025 · 1 comment

Comments

@dreambulare
Copy link

Summary

The modal won't display with Astro 5.3 & Tailwind 4.0.7

Steps to Reproduce

With following versions of dependencies, the modal won't show after click on the show button, but the overlay shows correctly

    "@tailwindcss/vite": "^4.0.7",
    "astro": "^5.3.0",
    "preline": "^2.7.0",
    "tailwindcss": "^4.0.7"

Tried to manually set opacity from of the modal div to 100, the modal can be shown correctly, pressuming the open method did not set the opacity of the modal div right.

Taking the example code from the website as an example:

---
import "../app.css";
// code inside app.css
// @import "tailwindcss";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>
      <button
        type="button"
        class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
        aria-haspopup="dialog"
        aria-expanded="false"
        aria-controls="hs-basic-modal"
        data-hs-overlay="#hs-basic-modal"
      >
        Open modal
      </button>

      <div
        id="hs-basic-modal"
        class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-0 start-0 z-[80] opacity-0 overflow-x-hidden transition-all overflow-y-auto pointer-events-none"
        role="dialog"
        tabindex="-1"
        aria-labelledby="hs-basic-modal-label"
      >
        <div class="sm:max-w-lg sm:w-full m-3 sm:mx-auto">
          <div
            class="flex flex-col bg-white border shadow-sm rounded-xl pointer-events-auto dark:bg-neutral-800 dark:border-neutral-700 dark:shadow-neutral-700/70"
          >
            <div
              class="flex justify-between items-center py-3 px-4 border-b dark:border-neutral-700"
            >
              <h3
                id="hs-basic-modal-label"
                class="font-bold text-gray-800 dark:text-white"
              >
                Modal title
              </h3>
              <button
                type="button"
                class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600"
                aria-label="Close"
                data-hs-overlay="#hs-basic-modal"
              >
                <span class="sr-only">Close</span>
                <svg
                  class="shrink-0 size-4"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                >
                  <path d="M18 6 6 18"></path>
                  <path d="m6 6 12 12"></path>
                </svg>
              </button>
            </div>
            <div class="p-4 overflow-y-auto">
              <p class="mt-1 text-gray-800 dark:text-neutral-400">
                This is a wider card with supporting text below as a natural
                lead-in to additional content.
              </p>
            </div>
            <div
              class="flex justify-end items-center gap-x-2 py-3 px-4 border-t dark:border-neutral-700"
            >
              <button
                type="button"
                class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700"
                data-hs-overlay="#hs-basic-modal"
              >
                Close
              </button>
              <button
                type="button"
                class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none"
              >
                Save changes
              </button>
            </div>
          </div>
        </div>
      </div>
    </h1>
  </body>
</html>

<script is:inline src="../../node_modules/preline/dist/preline.js"></script>

Demo Link

https://codesandbox.io/p/devbox/great-cache-ldzkgk

Expected Behavior

Expected to see modal & overlay display properly.

Actual Behavior

The modal won't display but the overlay shows properly.

Screenshots

No response
@jahaganiev
Copy link
Member

Hey @dreambulare - Tailwind v4 support is coming soon.

please refer to issue #556

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dreambulare @jahaganiev