Escape content in JSX with clsx

[ofk]

The feature of https://tailwindcss.com/docs/content#using-spaces-and-underscores does not work if written in JSX with clsx.

<div className="before:content-['Hello\_1']" /> // working
<div className={cx("before:content-['Hello\\_2']")} /> // not working

I suspect that the escape sequence in JSX is incorrect, but is there a correct way to escape it?

[wongjn]

As per the documentation:

If you’re using something like JSX where the backslash is stripped from the rendered HTML, use String.raw() so the backslash isn’t treated as a JavaScript escape character:

<div className={String.raw`before:content-['hello\_world']`}>
  <!-- ... -->
</div>