New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Weapp Tailwindcss Setup

by weapp-tailwindcss in weapp-tailwindcss/weapp-tailwindcss

为新项目配置当前 weapp-tailwindcss v5 与 Tailwind CSS 4，覆盖 uni-app、uni-app x、Taro、Mpx、原生小程序、weapp-vite、Vite、Webpack 5、Rspack、Gulp、独立 CLI 及小程序/H5/Web/App 多端。Use when setting up, installing, integrating…

MITAuto-check passedMobile

Install Weapp Tailwindcss Setup

skills CLI
$ npx skills add weapp-tailwindcss/weapp-tailwindcss --skill weapp-tailwindcss-setup -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install weapp-tailwindcss/weapp-tailwindcss weapp-tailwindcss-setup --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/weapp-tailwindcss/weapp-tailwindcss.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/weapp-tailwindcss-setup .claude/skills/weapp-tailwindcss-setup && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
weapp-tailwindcss-setup
GitHub stars
1.9k
Token cost
~406 tokens
SKILL.md length
111 words
Files
3 (incl. references)
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

为新项目配置当前 weapp-tailwindcss v5 与 Tailwind CSS 4，覆盖 uni-app、uni-app x、Taro、Mpx、原生小程序、weapp-vite、Vite、Webpack 5、Rspack、Gulp、独立 CLI 及小程序/H5/Web/App 多端。Use when setting up, installing, integrating…

  • Works in 8 steps: 读取项目的 package.json、Tailwind CSS… → 确认框架、构建器、目标端、包版本、Node 版本；HBuilderX… → 读取… → …
  • Choosing a framework configuration
  • SKILL.md covers 工作流, 配置原则 and 输出要求
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Weapp Tailwindcss Setup is an agent skill from weapp-tailwindcss/weapp-tailwindcss. 为新项目配置当前 weapp-tailwindcss v5 与 Tailwind CSS 4，覆盖 uni-app、uni-app x、Taro、Mpx、原生小程序、weapp-vite、Vite、Webpack 5、Rspack、Gulp、独立 CLI 及小程序/H5/Web/App 多端。Use when setting up, installing, integrating, choosing a framework configuration, or building CSS with weapp-tw; 不用于旧版迁移、故障诊断、自研构建器、Expo React Native 或 ReactLynx。

Its SKILL.md is about 410 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `agents/openai.yaml` and `references/framework-matrix.md`).

It sits in Mobile, covering Cross-platform mobile apps and CSS and styling. It works with Tailwind CSS, Vite, React Native and webpack. The repository describes itself as: Bring Tailwind CSS to every platform! 把 Tailwind CSS 的原子化开发体验带到全端！. The licence is MIT.

When your agent uses it

  • Choosing a framework configuration
  • Building CSS with weapp-tw
  • 不用于旧版迁移、故障诊断、自研构建器、Expo React Native 或 ReactLynx

Example prompts

  • “/weapp-tailwindcss-setup”

Workflow steps

8 steps, taken from the first numbered list in SKILL.md.

  1. 读取项目的 package.json、Tailwind CSS 入口、框架配置和实际运行脚本。
  2. 确认框架、构建器、目标端、包版本、Node 版本；HBuilderX 项目同时确认 IDE 版本。
  3. 读取 references/framework-matrix.md，选择唯一匹配的注册位置和入口模式。
  4. 如果用户只需要单个 CSS 入口、stdin/stdout 或 canonicalize，选择独立 CLI；完整小程序项目继续使用 bundler 集成。
  5. bundler 项目先建立 Tailwind CSS 4 纯 CSS 入口，再让框架实际引入该入口，最后配置绝对路径 cssEntries。
  6. 只注册一次 WeappTailwindcss。保留业务 PostCSS 插件，但不要在同一次受管构建中再注册 Tailwind 官方生成插件。
  7. 多端项目保留 H5/Web 链路，让插件自动选择目标；只有明确完全跳过插件的独立目标才使用 disabled。
  8. 运行开发态和目标端构建，用新增任意值 class 验证生成、转译与 HMR。

