Basics

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

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).