Skyline 引擎下的tailwindcss失效

[sonofmagic]

Discussed in #333

^{Originally posted by qiuguixiao August 6, 2024}
在webview模式下正常，在Skyline引擎下tailwindcss没有生效，求支持🧎🏻
Skyline模式下 无效

webview模式下 正常

[ZhelinCheng]

确实有些问题，提示：

[skyline wxss warning] Unsupported @charset block (/app.wxss:1:9)
Invalid Selectors: Unsupported Pseudo Elements. Only support ::before, ::after. Style Text: "::backdrop" (/app.wxss:7:28)
Unsupported @supports block (/app.wxss:158:10)
Pseudo-elements should use double colons (::). Style Text: ":after" (/app.wxss:189:11)
Pseudo-elements should use double colons (::). Style Text: ":before" (/app.wxss:189:18)
Invalid Selectors: Unsupported Pseudo Elements. Only support ::before, ::after. Style Text: "::backdrop" (/app.wxss:189:26)
Unsupported Property. Style Text: isolation: isolate; (/app.wxss:315:11)
Unsupported media syntax (/app.wxss:333:25)
Unsupported media syntax (/app.wxss:338:25)
Unsupported media syntax (/app.wxss:343:25)
Unsupported media syntax (/app.wxss:348:25)
Unsupported media syntax (/app.wxss:353:25)
Unsupported Property. Style Text: display: -webkit-box; (/app.wxss:428:20)
Unsupported Property. Style Text: -webkit-box-orient: vertical; (/app.wxss:429:24)
Unsupported Property. Style Text: -webkit-line-clamp: 1; (/app.wxss:430:32)
Unsupported Property. Style Text: display: -webkit-box; (/app.wxss:434:20)
Unsupported Property. Style Text: -webkit-box-orient: vertical; (/app.wxss:435:24)
Unsupported Property. Style Text: -webkit-line-clamp: 2; (/app.wxss:436:32)
Unsupported Property. Style Text: display: table; (/app.wxss:460:9)
Unsupported Property. Style Text: translate: -50% var(--tw-translate-y); (/app.wxss:605:26)
Unsupported Property. Style Text: translate: var(--tw-translate-x) var(--tw-translate-y); (/app.wxss:606:41)
Unsupported Property. Style Text: translate: var(--tw-translate-x) -50%; (/app.wxss:610:26)
Unsupported Property. Style Text: translate: var(--tw-translate-x) var(--tw-translate-y); (/app.wxss:611:41)
Unsupported Property. Style Text: rotate: 90deg; (/app.wxss:614:13)
Unsupported Property. Style Text: grid-template-columns: repeat(1, minmax(0, 1fr)); (/app.wxss:625:15)
Unsupported Property. Style Text: grid-template-columns: repeat(2, minmax(0, 1fr)); (/app.wxss:628:15)
Unsupported Property. Style Text: grid-template-columns: repeat(3, minmax(0, 1fr)); (/app.wxss:631:15)
Unsupported Property. Style Text: background-color: color(display-p3 0.60256 0.76721 0.99394); (/app.wxss:871:40)
Unsupported Property. Style Text: background-color: color(display-p3 0.26642 0.49122 0.98862); (/app.wxss:876:39)
Unsupported Property. Style Text: background-color: color(display-p3 0.30873 0.77475 0.37431); (/app.wxss:889:37)
Unsupported Property. Style Text: background-color: color(display-p3 0.98876 0.93139 0.84327); (/app.wxss:894:40)
Unsupported segment (/app.wxss:901:21)
Unsupported Property. Style Text: background-color: color(display-p3 0.94659 0.44979 0.07573 / 0.1); (/app.wxss:902:21)
Unsupported Property. Style Text: object-fit: contain; (/app.wxss:990:18)
Unsupported Property. Style Text: object-fit: cover; (/app.wxss:993:16)
Unsupported Property. Style Text: color: color(display-p3 0.82714 0.46717 0.0336); (/app.wxss:1289:27)
Unsupported Property. Style Text: color: color(display-p3 0.20656 0.58906 0.41396); (/app.wxss:1298:27)
Unsupported Property. Style Text: color: color(display-p3 0.24388 0.64082 0.29481); (/app.wxss:1303:26)
Unsupported Property. Style Text: color: color(display-p3 0.88747 0.34166 0.022); (/app.wxss:1308:26)
Unsupported Property. Style Text: color: color(display-p3 0.83032 0.14038 0.1332); (/app.wxss:1317:26)
Unsupported Property. Style Text: text-transform: capitalize; (/app.wxss:1359:14)
Unsupported Property. Style Text: text-transform: uppercase; (/app.wxss:1362:13)
Unsupported Property. Style Text: transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; (/app.wxss:1428:14)
Unsupported Property. Style Text: transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; (/app.wxss:1442:21)
Unsupported Property. Style Text: transition-property: transform, translate, scale, rotate; (/app.wxss:1449:24)
Invalid Selectors: Unsupported Pseudo Classes. Only support :first-child, :last-child. Style Text: ".focus_cring-2:focus" (/app.wxss:1460:1)
Invalid Selectors: Unsupported Pseudo Classes. Only support :first-child, :last-child. Style Text: ".active_cscale-95:active" (/app.wxss:1464:1)
Invalid Selectors: Unsupported Pseudo Classes. Only support :first-child, :last-child. Style Text: ".active_cscale-_b0_d98_B:active" (/app.wxss:1471:1)
Unsupported segment (/app.wxss:1512:21)
Unsupported Property. Style Text: background-color: color(display-p3 0.11782 0.30297 0.2345 / 0.3); (/app.wxss:1513:28)

[sonofmagic]

是的，一看你这块警告就是用的 tailwindcss@4 的生成产物

有些css是webview支持，skyline不支持的，为了防止用户去指定渲染引擎，所以这些都生成了。