Source classes are not detected correctly when specified as `data-loading="addClass(opacity-50)"`

[gremo]

What version of Tailwind CSS are you using?

v4.1.18

What build tool (or framework if it abstracts the build tool) are you using?

https://github.com/SymfonyCasts/tailwind-bundle

What version of Node.js are you using?

N/A

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

N/A

Describe your issue

In Symfony live components, usually one defines the data-loading attribute with the addClass directive, like this:

<div data-loading="addClass(opacity-50)">
  <!-- -->
</div>

The source analysis mechanism for extracting CSS classes fails in this case, and the opacity-50 class is not added to the output.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

_{You can configure auto-planning by selecting labels in the issue_enrichment configuration.}

🔗 Similar Issues

Related Issues

• @source detection not working in a web components monorepo #18186
• Markdown class directive syntax not supported #18071
• Modifiers do not work with static classes #18145
• Tailwind 4.0.10 breaks class extraction from Maud templates in some contexts #18984

👤 Suggested Assignees

• taylorfsteele
• PhotonQuantum
• simjnd
• Princesseuh

---

🧪 Issue enrichment is currently in open beta.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[thecrypticace]

I'd be concerned that trying to scan addClass(opacity-50) and extract opacity-50 might cause complications when classes themselves contain (…) (e.g. text-(--my-prop)).

Looking further at that syntax from Symfony Live Components we'd have to also know to treat | as a boundary character and not something that would be an invalid part of a utility name and thus shouldn't try matching again until we see a space, quote, or something like that.

Trying to shoehorn this into the general HTML parser too might be a bad idea. In HTML model(user.email)|delay|addClass(opacity-50) is a valid class name (just have to escape the selector correctly but it totally works: https://play.tailwindcss.com/pL0PMRtfo3?file=css) and we'd need a way to know when it's intended to be one and when it might not be and we can look "inside" the individual pieces.

We could perhaps do something for .twig files only if that's enough of a signal?

Will have to think on this one.

aside: I'm a bit surprised the syntax is addClass(opacity-50) and not addClass('opacity-50') (which would also "just work") 🤷‍♂️

[sanwalsulehri]

what if i can handle this

[gremo]

Hi @thecrypticace thanks for the quick feedback and sorry for the delay in replying, I’ve been very busy over the past few weeks.

Are there any updates on this?

In any case, I can say with certainty that this system worked in previous versions of Tailwind (e.g. v3), because I’ve been using Symfony Live Components since they were released and I’ve always used the addClass(opacity-50) notation.

I’ve checked, and adding quotes like data-loading="addClass('opacity-50')" does not help, because the class is added literally as 'opacity-50' (including the quotes) and therefore does not work.

Of course, I can always set a class that I’m sure exists somewhere in the source, or add it to a whitelist, even though that doesn’t seem like a very elegant solution to me...

[wongjn]

Yea, the class scanning logic changed from v3 to v4, so some things like this experience some regression or change in behavior beteween versions.

Is it valid syntax to add spaces around the class like addClass( opacity-50 )? This could be a possible workaround until the underlying detection logic gets fixed.

[RobinMalfait]

@gremo is this syntax only used in .twig files or also in other files? If it's only used there, then we can special case it for twig files.

[gremo]

@wongjn

Good catch! It seems to work just fine adding spaces, even with multiple classes:

@RobinMalfait

To the best of my knowledge, that syntax is related to LiveComponents (which are derived from Twig components), so yes, they are used in Twig files (reference).

Moreover, as far as I know, the required extension is indeed .twig (otherwise they would not be considered Twig templates).

Finally, since Symfony 5.0, it is no longer possible to use PHP templates. Twig components may be still supported in Symfony 5.4, but I believe with reasonable certainty that using PHP templates with Symfony components is either impossible or extremely rare.

[mvanhorn]

I've submitted a fix for this in PR #19775. Adds parentheses as candidate boundary characters in the Rust extractor, so class names inside addClass(opacity-50) patterns are now extracted.