excaped characters break selector detection with tailwind v3
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 45/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript, tailwindcss
Research direction
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.
Written by the indexing model from the issue text.
Description
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
- Dominant language
- JavaScript
- Stars
- 1.2k
- Forks
- 64
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from postcss/postcss-nested
-
Difficulty 3/5 1-2 days Newbie friendliness 35/100
postcss/postcss-nested#149 · 3 comments ·
-
Difficulty 4/5 3-5 days Newbie friendliness 35/100
postcss/postcss-nested#139 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
postcss/postcss-nested#111 · 1 comment ·
All issues in postcss/postcss-nested
Similar issues
-
ai-observability bug team/ai-observability
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
AllTheMods/ATM-10-L#19 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
SignalK/n2k-signalk#345 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
JuliaPluto/PlutoPlotly.jl#72 ·