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

weapp-tailwindcss

Routes cross-platform Tailwind CSS requests to specialized weapp-tailwindcss workflows with safety baselines.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

When working with weapp-tailwindcss across mini-programs, Web/H5, React Native, and ReactLynx, it is hard to know which setup, migration, troubleshooting, or runtime workflow applies to a vague request. This Skill classifies the task and routes it to the correct specialized workflow, or provides a safe baseline when no specialized skill is installed.

Core Features & Use Cases

  • Task Routing: Identifies task type, framework, bundler, target platform, and version, then routes to the matching specialized skill for setup, migration, troubleshooting, runtime, custom builds, React Native, or ReactLynx.
  • Safety Baseline Fallback: When specialized skills are unavailable, it supplies current v5-era constraints (Tailwind CSS 4 only, Node version requirements, cssEntries rules) instead of guessing framework configuration.
  • Boundary Enforcement: Prevents common mistakes such as stacking the official Tailwind plugin alongside WeappTailwindcss, misusing the CLI --target weapp flag, or mixing React Native and ReactLynx pipelines.
  • Use Case: A developer says their Tailwind styles broke after upgrading a uni-app project. The Skill identifies this as a migration plus troubleshooting case, orders the work as migrate then troubleshoot, and routes to the appropriate specialized skills.

Quick Start

Ask the assistant to route your weapp-tailwindcss request, for example by describing your framework, bundler, target platform, and whether you need setup, migration, or troubleshooting help.

Frequently Asked Questions about weapp-tailwindcss

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

FAQPage Schema
How do I set up Tailwind CSS in a WeChat mini-program project?▼

Install tailwindcss and weapp-tailwindcss, create a pure CSS entry with @import "tailwindcss" that your project actually imports, and register the bundler plugin for your framework. This Skill routes detailed setup tasks to the dedicated setup workflow.

Which Tailwind CSS version does weapp-tailwindcss support?▼

The current mainline only maintains Tailwind CSS 4. The weapp-tailwindcss manifest requires Node ^22.18.0 or >=24.11.0, and the CLI is a separate 5.x package with weapp-tw and weapp-tailwindcss as equivalent commands.

Can I use the official Tailwind plugin together with weapp-tailwindcss?▼

No. In a build managed by weapp-tailwindcss, Tailwind generation is taken over by WeappTailwindcss, so stacking the official Tailwind generation plugin in the same build is not allowed.

Does the weapp-tailwindcss CLI build a complete mini-program?▼

No. The CLI outputs Web CSS by default, and --target weapp only converts CSS. It does not scan or rewrite WXML, JavaScript, or existing WXSS files, so it is not a full mini-program project build.

What is the difference between React Native and ReactLynx support?▼

They are two independent native pipelines. React Native uses @weapp-tailwindcss/react-native to generate a style manifest via Metro and Babel, while ReactLynx uses @weapp-tailwindcss/lynx to keep className and output Lynx-consumable CSS.

Why are my dynamic Tailwind classes not transpiled in JavaScript?▼

JavaScript class transpilation only converts candidates that exactly match the Tailwind-validated classNameSet. There is no heuristic fallback, so dynamically constructed class strings that miss the set are left unchanged.

Related Skills

Explore More Software Engineering Skills→
module-federationmodule-federation
2.6k

mf-context

Collect and aggregate Module Federation context from project and bundler configurations.

Official
Intermediate
AshishYesale7AshishYesale7
1

lg-dependency-resolver

Diagnose Flutter and Dart dependency conflicts and build failures.

Community
Advanced
vudovnvudovn
8.2k

verify-changes

Verifies code changes by executing builds, tests, and runtime checks instead of inspection.

Community
Intermediate
xurenluxurenlu
1

expo-tailwind-setup

Configure Tailwind CSS v4, react-native-css, and NativeWind v5 in Expo projects.

Community
Intermediate