Adding CSS symbol code to Tailwind-css pseudo-elements

Question

Not sure if this is a prettier or tailwind-css issue, but I am building a marquee component in nextjs where the content is separated by a bullet symbol with CSS code: content-['\2022'].

This renders properly on the UI.

When i try to format the code, prettier adds a new backslash to content-['\\2022'] and keeps going with every prettier command run.

  <span className="ml-6 after:ml-6 after:font-bold after:content-['\2022']">
    Some text
  </span>

In package.json:

"prettier": "^3.3.0",
"prettier-plugin-tailwindcss": "^0.6.1",

Here is my prettier config:

/** @type {import('prettier').Config} */
module.exports = {
  singleQuote: true,
  arrowParens: 'always',
  trailingComma: 'none',
  printWidth: 100,
  tabWidth: 2,
  plugins: ['prettier-plugin-tailwindcss']
};

Is there a fix for this or should I proceed with a custom class in globals.css to get around the bug?

Did not expect prettier to throw an error since this is valid CSS and the UI works as expected.