Escaping _ in template literals (after content directive)

[MrDobi]

What version of Tailwind CSS are you using?

v3.2.4

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

vite 3.2.5 postcss 8.4.14 storybook 6.5.14 react 18.2.0

What version of Node.js are you using?

v16.17.1

What browser are you using?

Chrome

What operating system are you using?

Debian 11

Reproduction URL

https://stackblitz.com/edit/vitejs-vite-dctxpj?file=src/App.jsx

Describe your issue

When I've imported Material Symbols - icons with underscore are not properly loaded using content directive in pseudo elements :>

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

Tailwind doesn't read your files as JS, but rather as raw text. This means that we see the literal \\_. But JS transforms this to \_ which means that the generated CSS won't match.

However, there is a trick you can use using String.raw to make sure that it stays as literal as possible.

console.log(`p-2 after:material-symbols-outlined after:content-['arrow\\_upward'] bg-slate-100`)
// p-2 after:material-symbols-outlined after:content-['arrow\_upward'] bg-slate-100

console.log(String.raw`p-2 after:material-symbols-outlined after:content-['arrow\\_upward'] bg-slate-100`)
// p-2 after:material-symbols-outlined after:content-['arrow\\_upward'] bg-slate-100

You can also use this trick in your JSX itself:

<span
  class={String.raw`p-2 after:material-symbols-outlined after:content-['arrow\_forward'] bg-slate-200`}
/>
<span
  class={String.raw`p-2 after:material-symbols-outlined after:content-['arrow\\_upward'] bg-slate-100`}
/>

Here is an updated StackBlitz with the String.raw trick to make it all work: https://stackblitz.com/edit/vitejs-vite-nutfcb?file=src/App.jsx

Hope this helps!