Tailwind elements aren't being interactive.

[real lichen]

Like if I use el-dialogue, it doesn't work

[hidden granite]

Hi @real lichen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It sounds like you’re expecting interactive behavior from UI components just by using Tailwind classes. Tailwind itself is only CSS; interactive components (dialogs, menus, etc.) need JavaScript. In Astro:

• Astro components are HTML-only by default. Add a script tag for interactivity, or use a framework component hydrated with a client directive. Otherwise, you’ll see static HTML with no behavior (Components; Common gotchas → My component is not interactive).
• If you’re using a framework component (e.g., React/Vue dialog), you must add a client:* directive to hydrate it on the client; otherwise it renders static HTML only (Using framework components; Common gotchas).

Quick checks:

• If using plain Astro + Tailwind: add a script to wire up behavior (e.g., open/close) like in the tutorial’s examples that add click handlers via a <script> tag (Write your first script tag; Add client-side interactivity).
• If using a framework dialog component: ensure you installed the framework integration and hydrate it with client:load/client:visible/etc. (Front-end frameworks; Common gotchas, My component is not interactive).
• Confirm Tailwind is actually loaded (Tailwind 4 via @tailwindcss/vite and importing @import "tailwindcss" in your CSS that’s used by the page) (Tailwind).

If you share how you’re using “el-dialogue” (which library, and code snippet), I can point to the exact hydration or script you need.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: