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

weapp-tailwindcss-runtime

Selects runtime packages and composes dynamic Tailwind classes for mini-program builds.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Dynamic class composition in weapp-tailwindcss projects often breaks because runtime-generated classes are not scanned by the build-time generator, conflicts are not merged correctly, or mini-program escaping is applied twice. This Skill guides package selection and safe class composition across the @weapp-tailwindcss runtime ecosystem.

Core Features & Use Cases

  • Runtime Package Selection: Choose between @weapp-tailwindcss/runtime, merge, cva, variants, typography, theme-transition, and ui based on the task, respecting each package's exports and subpath entries.
  • Safe Class Composition: Build cn helpers with clsx plus twMerge, define single-slot variants with cva, and multi-slot recipes with tv, while keeping classes as complete literals the build can scan.
  • Escaping and Ignore Control: Use weappTwIgnore for precise pass-through, configure ignoreTaggedTemplateExpressionIdentifiers, and implement custom escape/unescape or rpx transformers with cache-safe pure functions.
  • Use Case: A component library needs external class overrides on a multi-slot Card. Use @weapp-tailwindcss/variants tv() with per-slot class parameters, declare root-class in customAttributes, and verify conflict resolution with production-minified output.

Quick Start

Ask the assistant to compose dynamic Tailwind classes for a mini-program component using the correct @weapp-tailwindcss runtime package and verify the classes survive the build.

Frequently Asked Questions about weapp-tailwindcss-runtime

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

FAQPage Schema
How do I merge Tailwind classes dynamically in a mini-program project?▼

Combine clsx for conditional composition with twMerge from @weapp-tailwindcss/merge for conflict resolution, so the last conflicting class wins. The runtime packages already handle mini-program escaping, so do not escape classes manually before merging.

What is the difference between @weapp-tailwindcss/cva and @weapp-tailwindcss/variants?▼

Use cva for single-slot components like Button or Badge, and variants (tv) for multi-slot components like Card or Modal that need slots, compound variants, or Tailwind Variants semantics. Both handle mini-program class escaping automatically.

Why are my dynamic Tailwind classes missing in the mini-program build?▼

The build-time generator only matches complete class literals via classNameSet, so interpolated strings like bg-${color}-500 are never scanned. Use full literal classes, conditional literals, or enum maps instead of partial token concatenation.

When should I use weappTwIgnore instead of global ignore rules?▼

Use weappTwIgnore only for specific strings that must pass through unchanged, and register custom tag function names in ignoreTaggedTemplateExpressionIdentifiers. It is precise local protection, not a way to auto-generate CSS for unscanned dynamic classes.

Does @weapp-tailwindcss/merge support custom Tailwind tokens?▼

Yes, but only sync merge configuration when a custom token changes conflict classification, such as a numeric font size like text-32 being misread as a color. Use the create/extend API and add conflict test cases to verify behavior.

Can I use the merge slim or lite subpath entries by default?▼

No, the ./slim and ./lite subpaths of @weapp-tailwindcss/merge use trimmed rule sets and should only be chosen when you explicitly accept that reduction. The main entry remains the default for full conflict semantics.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio

tailwind-impl-build-postcss-cli

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

Official
Intermediate
partme-aipartme-ai
610

ant-design-mini

Guide Ant Design Mini component usage for Alipay and WeChat mini-programs.

Official
Intermediate
NevaberryNevaberry
22

tailwind-knowledge-patch

Update Tailwind CSS 4.1 utilities, variants, and directives for code generation.

Official
Intermediate
aranlucasaranlucas

uniwind

Style React Native components with Tailwind CSS utility classes.

Community
Intermediate