Extractor issues in Livewire Flux

[RobinMalfait]

@RobinMalfait hey we are having an issue with Livewire Flux since Tailwind v4.0.10 and I suspect it might be related to this PR. I tried compiling Tailwind locally to see if I could bisect exactly what PR/ commit is causing it, but I'm not smart enough to get it all running in a local repo 😆 so this PR is my best guess at what's causing the issue.

The problem we are having is we have a blade component for the sidebar <flux:sidebar /> and it looks something like this (simplified)

@php
if ($sidebarIsStashable) {
    $attributes = $attributes->merge([
        'x-init' => '$el.classList.add(\'-translate-x-full\'); $el.classList.add(\'transition-transform\')',
    ]);
}
@endphp

<div x-data {{ $attributes->class('border-r w-64 p-4 min-h-dvh max-h-dvh top-0 fixed left-0') }}>
    {{ $slot }}
</div>

Since the changes in Tailwind v4.0.10, the styles -translate-x-full and transition-transform which are inside the conditionally added x-init are not being compiled by Tailwind and our sidebar is not being hidden.

If I add those classes in another file though (or somewhere else in this file), they get compiled correctly and our sidebar is being hidden as expected.

I also experimented removing the backslashes from before the single quotes and everything works and compiles as expected.

'x-init' => "\$el.classList.add('-translate-x-full'); \$el.classList.add('transition-transform')",

Would you have any thoughts as to what might be causing that? It's causing issues because the new Laravel Livewire starter kit is using Flux and people's sidebars aren't hiding 😅

Thanks in advance!

Originally posted by @joshhanley in #16306 (comment)

[joshhanley]

Thanks @RobinMalfait! Let me know if you need any more information or want me to test anything. Happy to help as best as I can 🙂

[RobinMalfait]

Alright this should be fixed by #17031 and will be available in the next release. Going to prepare a new release as we speak. /cc @joshhanley

[joshhanley]

@RobinMalfait legend! Thanks so much for that. Can confirm, pulled down Tailwind v4.0.12 and the Flux sidebar is happy. Thanks again for the quick fix!