excaped characters break selector detection with tailwind v3

Start with the supplied PostCSS configuration and nested CSS example, then run the linked Tailwind Play reproduction. Trace selector detection for the escaped :, [ and ] characters and compare the generated CSS and warning with the reported output. Done means the reproduction handles these escaped selectors correctly without the reported detection failure.

it seems it breaks with escaped characters

terminal warning:

2:3     ⚠  Nested @tailwind rules were detected, but are not supported.
Consider using a prefix to scope Tailwind's classes: https://tailwindcss.com/docs/configuration#prefix
Alternatively, use the important selector strategy: https://tailwindcss.com/docs/configuration#selector-strategy [undefined]

local config:
"postcss-nested": "^7.0.2",

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-nested': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

css file:

#bluesky-embed {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  .break-word {
    word-break: break-word;
  }
}

result:

@media (min-width: 1536px) {

// not escaped
  #bluesky-embed .container {
    max-width: 1536px;
  }
}

// : is escaped 
.hover\:underline:hover {
  text-decoration-line: underline;
}

@media (min-width: 300px) {
 // : [ ] are escaped 
  .min-\[300px\]\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

following https://tailwindcss.com/docs/using-with-preprocessors#nesting

https://play.tailwindcss.com/4L4HQiVNmh

related to https://github.com/tailwindlabs/tailwindcss/issues/14753#issuecomment-2495747574