Markdown class directive syntax not supported

[PhotonQuantum]

What version of Tailwind CSS are you using?

v4.1.7

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

N/A

What version of Node.js are you using?

v22.14.0

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://github.com/PhotonQuantum/tailwind-mdx-repro

pnpx @tailwindcss/cli -i global.css -o output.css

Describe your issue

Class names in markdown generic directives (e.g. :span[Some Text]{.text-gray-500}) are not extracted. This proposal is adopted by plugins like https://github.com/remarkjs/remark-directive.

[mobeeinternational]

Hey any news concerning this issue? We have the exact same problem

[mobeeinternational]

This pull request was supposed to fix in the v3 version, seems like a huge regression in v4: #8569

[PhotonQuantum]

I wrote a simple script to work this around as a temporary solution.

https://github.com/PhotonQuantum/landingpage/blob/master/scripts/generate-mdx-classes.ts

Check the extractClassesFromMDX function.

[thecrypticace]

This will work in the next release 👍