Tailwind 4 doesn't detect classes in parenthesis

[Munksgaard]

What version of Tailwind CSS are you using?

v4.1.7

What's the issue?

In elixir, a list of strings can be generated by writing e.g. ~W(bg-red-500 text-blue-500). This is equivalent to writing ["bg-red-500", "text-blue-500"]. An example of this behavior to define a list of predefined classes to go into HTML components can be seen here. Had those lines been written using the ["bg-red-500", "text-blue-500"] or even ~W( bg-red-500 text-blue-500 ), the tailwind tool would've picked up the styles correctly. The first style (~W(bg-red-500 text-blue-500)) also used to work correctly with Tailwind 3, but after upgrading to Tailwind 4, it doesn't seem to work anymore.

In short, after upgrading to Tailwind 4, it seems like the tokenizer that searches for tailwind classes includes parenthesis as part of a token, meaning that writing ~W(bg-red-500 text-blue-500) in my source code means that Tailwind will no longer pick up those classes. This behavior has changed from Tailwind 3.

Was this change on purpose? I don't see any mention in the release notes or upgrade-guide about the tokenization-process changing, but perhaps I'm missing something.

See also these issues: maxmarcon/live_select#118, phoenixframework/phoenix#6331

[thecrypticace]

Yeah the tokenization changed completely from v3 -> v4. The entire engine is no longer based on regexes and was implemented in native code for perf reasons. It allows us to support things that were not possible before. Additionally, parens can be used in classes in v4 — for example you can write text-(--foo) instead of text-[var(--foo)] so they're handled differently than they were previously.

We might be able to do some kind of special case here though. I'll look into it.

[thecrypticace]

This will be fixed in the next release 👍

You should be able to test this in our insiders build before then (give it like 30m to build + publish). Though, we don't publish standalone CLI builds for our insiders builds so you'll have to install stuff through NPM:

npm install tailwindcss@insiders @tailwindcss/cli@insiders

[Munksgaard]

Amazing! Thanks for the impressively quick turnaround 🥇