Tailwind v4 parity gaps: stale allowlist strips core-supported props, all @media dropped, hidden→collapse rewrite is wrong on modern core
還沒有人認領這個 Issue。
評估
- 難度
- 5/5
- 預估耗時
- 一週以上
- 新手友好度
- 45/100
- Issue 類型
- 缺陷
- 描述清晰度
- 描述清楚
- 活躍度
- 活躍
- 技術堆疊
- javascript, tailwindcss
- 領域
- frontend, mobile-dev, tooling
研究方向
Start in src/removeUnsupported.js, including the supportedProperties allowlist, visibility rewrite, and mediaAtRule handling. Compare those paths with the NativeScript core files named in the issue, then work through the suggested order and verify the listed gap, media, visibility, translate, and scale utilities retain the supported behavior while unsupported features remain documented or dropped.
由索引模型根據 Issue 內容生成。
描述
We've been auditing @nativescript/tailwind's removeUnsupported pass against @nativescript/core 9.x with the goal of Tailwind parity between web and NativeScript wherever core makes it possible. The class vocabulary is genuine Tailwind v4 (same generated names), but several rewrites and one stale allowlist make the same class behave differently — or silently die — on native. Findings below are all source-verified against NativeScript/NativeScript packages/core.
1. supportedProperties is stale — strips properties core now supports
The allowlist in src/removeUnsupported.js predates core's current CSS registry. These properties exist in core (cssName: registrations in packages/core/ui/styling/style-properties.ts + view modules) but are stripped:
| Property | Tailwind utilities killed | Core support |
|---|---|---|
gap, row-gap, column-gap |
gap-*, gap-x-*, gap-y-* |
FlexboxLayout gap/rowGap/columnGap (NS 9) |
max-width, max-height |
max-w-*, max-h-* |
maxWidth/maxHeight cssName |
white-space |
whitespace-nowrap, whitespace-pre, … |
whiteSpace cssName |
text-overflow |
text-ellipsis, text-clip, truncate |
textOverflow cssName (truncate still needs overflow:hidden, which core genuinely lacks — partial parity only) |
perspective |
perspective-* |
perspective cssName |
direction |
dir/rtl related |
direction cssName |
Also note the plugin runs on all app CSS, not just Tailwind output — so a hand-written .foo { gap: 16px } in app.css is silently stripped too, even though FlexboxLayout honors it.
2. visibility: hidden → collapse rewrite is no longer correct
Core accepts hidden (core-types/index.ts Visibility.isValid = visible | hidden | collapse; style-properties.ts visibilityProperty only sets isCollapsed for collapse). So:
- Web
invisible= hidden, keeps layout space. - Native after rewrite =
collapse, removed from layout.
Same class, different layout. The rewrite should simply pass hidden through (keep collapse/collapsed as-is).
3. @media rules are deleted wholesale — breakpoints and system dark mode could work
mediaAtRule.remove() drops every @media block: sm:–2xl: variants, media-flavor dark:, portrait:/landscape: — all dead.
But core 8.8+ ships a media query engine (packages/core/css-mediaquery/index.ts): width, height, device-width/height, orientation, prefers-color-scheme, min-/max- modifiers, not, comma lists — plus matchMedia()/MediaQueryList with change events.
The catch: the parser only accepts colon syntax (min-width: 40rem); Tailwind v4 emits range syntax (width >= 40rem), which fails RE_MQ_EXPRESSION and throws SyntaxError — presumably why the wholesale drop exists. A PostCSS rewrite from range → min-/max- colon form (plus still dropping @media blocks using features core can't evaluate: hover, prefers-reduced-motion, resolution, …) would restore the entire breakpoint family and prefers-color-scheme dark mode instead of losing it all.
4. Transform utilities die on an artificial boundary
rotate-*survives (rotateis allowlisted, core supportsrotate).translate-x-*/translate-y-*/scale-*die: v4 emitstranslate:/scale:shorthand properties, and core exposestranslateX/translateY/scaleX/scaleY+transform. A rewrite —translate: x y→transform: translate(x, y),scale: n→transform: scale(n)— would restore these families without touching core.
5. Selector/cascade drift (smaller, mostly documentable)
:where()is unwrapped → loses zero-specificity, sodark:/variant rules gain real specificity on native vs web.@layerflattened → utilities become unlayered on native, so utility-vs-author-CSS precedence differs between platforms. (Unavoidable until core implements cascade layers; worth documenting.)@supportsflattened → applied unconditionally. Mostly fine (core 8.9.1+ supportscolor-mix), but any future@supportsguard for genuinely unsupported features will misfire.@propertyremoved →--tw-*vars loseinitial-value/inherits: false; chains likeshadow-*vars inherit differently than web. Mostly dead weight anyway since shadows don't map, but worth noting.space-*/divide-*rewritten to* + *— loses the> :not([hidden]) ~ :not([hidden])semantics, and the-reversevariants are broken (the--tw-space/divide-*-reversedeclarations get stripped).emtreated identically torem(×16) — wrong for nested-em contexts.vertical-align: middle → centeris redundant — core'sverticalAlignvalidator already acceptsmiddle(it's even in the plugin's own allowlist for that property).currentColordeclarations dropped →text-current,border-currentdead. Could rewrite toinherit-equivalent handling or a follow-up core feature.w-screen(100vw),hover:,focus-within:,&selectors — genuinely unsupported by core; dead by necessity, just worth documenting.
Suggested order of attack
- Refresh
supportedPropertiesfrom core'scssNameregistry (biggest win:gapalone unlocks the wholegap-*family) — and consider only running the strip on Tailwind-generated layers rather than all author CSS. - Range→colon
@mediarewrite + feature allowlist. - Drop the
hidden→collapserewrite. translate/scale→transformrewrites.- Document the rest as known divergences.
Happy to send a PR for 1–3 if you'd like — we have the core property registry mapped already.
- 主要語言
- JavaScript
- 星號
- 161
- 分支
- 30
- 平均合併
- 1 小時 39 分鐘
- 30 天內合併 PR
- 1
環境準備
- 沒有 Dockerfile 或 Docker Compose 檔案
- 沒有 Pull Request 範本
- 閱讀貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
NativeScript/tailwind 的其他 Issue
-
難度 4/5 3-5 天 新手友好度 25/100
NativeScript/tailwind#211 · 1 則留言 · 2 個 reaction ·
-
難度 3/5 1-2 天 新手友好度 48/100
NativeScript/tailwind#200 ·
-
難度 1/5 1 小時以內 新手友好度 55/100
NativeScript/tailwind#197 · 1 則留言 ·
-
難度 2/5 1-3 小時 新手友好度 25/100
NativeScript/tailwind#193 · 3 則留言 ·
-
enhancement
難度 3/5 1-2 天 新手友好度 45/100
NativeScript/tailwind#188 · 4 則留言 ·
查看 NativeScript/tailwind 的全部 Issue
相似的 Issue
-
bug
難度 2/5 1-3 小時 新手友好度 68/100
openlibhums/janeway#5604 ·
維護者通常 1 天內回覆
-
[BUG] Generic OSC does not initialize OSC client on startup when "Listen for Feedback" is disabled未關閉
難度 2/5 1-3 小時 新手友好度 86/100
-
area/statement-execution TS conversion
難度 2/5 1-3 小時 新手友好度 76/100
scylladb/nodejs-rs-driver#584 ·
維護者通常 2 天內回覆
-
documentation good first issue help wanted
難度 1/5 1-3 小時 新手友好度 92/100
維護者通常 1 天內回覆
-
難度 2/5 1-3 小時 新手友好度 69/100
維護者通常 3 天內回覆