What it can do on your machine

Read from SKILL.md and the folder at commit 7b3c2c1. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Weapp Tailwindcss Setup loads about 406 tokens when it runs, and up to ~1.8k if it reads all its reference files. Until then it costs about 84 tokens; SKILL.md has 111 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~84
When it runs · the whole SKILL.md, loaded when a task matches
~406
With references · SKILL.md plus every file in references/, read only if the agent opens them
~1.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from weapp-tailwindcss/weapp-tailwindcss at commit 7b3c2c1, republished under its MIT licence (© weapp-tailwindcss). 111 words, ~406 tokens.

Download SKILL.mdSave it as .claude/skills/weapp-tailwindcss-setup/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
weapp-tailwindcss-setup
description
为新项目配置当前 weapp-tailwindcss v5 与 Tailwind CSS 4，覆盖 uni-app、uni-app x、Taro、Mpx、原生小程序、weapp-vite、Vite、Webpack 5、Rspack、Gulp、独立 CLI 及小程序/H5/Web/App 多端。Use when setting up, installing, integrating, choosing a framework configuration, or building CSS with `weapp-tw`; 不用于旧版迁移、故障诊断、自研构建器、Expo React Native 或 ReactLynx。

weapp-tailwindcss setup

基于用户真实项目生成最小、可复制、可验证的接入配置。

工作流

  1. 读取项目的 package.json、Tailwind CSS 入口、框架配置和实际运行脚本。
  2. 确认框架、构建器、目标端、包版本、Node 版本；HBuilderX 项目同时确认 IDE 版本。
  3. 读取 references/framework-matrix.md，选择唯一匹配的注册位置和入口模式。
  4. 如果用户只需要单个 CSS 入口、stdin/stdout 或 canonicalize，选择独立 CLI；完整小程序项目继续使用 bundler 集成。
  5. bundler 项目先建立 Tailwind CSS 4 纯 CSS 入口，再让框架实际引入该入口，最后配置绝对路径 cssEntries。
  6. 只注册一次 WeappTailwindcss。保留业务 PostCSS 插件，但不要在同一次受管构建中再注册 Tailwind 官方生成插件。
  7. 多端项目保留 H5/Web 链路，让插件自动选择目标；只有明确完全跳过插件的独立目标才使用 disabled。
  8. 运行开发态和目标端构建，用新增任意值 class 验证生成、转译与 HMR。

配置原则

  • 当前包 manifest 的 Node engine 是 ^22.18.0 || >=24.11.0；不要把旧的 >=22.12.0 文案当成当前精确约束。
  • HBuilderX 使用当前依赖时至少为 5.11，并用绝对路径避免 IDE 改变 process.cwd() 的影响。
  • Tailwind CSS 入口不要直接放在 Sass/Less/Stylus 文件中。
  • 扫描只覆盖业务源码，默认排除 node_modules、dist、unpackage；uni-app 还应避免无差别扫描 uni_modules。
  • 普通业务项目优先使用官方 bundler 插件；只有自研构建器才转到 $weapp-tailwindcss-custom-build。
  • Expo/React Native 转到 $weapp-tailwindcss-react-native，不要套用小程序 bundler 配置。
  • ReactLynx/Rspeedy 转到 $weapp-tailwindcss-lynx，不要套用 React Native manifest 或小程序 class 转义。
  • CLI 默认 --target web；--target weapp 只对生成 CSS 做小程序兼容转换，不处理模板、脚本或已有 WXSS。

输出要求

输出框架与目标端结论、安装命令、逐文件完整配置、运行命令、预期产物和回滚点。不要只给选项列表。

© weapp-tailwindcss, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in skills/weapp-tailwindcss-setup of weapp-tailwindcss/weapp-tailwindcss.

  • SKILL.md
  • agents/openai.yaml
  • references/framework-matrix.md

Open the folder on GitHubat commit 7b3c2c1

Compare with similar skills

