Which @angular/* package(s) are the source of the bug?

compiler

Is this a regression?

No

Description

Hello, new style guide recommends class binding over ngClass but it seems it works only for simple class names.
this is example from doc:

<!-- PREFER -->
<div [class.admin]="isAdmin" [class.dense]="density === 'high'">
<!-- AVOID -->
<div [ngClass]="{admin: isAdmin, dense: density === 'high'}">

but if we try to use class names like text-primary/80, data-[size='large']:p-8 it gives syntax error.

<!-- Does not work -->
<div [class.text-primary/80]="isAdmin" [class.data-[size='large']:p-8]="density === 'high'">
<!--  Works -->
<span [class]="{ 'text-green-500/80': true }"> tag </span>

I think style guide should be updated with more examples,
also we could use object like syntax with class binding , but is it recommended?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

Please provide the environment you discovered this bug in (run ng version)

Anything else?

No response