weapp-tailwindcss Skill

Used for integrating

weapp-tailwindcss

into business projects, and enabling AI to stably complete "mini-program + multi-end" configuration, troubleshooting, and implementation of Tailwind writing specifications.

This Skill serves the "project user" scenario, not a guide for secondary development inside the repository.

Applicable Tasks

Quickly enable
```
tailwindcss + weapp-tailwindcss
```
for new projects
Legacy project migration (
```
uni-app
```
/
```
taro
```
/
```
uni-app x
```
/ native mini-programs)
Multi-end collaboration (mini-program +
```
H5
```
/
```
App
```
) configuration
Troubleshooting issues such as invalid styles, abnormal arbitrary
```
rpx
```
values, untranslated
```
JS
```
string classes, etc.
Team specifications and code review checklists for "How to write Tailwind classes"

Task Diversion

First determine the user's current task type, then enter the corresponding process:

Integrate new project
Migrate existing project
Troubleshoot existing problems
Settle Tailwind writing specifications

Minimum Information Collection Set

When key information is missing, fill it first before outputting the solution:

Current framework:
```
uni-app
```
/
```
taro
```
/
```
uni-app x
```
/ native mini-program / others
Build tool:
```
vite
```
/
```
webpack5
```
/
```
webpack4
```
/ others
Target end: Mini-program only, or mini-program +
```
H5
```
/
```
App
```
```
tailwindcss
```
main version (v3 / v4) and package manager (focus on confirming if it is
```
pnpm@10+
```
)
Runtime environment:
```
node
```
version (recommended
```
^20.19.0 || >=22.12.0
```
)
Which of the following is the current demand: "integration configuration / problem troubleshooting / writing specification settlement"

Execution Process

1) Baseline Configuration (common for all tasks)

First determine the Tailwind main version and scanning method:

tailwindcss@3

uses

tailwind.config.js -> content

```
tailwindcss@4
```
uses
```
@source
```
in the entry CSS
The scanning range must cover real template and script files, and exclude
```
dist
```
/
```
unpackage
```
/
```
node_modules
```
Clarify that
```
postinstall
```
needs to include
```
weapp-tw patch
```

If using

pnpm@10+

, remind to execute

pnpm approve-builds weapp-tailwindcss

If patch cache or target record abnormality is suspected, you can use
```
weapp-tw patch --clear-cache
```

2) Execute by task type

Integration/migration tasks:
Prioritize reading references/integration-playbook.md
Provide "copyable minimum configuration" according to the framework, do not only give concepts
In multi-end scenarios, clarify the
```
disabled
```
conditions to avoid unconditionally applying mini-program plugin capabilities to pure
```
H5
```
Troubleshooting tasks:
Prioritize reading references/troubleshooting-playbook.md
First output steps according to "symptom -> shortest troubleshooting path", then provide repair examples
Clarify the "expected phenomenon/verification point" for each step, avoid vague suggestions
Writing specification tasks:
Read references/tailwind-writing-best-practices.md
Output according to "recommended writing / counterexample / review checklist"
When runtime class splicing is required, prioritize
```
@weapp-tailwindcss/merge
```
/
```
cva
```
/
```
variants
```
When it comes to encapsulation and renaming, remind of
```
ignoreCallExpressionIdentifiers
```

3) Regression Verification (required for all tasks)

Run the development environment first, then run the target end build
Verify at least 3 types of styles: basic utility classes, arbitrary values (including
```
rpx
```
), variants/pseudo-classes
If class in
```
JS/TS
```
does not take effect, first check if
```
content/@source
```
covers the file and its extension
If
```
space-y-*
```
/
```
space-x-*
```
does not take effect, follow the fixed priority:
First modify the structure (child nodes fall to
```
view/text
```
or add
```
view
```
in the outer layer)
Then evaluate
```
virtualHost
```
Finally extend
```
cssChildCombinatorReplaceValue
```
(keep the minimum tag set)

Output Format Requirements

The final output must include:

Conclusion (applicable framework, Tailwind version, target end)
Modification file list (listed one by one by file)
Config snippets that can be copied directly
Installation/runtime commands (default
```
pnpm
```
)
Verification steps and expected results
Rollback solution (at least one)

If the user requires "specification settlement", additionally supplement:

Recommended writing (Do)
Prohibited writing (Don't)
Minimum regression check checklist (Code Review Checklist)

Key Constraints

Do not omit
```
weapp-tw patch
```
, otherwise the
```
rpx
```
and
```
JS
```
translation links may fail
Do not unconditionally apply the mini-program translation plugin to pure
```
H5
```
scenarios
Do not ignore the
```
content/@source
```
range configuration; this will directly cause classes not to be generated
Do not suggest "freely splicing class strings at runtime" as a regular solution; prioritize enumeration or
```
cva/tv
```
For ambiguous arbitrary values such as
```
text-[22rpx]
```
,
```
bg-[22rpx]
```
, provide
```
length:
```
/
```
color:
```
prefixes as a fallback writing method
When it comes to encapsulation or renaming of
```
twMerge
```
/
```
twJoin
```
/
```
cva
```
/
```
cn
```
/
```
tv
```
, remind to configure
```
ignoreCallExpressionIdentifiers
```
When you need to pass through third-party class names as they are, prioritize using
```
weappTwIgnore
```
For
```
space-y-*
```
/
```
space-x-*
```
, default to handle according to
```
view + view
```
(including
```
text
```
), do not assume that all tags will be automatically covered
The tag extension of
```
space-y-*
```
/
```
space-x-*
```
should be minimized, only add tags that the business actually needs to avoid selector pollution
Do not provide suggestions that conflict with repository principles:
```
JS
```
translation is based on precise hit of
```
classNameSet
```
, heuristic fallback translation is prohibited
When the version is uncertain, first provide the minimum available solution consistent with the official documentation, then do incremental optimization

References

references/integration-playbook.md
- Prioritize reading in "new access/migration" type problems
- Directly reuse the minimum configuration skeleton and verification checklist in it
references/troubleshooting-playbook.md
- Prioritize reading in "invalid style/abnormal behavior" type problems
- Output troubleshooting steps according to the symptom path, do not skip steps
references/tailwind-writing-best-practices.md
- Read when the user requires "Tailwind writing suggestions, team specifications, code review checklist, dynamic class governance"
- Output according to "decision order + example + counterexample + verification steps", do not only give concepts

weapp-tailwindcss

NPX Install

Tags

SKILL.md Content (Chinese)