before:content-['>'] doesn't work

What version of Tailwind CSS are you using?

2.2.7

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

"next": "11.1.0" and web playground

What version of Node.js are you using?

v14.16.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/EMk3HoEN4O

Describe your issue

Hey Tailwind team!

I’m having an issue about content-utilities in JIT mode.

According to that document, we can write content value via content-* utilities, and it seems like all of them work well.

But I found a bug unexpectedly while I’m trying to use content-['>'].

The result of the rendering does not show the content >. You can reproduce by the Reproduction repository URL.

[adamwathan]

Thanks for providing those workarounds @aggreggator and @nghiepit! I think we can properly support this by improving the regex we use to detect class names in your templates — right now we completely ignore “>” and “<” because they are markers for HTML tags (like <div>) but the HTML in the original post parses just fine in browsers, so we should be able to accommodate it.

Will leave this open so we have a chance to look, but the workarounds above (especially the character code option) have basically no downside in the mean time so that’s great 👍

[amirhosseinfaraji]

@rowild with attribute:

@apply content-[attr(data-content)] mr-3 text-red-600;

with empty content

@apply content-[''] mr-3 text-red-600;