Tailwind 4 doesn't detect classes from live_select

[Munksgaard]

LiveSelect and LiveView versions

LiveSelect 1.6.0, LiveView 1.0.12

Describe the bug

The classes in e.g. lib/live_select/component.ex are not being detected by Tailwind.

Expected behavior

Running tailwindcss -i assets/css/app.css | grep bg-gray-600 should return the bg-gray-600 class, since it is used in component.ex.

Actual behavior

bg-gray-600 is not detected.

If I change the component.ex file from

      active_option: ~W(text-white bg-gray-600),

to

      active_option: ["text-white", "bg-gray-600"],

the class is picked up as expected. I suspect something changed with tailwind 4 such that it only looks inside strings (double-quotes) and it doesn't know that ~W signifies a string.

[maxmarcon]

interesting. Wouldn't this be a problem for the entire Phoenix/LiveView ecosystem?

[Munksgaard]

Yep, you're right. I'm going to report it in the Phoenix repo.

[Munksgaard]

I've reported the issue here: phoenixframework/phoenix#6331

[Munksgaard]

I think the most straightforward fix is to include a space at the beginning and end, e.g. ~W( text-white bg-gray-600 ) or use another start-and-end pair, such as double quotes.

[Munksgaard]

The next release of tailwind will include a fix for this issue. tailwindlabs/tailwindcss#18431

[maxmarcon]

Thanks for reporting and following up on this one!