Fix Tailwind JIT issue with dynamic width classes

Tailwind JIT compiler doesn't compile dynamically interpolated classes
like lg:max-w-[{{ $maxWidth }}]. Switched to inline styles with media
queries to support dynamic min/max width values.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-11-14 09:58:53 +01:00
parent e5f50c2b1f
commit 95b847191b

View file

@ -46,7 +46,8 @@ class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
x-transition:leave="ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
class="relative w-full border rounded-sm drop-shadow-sm min-w-full lg:min-w-[{{ $minWidth }}] lg:max-w-[{{ $maxWidth }}] max-h-[calc(100vh-2rem)] bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
style="max-height: calc(100vh - 2rem); @media (min-width: 1024px) { min-width: {{ $minWidth }}; max-width: {{ $maxWidth }}; }"
class="relative w-full border rounded-sm drop-shadow-sm min-w-full bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
<div class="flex items-center justify-between py-6 px-6 shrink-0">
<h3 class="text-2xl font-bold">{{ $title }}</h3>
<button @click="modalOpen=false"