Abnormal css ouput when some string in the code is wrapped in square brackets

[ltclmbdev]

What version of Tailwind CSS are you using?

v3.0.1

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

Next.js 12.0.4, postcss 8.4.4

What version of Node.js are you using?

v14.18.1

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/DrShpongle/tailwindcss-3-issue-demo

Describe your issue

In case we use some text wrapped with square brackets we get abnormal css output:

Example 1:
Just an object with string field:
https://github.com/DrShpongle/tailwindcss-3-issue-demo/blob/main/components/problem-01.js#L4-L5

and related output:
https://github.com/DrShpongle/tailwindcss-3-issue-demo/blob/main/dist/output.css#L579-L581

Example 2:
Just regular dumb component:
https://github.com/DrShpongle/tailwindcss-3-issue-demo/blob/main/components/problem-02.tsx#L10

and related output:
https://github.com/DrShpongle/tailwindcss-3-issue-demo/blob/main/dist/output.css#L583-L585

[sachinraja]

This is probably because of arbitrary properties.

you can just add an unnecessary escape:

const ProblemComponent = () => {
  return (
    <button
      nCanPlay={(event: any) => {
        console.debug(`player ready: [autoplay\:${autoplay}]`);
      }}
    ></button>
  );
};

you can also use a function like this:

const addBrackets = (str: string) => `[${str}]`;

const ProblemComponent = () => {
  return (
    <button
      nCanPlay={(event: any) => {
        console.debug(`player ready: ${addBrackets(`autoplay:${autoplay}`)}]`);
      }}
    ></button>
  );
};