Weapp Tailwindcss Setup next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Weapp Tailwindcss Setup compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Weapp Tailwindcss Setup this skillweapp-tailwindcss/weapp-tailwindcss1.9k—~406Automated safety check: PassMIT
Expo Tailwind SetupCherryHQ/cherry-studio-app4k8 repos~3kAutomated safety check: PassMIT
UniwindCherryHQ/cherry-studio-app4k—~20kAutomated safety check: WarnAGPL-3.0
UniwindOhh-889/skyroc795—~1.4kAutomated safety check: PassMIT
Setup React Native Bundle Discoveryretyui/react-native-bundle-discovery152—~2.5kAutomated safety check: PassNone
Expo Web To Nativeexpo/skills2.7k—~2.6kAutomated safety check: PassMIT

Similar skills

  • Expo Tailwind Setup

    CherryHQ/cherry-studio-app

    Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

    4k GitHub starsUsed in 8 repos~3k tokens
    MobileAuto-check passed

  • Uniwind

    CherryHQ/cherry-studio-app

    Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from CherryHQ/cherry-studio-app.

    4k GitHub stars~20k tokensUpdated 4 days ago
    MobileAuto-check: warnings

  • Uniwind

    Ohh-889/skyroc

    Uniwind — Tailwind CSS v4 styling for React Native. An agent skill from Ohh-889/skyroc.

    795 GitHub stars~1.4k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Setup React Native Bundle Discovery

    retyui/react-native-bundle-discovery

    Install ONLY the react-native-bundle-discovery package and wire it into a React Native project so a bundle report is generated when the BUNDLEANALYZER env var is set.

    152 GitHub stars~2.5k tokensUpdated today
    MobileAuto-check passed

  • Expo Web To Native

    expo/skills

    Official

    Migrate an existing web React app to a native iOS/Android app with Expo.

    2.7k GitHub stars~2.6k tokensUpdated today
    MobileAuto-check passed

  • React Native Dev

    aiskillstore/marketplace

    React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and…

    430 GitHub starsUsed in 1 repo~1.8k tokens
    MobileAuto-check passed

More from weapp-tailwindcss/weapp-tailwindcss

All 10 skills in this repo

  • Content Research Writer

    weapp-tailwindcss/weapp-tailwindcss

    Assists in writing high-quality content by conducting research, adding citations, improving hooks, iterating on outlines, and providing real-time feedback on each section.

    1.9k GitHub starsUsed in 25 repos~3.5k tokens
    Auto-check passed

  • Scientific Critical Thinking

    weapp-tailwindcss/weapp-tailwindcss

    Evaluate research rigor. An agent skill from weapp-tailwindcss/weapp-tailwindcss.

    1.9k GitHub starsUsed in 23 repos~5.9k tokens
    Auto-check: notes

  • Weapp Tailwindcss Custom Build

    weapp-tailwindcss/weapp-tailwindcss

    将 weapp-tailwindcss 集成到自研构建器或高级流水线，覆盖 weapp-tailwindcss/core、generator、Vite/Webpack/Rspack/Rollup/Rolldown/Gulp 生命周期、ModuleGraph、Tailwind Scanner/source candidates、watch/HMR、source…

    1.9k GitHub stars~502 tokensUpdated today
    Auto-check passed

  • Weapp Tailwindcss

    weapp-tailwindcss/weapp-tailwindcss

    协调 weapp-tailwindcss 全端任务并提供当前安全基线。Use when 用户泛化地询问 weapp-tailwindcss、Tailwind CSS in mini-programs、Web CLI、React Native 或 ReactLynx，或尚未明确是接入、迁移、排障、运行时、自定义构建还是原生跨端集成；具体任务优先路由到对应专用 skill。

    1.9k GitHub stars~428 tokensUpdated today
    Auto-check passed

  • Weapp Tailwindcss Lynx

    weapp-tailwindcss/weapp-tailwindcss

    为 ReactLynx + Rspeedy 配置 @weapp-tailwindcss/lynx 0.3.2 与 Tailwind CSS 4，覆盖 Rspeedy plugin、Lynx 原生 CSS、静态 className、theme 变量静态化、任意值、encoder 警告和 iOS/Android 运行端验证。Use for ReactLynx, Rspeedy, Lynx…

    1.9k GitHub stars~374 tokensUpdated today
    Auto-check passed

  • Weapp Tailwindcss Migrate

    weapp-tailwindcss/weapp-tailwindcss

    将现有 weapp-tailwindcss 项目迁移到当前 v5/Tailwind CSS 4 生成链路，处理旧 weapp-tw patch、旧版 CLI init/Sass/Less/目录扫描、tailwindcss-patch、官方 PostCSS/Vite 插件、相对 cssEntries、H5 disabled、Webpack 4、Node/HBuilderX/ESM 要求。Use…

    1.9k GitHub stars~305 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Weapp Tailwindcss Setup

