Skip to main content

Skill (skill system)

weapp-tailwindcss official skill is for business project users. It splits the current v5 access, migration, troubleshooting and advanced capabilities into independent workflows, avoiding the need for one big Skill to maintain all frameworks and APIs at the same time.

This project uses vercel-labs/skills to install Skill. sonofmagic/weapp-tailwindcss is the content source of fact, and sonofmagic/skills is the user-facing aggregated installation repository.

Install the complete package​

npx skills add sonofmagic/skills \
  --skill weapp-tailwindcss \
  --skill weapp-tailwindcss-setup \
  --skill weapp-tailwindcss-migrate \
  --skill weapp-tailwindcss-troubleshoot \
  --skill weapp-tailwindcss-runtime \
  --skill weapp-tailwindcss-custom-build \
  --skill weapp-tailwindcss-react-native \
  --skill weapp-tailwindcss-lynx \
  -y

You can also install only the compatible coordination entrance:

npx skills add sonofmagic/skills --skill weapp-tailwindcss

The coordination portal is responsible for identifying tasks and recommending specialized skills; the complete implementation and reference materials are located in each specialized skill.

View all installable content in the aggregation warehouse:

npx skills add sonofmagic/skills --list

Skill division of labor​

SkillUsage scenarios
weapp-tailwindcssGeneralized request, task identification, security baseline and compatibility entry
weapp-tailwindcss-setupNew setup, framework selection, standalone CLI, Tailwind CSS 4, and multiple targets
weapp-tailwindcss-migratev4 to v5, legacy patch, CLI, generator, and environment migration
weapp-tailwindcss-troubleshootCLI, style generation, class translation, rpx, HMR, and runtime troubleshooting
weapp-tailwindcss-runtimeDynamic class, merge, cva, variants and escape/unescape
weapp-tailwindcss-custom-buildCore API, self-developed bundler, style injection and sub-packaging isolation
weapp-tailwindcss-react-nativeExpo Metro, Native manifest and Android/iOS runtime
weapp-tailwindcss-lynxReactLynx, Rspeedy, Lynx native CSS, and encoder compatibility

Current common baseline​

  • Currently, only Tailwind CSS 4 is maintained on the mainline.
  • The current weapp-tailwindcss manifest requires Node.js ^22.18.0 || >=24.11.0; the HBuilderX project uses at least 5.11.
  • The same managed build only generates Tailwind CSS by WeappTailwindcss, without overlaying the official Tailwind PostCSS/Vite generation plug-in.
  • Tailwind entry uses pure CSS and must be actually imported by the project; cssEntries uses absolute paths and cannot replace the build map import.
  • H5/Web usually retains plug-ins, and the generator automatically selects the Web target.
  • JavaScript class only converts Tailwind-verified exact candidates of classNameSet.
  • @weapp-tailwindcss/cli emits Web CSS by default; --target weapp only converts generated CSS and does not replace a full mini-program bundler.
  • React Native uses a style manifest, while ReactLynx preserves className and emits Lynx native CSS; these pipelines are not interchangeable.

Local development installation​

Execute in the root directory of this warehouse:

npx skills add . \
  --skill weapp-tailwindcss \
  --skill weapp-tailwindcss-setup \
  --skill weapp-tailwindcss-migrate \
  --skill weapp-tailwindcss-troubleshoot \
  --skill weapp-tailwindcss-runtime \
  --skill weapp-tailwindcss-custom-build \
  --skill weapp-tailwindcss-react-native \
  --skill weapp-tailwindcss-lynx \
  -y

Prompt word example​

Use $weapp-tailwindcss-setup to configure the WeChat applet and H5 for the new uni-app Vue3 Vite project, giving complete files and verification steps.
Use $weapp-tailwindcss-migrate to migrate old projects that are still running weapp-tw patch and @tailwindcss/vite to v5.
Use $weapp-tailwindcss-troubleshoot to locate why the newly added arbitrary value class is no longer generated after the second HMR.
Use $weapp-tailwindcss-custom-build to design in-memory conversion and sub-package style injection timing based on weapp-tailwindcss/core.
Configure Metro for Expo SDK 54 and verify manifest warnings using $weapp-tailwindcss-react-native.
Use $weapp-tailwindcss-lynx to configure Tailwind CSS 4 for ReactLynx and Rspeedy and inspect encoder warnings.

Maintenance and verification​

Source code is located at skills/<skill-name>/. Each directory contains SKILL.md, agents/openai.yaml, and references/ loaded on demand.

pnpm skills:validate
npx skills add . --list

For the release link, see: [Skill Release and Synchronization] (/docs/ai/basics/skill-release).