Agent Skills › sonofmagic/weapp-tailwindcss › weapp-tailwindcss-lynx

weapp-tailwindcss-lynx

GitHub

为 ReactLynx + Rspeedy 配置 Tailwind CSS，生成 Lynx 原生兼容样式。涵盖插件集成、静态类处理、encoder 警告排查及多端验证，确保构建与运行效果一致。

skills/weapp-tailwindcss-lynx/SKILL.md sonofmagic/weapp-tailwindcss

Trigger Scenarios

需要为 ReactLynx 项目配置 Tailwind CSS 排查 Lynx 端样式生成或运行时兼容性问题配置 Rspeedy 构建插件以支持 Lynx 平台

Install

npx skills add sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-lynx -g -y

More Options

Use without installing

npx skills use sonofmagic/weapp-tailwindcss@weapp-tailwindcss-lynx

指定 Agent (Claude Code)

npx skills add sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-lynx -a claude-code -g -y

安装 repo 全部 skill

npx skills add sonofmagic/weapp-tailwindcss --all -g -y

预览 repo 内 skill

npx skills add sonofmagic/weapp-tailwindcss --list

SKILL.md

Frontmatter

{
    "name": "weapp-tailwindcss-lynx",
    "description": "为 ReactLynx + Rspeedy 配置 @weapp-tailwindcss\/lynx 0.3.2 与 Tailwind CSS 4，覆盖 Rspeedy plugin、Lynx 原生 CSS、静态 className、theme 变量静态化、任意值、encoder 警告和 iOS\/Android 运行端验证。Use for ReactLynx, Rspeedy, Lynx native CSS, arbitrary value compatibility, or Lynx bundle styling；不用于 React Native、uni-app App、Web 或普通小程序构建。"
}

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，再在目标端验证伪类、媒体、渐变、重要值和复杂视觉效果。