excaped characters break selector detection with tailwind v3

[hichemfantar]

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 tailwindlabs/tailwindcss#14753 (comment)

[ai]

I need a PR which will fix the issue

[hichemfantar]

not sure if the issue is with this lib or postcss-selector-parser

[ai]

Try to do a debug to find out