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

weapp-tailwindcss-custom-build

Integrates weapp-tailwindcss Core API into custom bundlers and build pipelines.

1.9k|102|Updated Jan 17, 2022
Search Tags:#build pipeline#tailwindcss#Bundler#hmr#mini-program#compiler api#style injection
One-click install
npx skills add https://github.com/sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-custom-build
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: weapp-tailwindcss-custom-build
Source: https://github.com/sonofmagic/weapp-tailwindcss/tree/main/skills/weapp-tailwindcss-custom-build
Command: npx skills add https://github.com/sonofmagic/weapp-tailwindcss --skill weapp-tailwindcss-custom-build

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires weapp-tailwindcss, weapp-style-injector, and includes references (resource) components.

What problem does it solve?

It guides developers who maintain a self-built bundler, adapter, or advanced asset pipeline to integrate weapp-tailwindcss correctly, covering compiler sessions, module graphs, watch/HMR invalidation, source maps, and subpackage style isolation without misusing output-directory scanning.

Core Features & Use Cases

  • Core Compiler Integration: Design createCompiler() lifecycles with root sessions, immutable snapshots, revisions, and precise invalidate() handling for watch and HMR.
  • Bundler Adapter Patterns: Apply shared graph-mode timing for Vite, Webpack, Rspack, Gulp, Rollup, and Rolldown adapters while keeping module graphs and asset write-back in the bundler.
  • Style Injection & Subpackage Isolation: Configure weapp-style-injector and per-scope Tailwind entries so main, normal, and independent subpackages keep isolated style assets.
  • Use Case: A team building an in-house mini-program bundler uses this Skill to wire Tailwind CSS generation, template/JS transforms, and HMR invalidation into their own module graph.

Quick Start

Ask the assistant to design a custom bundler integration for weapp-tailwindcss using the Core API with watch and subpackage style injection support.

Frequently Asked Questions about weapp-tailwindcss-custom-build

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

FAQPage Schema
How do I integrate weapp-tailwindcss into a custom bundler?▼

Use createCompiler() from weapp-tailwindcss/core to manage Tailwind root sessions and snapshots, then feed sources and candidates from your own module graph. Write results back through your bundler's asset APIs rather than scanning output directories.

What is the difference between createCompiler and createContext in weapp-tailwindcss?▼

createCompiler() manages root sessions, revisions, and immutable snapshots for framework adapters, while createContext() preserves the legacy automatic runtime collection mode. Do not mix both state models in one generation transaction.

Does weapp-tailwindcss support watch mode and HMR in custom builds?▼

Yes, call compiler.invalidate() with exact changed module IDs to get affected roots, regenerate only those roots, and re-transform reachable templates and JavaScript with the new snapshot. Module IDs are opaque and not normalized by the core.

How do I isolate styles for independent subpackages in mini-programs?▼

Give each independent subpackage its own Tailwind entry and style assets, and model scope mappings with styleInjector rules or framework resolvers. Never reuse another subpackage's CSS text or runtime class set.

When should I use the setup skill instead of the custom build skill?▼

Use the setup skill for ordinary framework projects and CLI configuration with official Vite, Webpack, Rspack, or Gulp plugins. The custom build skill is only for self-developed bundlers, Node API adapters, or advanced asset pipelines.

Related Skills

Explore More Software Engineering Skills→
mrdonleemrdonlee

tailwind-v4-shadcn

Configure Tailwind CSS v4 and shadcn/ui with CSS-variable theming in Vite React projects.

Community
Advanced
oven-shoven-sh
95.3k

writing-dev-server-tests

Automate validation of hot-reloading and dev server behavior with test utilities.

Official
Advanced
0xarcano0xarcano

expo-tailwind-setup

Configures Tailwind CSS v4 with NativeWind v5 and react-native-css for Expo apps.

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