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

weapp-tailwindcss-troubleshoot

Diagnoses weapp-tailwindcss style generation, class transpilation, HMR, and multi-platform output failures.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

When Tailwind CSS styles fail to generate, classes are not transpiled, or hot reload breaks in weapp-tailwindcss projects, developers often guess at configuration fixes without finding the root cause. This Skill provides a systematic diagnostic workflow that locates failures layer by layer, from CSS generation through transpilation, build artifacts, and runtime behavior.

Core Features & Use Cases

  • Layered Diagnosis: Classifies symptoms across four layers (generation, transpilation, artifacts, runtime) using a symptom matrix, then follows the shortest path to root cause.
  • Multi-Platform Coverage: Handles WeChat/Alipay/Douyin mini-programs, H5/Web, App WebView, uni-app x, and CLI output issues including rpx units, pseudo-classes, component style isolation, and Rspack rules.
  • HMR and Watch Debugging: Distinguishes first-build success from incremental graph failures by testing consecutive new classes in the same dev process.
  • Use Case: A developer adds a new arbitrary-value class like text-[22rpx] in a uni-app project and it never appears in the mini-program output. The Skill walks through @source coverage, classNameSet validation, and final WXSS artifact inspection to pinpoint whether the failure is in scanning, transpilation, or platform filtering.

Quick Start

Use the weapp-tailwindcss-troubleshoot skill to diagnose why my Tailwind classes are not appearing in the compiled mini-program CSS output.

Frequently Asked Questions about weapp-tailwindcss-troubleshoot

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

FAQPage Schema
Why are my Tailwind classes not generating in weapp-tailwindcss?▼

Missing Tailwind classes usually trace to four checks: the CSS entry must contain @import "tailwindcss" and be actually imported, cssEntries must use absolute paths, @source must cover your source files, and no second generator or disabled flag should override output. Verify each layer before changing configuration.

How do I fix Tailwind classes not transpiled in JS or templates?▼

JavaScript strings only transpile when they enter the Tailwind-validated classNameSet; unmatched strings stay unchanged by design. For component attributes like root-class or custom-class, configure customAttributes for the corresponding tag so the template transformer processes them.

Why does hot reload stop working for new Tailwind classes?▼

HMR failures happen when the incremental module graph loses track of new candidates. Test by adding two previously unused arbitrary-value classes in the same dev process, then check whether the source event, generated CSS, and page all update. Restarting the process masks the real graph issue.

Does the weapp-tailwindcss CLI transform WXML or JS files?▼

No, the @weapp-tailwindcss/cli with --target weapp only converts CSS to mini-program compatible output. It does not rewrite WXML, JS, TS, JSX, TSX, or existing WXSS files, and source maps are only supported for the web target.

Why do space-y or space-x utilities not work in mini-programs?▼

The space-* utilities rely on child combinator selectors that mini-programs restrict. First ensure adjacent nodes are view or text elements or add a view wrapper, evaluate virtualHost for custom components, then minimally extend cssOptions.cssChildCombinatorReplaceValue if needed.

When should I not use this troubleshooting skill?▼

This skill is not for new project setup, custom API design, or ReactLynx/Rspeedy-specific issues. Lynx encoder and runtime problems should go to the dedicated weapp-tailwindcss-lynx skill instead.

Related Skills

Explore More Software Engineering Skills→
freedomw1987freedomw1987
2

tailwindcss-v4-plugin-typography

Fix Tailwind CSS v4 typography plugin registration using the @plugin directive.

Community
Basic
viraatdasviraatdas

investigate

Identify bug root causes by collecting symptoms, reading code, and testing hypotheses.

Community
Advanced
MobAI-AppMobAI-App
19

web-runner

Execute web automation tasks on mobile browsers and WebViews via DSL.

Community
Intermediate
williamwang25williamwang25

miniprogram-development

Guide WeChat Mini Program project structure, configuration, debugging, and publishing workflows.

Community
Intermediate