Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

excaped characters break selector detection with tailwind v3

Aperta
#169 3 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, tailwindcss
Ambito
frontend, tooling

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

image

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

Lingua principale
JavaScript
Stelle
1.2k
Fork
64
Nessuna PR unita negli ultimi 30g

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di postcss/postcss-nested

Tutte le issue di postcss/postcss-nested

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.