What does Weapp Tailwindcss Setup do?

为新项目配置当前 weapp-tailwindcss v5 与 Tailwind CSS 4，覆盖 uni-app、uni-app x、Taro、Mpx、原生小程序、weapp-vite、Vite、Webpack 5、Rspack、Gulp、独立 CLI 及小程序/H5/Web/App 多端。Use when setting up, installing, integrating…. Weapp Tailwindcss Setup is an agent skill from weapp-tailwindcss/weapp-tailwindcss.

When should I use Weapp Tailwindcss Setup?

Weapp Tailwindcss Setup fits situations like: choosing a framework configuration; building CSS with weapp-tw; 不用于旧版迁移、故障诊断、自研构建器、Expo React Native 或 ReactLynx.

How do I install Weapp Tailwindcss Setup in Claude Code?

Run `npx skills add weapp-tailwindcss/weapp-tailwindcss --skill weapp-tailwindcss-setup -a claude-code`. Or copy the skill folder (skills/weapp-tailwindcss-setup in weapp-tailwindcss/weapp-tailwindcss) into .claude/skills/weapp-tailwindcss-setup in your project. Claude Code loads it when a task matches its description.

How do I install Weapp Tailwindcss Setup in Codex?

Run `npx skills add weapp-tailwindcss/weapp-tailwindcss --skill weapp-tailwindcss-setup -a codex`. Or copy the skill folder (skills/weapp-tailwindcss-setup in weapp-tailwindcss/weapp-tailwindcss) into .agents/skills/weapp-tailwindcss-setup in your project. Codex loads it when a task matches its description.

Can I use Weapp Tailwindcss Setup in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add weapp-tailwindcss/weapp-tailwindcss --skill weapp-tailwindcss-setup -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/weapp-tailwindcss-setup, .gemini/skills/weapp-tailwindcss-setup, .github/skills/weapp-tailwindcss-setup and .opencode/skills/weapp-tailwindcss-setup in your project.

What does Weapp Tailwindcss Setup need to run?

SKILL.md names no scripts, command-line tools or credentials: Weapp Tailwindcss Setup is instructions for the agent only.

Does Weapp Tailwindcss Setup access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Weapp Tailwindcss Setup safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Weapp Tailwindcss Setup use?

Weapp Tailwindcss Setup is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Weapp Tailwindcss Setup use?

About 406 tokens (SKILL.md is roughly 1.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.4k tokens, read only when the agent opens those files.

What are the alternatives to Weapp Tailwindcss Setup?

Skills that share tags, products or a category with Weapp Tailwindcss Setup: Expo Tailwind Setup (CherryHQ/cherry-studio-app, 4k stars), Uniwind (CherryHQ/cherry-studio-app, 4k stars), Uniwind (Ohh-889/skyroc, 795 stars) and Setup React Native Bundle Discovery (retyui/react-native-bundle-discovery, 152 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Weapp Tailwindcss Setup?

weapp-tailwindcss (a GitHub organization) maintains it in weapp-tailwindcss/weapp-tailwindcss, which has 1,864 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 7, 2026.

Source: weapp-tailwindcss/weapp-tailwindcss on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.