weapp-tailwindcss-lynx について
weapp-tailwindcss-lynx は、ReactLynx と Rspeedy で Tailwind CSS を設定し、Lynx のネイティブランタイムで生成スタイルを利用するための手順を示します。className を維持し、バンドルと実機で CSS を検証する点が特徴です。
主な機能
- 01Rspeedy 連携の設定
- 02ReactLynx の className を維持
- 03inline source による動的候補の指定
- 04エンコーダー警告とバンドル結果の確認
- 05対象ランタイムでスタイルを検証
活用シーン
- 01ReactLynx プロジェクトで Tailwind CSS を設定
- 02バンドル時に除外された utility の調査
- 03実機で疑似クラスやレスポンシブスタイルを確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/weapp-tailwindcss-lynxを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlreferences/rspeedy-integration.md
詳細
プロジェクトの README よりweapp-tailwindcss Lynx
通过 Rspeedy/Rspack 构建图生成 Lynx 原生运行时可消费的 Tailwind CSS，保留 ReactLynx className，不引入运行时样式表或 JSX 转换。
完整的 generator、rspack 和固定平台字段见站点的 ReactLynx / Rspeedy 配置参考。
工作流
- 确认项目是 ReactLynx + Rspeedy，而不是 React Native、uni-app App 或 Rspeedy Web。
- 检查
@lynx-js/rspeedy、Tailwind CSS、Node 与@weapp-tailwindcss/lynx版本。 - 读取 references/rspeedy-integration.md，配置
pluginLynxTailwindcss()和 theme + utilities CSS 入口。 - 保持完整静态
className或枚举；动态候选使用@source inline(...)，不要拼接半截任意值。 - 区分 Tailwind 已生成、Lynx encoder 已接受和真实运行端已生效三个层级。
- 检查 Rspeedy 警告；业务 utility 被删除时调整属性或 selector，不把警告全部视为 preflight 噪声。
- 先跑单测和真实 bundle，再在目标端验证伪类、媒体、渐变、重要值和复杂视觉效果。
不可破坏的边界
- 插件固定
platform: 'lynx'与generator.target: 'web'，但输出仍经过 Lynx 原生兼容处理。 - 不使用小程序 safe class；ReactLynx 保留原始
className。 - 不使用 React Native manifest、Metro、Babel transform 或
tw()runtime。 - 浏览器 preflight 不适合 Lynx；默认只引入 Tailwind theme 与 utilities。
- Tailwind 能生成某条规则不代表 Lynx encoder 或设备运行时支持它。
输出要求
输出安装、完整 Rspeedy/CSS 配置、候选写法、encoder 警告结论、bundle 证据和目标端验证步骤。
コメント
Markdown 対応