Asterisk character * not working in utility name

[brandonmcconnell]

Technical Configuration

What version of Tailwind CSS are you using?
v3.4.10
What build tool (or framework if it abstracts the build tool) are you using?
Tailwind Play
What version of Node.js are you using?
N/A
What browser are you using?
Chrome v127.0.6533.120 (Official Build) (arm64)
What operating system are you using?
macOS Sonoma v14.5 (23F79)

---

Reproduction URL

https://play.tailwindcss.com/1hJWSCKURf?file=config

Describe your issue

I am making some improvements to my tailwindcss-directional-shadows plugin, and a new direction I am adding is * that will apply the shadow to all directions.

However, any way I tried to configure the utilities to support any with the name shadow-*-SIZE, it didn't work. Changing * to all resolves the issue, but I would prefer to use * here, and I am not sure why it doesn't work.

[wongjn]

You'd want to escape the asterisk character, since it has special meaning in a CSS selector: https://play.tailwindcss.com/daREawczFw?file=config.

[brandonmcconnell]

Thanks, great solution! I forgot this was a factor 😄