skills.rest
sonofmagic
sonofmagicCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

weapp-tailwindcss-migrate

Migrates legacy weapp-tailwindcss projects to the v5 Tailwind CSS 4 generation pipeline.

1.9k|102|Updated Jan 17, 2022
Search Tags:#upgrade#tailwindcss#postcss#mini-program#Migration#VITE#weapp-tailwindcss
One-click install
npx skills add https://github.com/sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-migrate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: weapp-tailwindcss-migrate
Source: https://github.com/sonofmagic/weapp-tailwindcss/tree/main/skills/weapp-tailwindcss-migrate
Command: npx skills add https://github.com/sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-migrate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Upgrading an existing weapp-tailwindcss project to the current v5/Tailwind CSS 4 toolchain involves removing legacy patches, outdated CLI workflows, and duplicate Tailwind generators, which is error-prone when done manually.

Core Features & Use Cases

  • Legacy Cleanup: Removes old weapp-tw patch postinstall hooks, deprecated tailwindcss-patch dependencies, duplicate PostCSS/Vite Tailwind plugins, and Webpack 4-only entries.
  • CLI Migration: Moves projects from old @weapp-tailwindcss/cli 3.x/4.x alpha workflows (init, Sass/Less, directory scanning) to the standalone 5.x CLI with explicit bundler integration.
  • Entry & Plugin Rebuild: Converts Tailwind entries to pure CSS with absolute cssEntries and registers the current Vite, Webpack 5, Rspack, or Gulp plugin per target platform.
  • Use Case: A uni-app project still running weapp-tw patch on postinstall and the old CLI init flow can be migrated step-by-step to v5, with verification of mini-program safe selectors, H5 output, and HMR updates.

Quick Start

Use the weapp-tailwindcss-migrate skill to upgrade my legacy weapp-tailwindcss project to the current v5 Tailwind CSS 4 setup and remove the old patch and CLI configuration.

Frequently Asked Questions about weapp-tailwindcss-migrate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate weapp-tailwindcss from v4 to v5?▼

Record your current versions and a rollback commit, then remove the old weapp-tw patch hook and duplicate Tailwind generators. Rebuild the Tailwind entry as pure CSS with absolute cssEntries, register the current bundler plugin, and verify with a clean build plus a new arbitrary-value class.

How do I upgrade the old @weapp-tailwindcss/cli to version 5?▼

Install @weapp-tailwindcss/cli 5.x alongside weapp-tailwindcss and tailwindcss as explicit dependencies. The new CLI drops init, Sass/Less, and directory scanning; run it with explicit input and output CSS paths, and use bundler plugins for full project integration.

What Node version does weapp-tailwindcss v5 require?▼

The current manifest requires Node ^22.18.0 or >=24.11.0, and HBuilderX projects need at least version 5.11. The package ships both ESM and CJS entries, and only Tailwind CSS 4 is maintained.

Why is there no CSS output after migrating to v5?▼

The most common cause is that the Tailwind CSS entry is not actually imported by the application; cssEntries only marks entry semantics and does not trigger generation. Also check that no second Tailwind generator remains in the same build.

When should I not use this migration workflow?▼

Do not use it for brand-new integrations or single-point troubleshooting of one broken feature. It is designed for upgrading existing legacy setups, removing deprecated patches and CLI flows, not fresh installs.

Related Skills

Explore More Software Engineering Skills→
genfeedaigenfeedai
2

tailwind-validator

Validate Tailwind CSS v4 CSS-first configuration and flag v3 patterns.

Official
Intermediate
Orpheus-KOrpheus-K
13

runtime-automation-probe

Capture real-time UI rendering states of H5 and WeChat Mini Program pages.

Community
Intermediate
module-federationmodule-federation
2.6k

mf-integrate

Configure Module Federation for Rsbuild, Rspack, Webpack, Modern.js, Vite, and Next.js projects.

Official
Advanced
Impertio-StudioImpertio-Studio

tailwind-impl-build-postcss-cli

Integrate Tailwind CSS into non-Vite build systems via PostCSS or standalone CLI.

Official
Intermediate