Tailwind CSS generates incorrect CSS for escaped characters of JavaScript strings in React className

[jeremy-code]

What version of Tailwind CSS are you using?

v4.1.18

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

Vite v7.2.4, @tailwindcss/vite v4.1.18

What version of Node.js are you using?

v24.9.0

What browser are you using?

Firefox Developer Edition v148.0b5 (64-bit)

What operating system are you using?

macOS v26.1

For example: macOS, Windows

Reproduction URL

jeremy-code/tailwindcss-escape-character-css-generation-bug

Describe your issue

Consider the following three JSX elements. The first assigns the class HTML attribute directly, while the latter two set the attribute to a JavaScript string. Since JavaScript designates the backslash as an escape character, the double backslash is necessary for the correct output.

<div className="after:content-['\a0_·_']"/>{/* class="after:content-['\a0_·_']" */}
<div className={"after:content-['\a0_·_']"}/>{/* class="after:content-['a0_·_']" */}
<div className={"after:content-['\\a0_·_']"}/>{/* class="after:content-['\a0_·_']" */}

Hence, only the first and third options provide the correct output. However, the third option does not produce the correct generated CSS. Note the different CSS selector and the different --tw-content variable.

/* Output of Option 1 */
@layer utilities {
  .after\:content-\[\'\\a0_·_\'\] {
    &::after {
      --tw-content: '\a0 · ';
      content: var(--tw-content);
    }
  }
}

/* Output of Option 3 */
@layer utilities {
  .after\:content-\[\'\\\\a0_·_\'\] {
    &::after {
      --tw-content: '\\a0 · ';
      content: var(--tw-content);
    }
  }
}

This issue only exists in regards to the generated CSS. If the following code is executed, the styling works as intended, though generating both CSS outputs.

{/* <div className="after:content-['\a0_·_']" /> */}
<div className={"after:content-['\\a0_·_']"}>Bullet point</div>

The reproduction uses React, Vite, and the Vite Tailwind CSS plugin, but I've found this same issue also exists as of Next 16.1.4 and React 19.2.3.

While the last two options are a bit silly in this minimal reproduction, the issue also applies when using a JavaScript function like classnames, twMerge, clsx, etc.

[wongjn]

As per the documentation, you should use String.raw() in JavaScript to avoid backslashes being interpreted:

<div className={String.raw`after:content-['\a0_·_']`}/>{/* class="after:content-['\a0_·_']" */}