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

weapp-tailwindcss-setup

Configures weapp-tailwindcss v5 with Tailwind CSS 4 across mini-program and web frameworks.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Setting up Tailwind CSS 4 for mini-programs and multi-platform apps requires different registration points, entry patterns, and target handling per framework, and misconfiguration leads to missing styles or broken builds. This Skill generates minimal, verifiable integration configurations matched to the user's actual project.

Core Features & Use Cases

  • Framework-matched configuration: Reads the project's package.json, framework config, and build scripts, then selects the correct registration entry for uni-app, uni-app x, Taro (Webpack 5 or Vite), Mpx, weapp-vite, Vite, Webpack 5, Rspack, Gulp, or native mini-programs.
  • Standalone CLI setup: Configures @weapp-tailwindcss/cli (weapp-tw) for single CSS entry builds, stdin/stdout, watch mode, source maps, and class canonicalization with web or weapp targets.
  • Boundary routing: Redirects Expo/React Native, ReactLynx/Rspeedy, and custom builder scenarios to the appropriate dedicated skills instead of applying mini-program bundler config.
  • Use Case: A developer with a uni-app Vue3 Vite project asks for Tailwind integration and receives the exact vite.config.ts registration with absolute cssEntries, the pure CSS entry file, install commands, and verification steps including arbitrary-value class HMR checks.

Quick Start

Use the weapp-tailwindcss-setup skill to configure Tailwind CSS 4 for my Taro Webpack 5 project targeting WeChat mini-program and H5.

Frequently Asked Questions about weapp-tailwindcss-setup

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

FAQPage Schema
How do I set up Tailwind CSS 4 in a uni-app Vite project?▼

Register WeappTailwindcss from weapp-tailwindcss/vite after the uni() plugin in vite.config.ts, with an absolute cssEntries path to a pure CSS entry file. The entry must be actually imported by the app, and scanning should exclude node_modules, dist, unpackage, and uni_modules.

How to configure weapp-tailwindcss for Taro Webpack 5?▼

Register the WeappTailwindcss webpack plugin in both mini.webpackChain and h5.webpackChain inside config/index, reusing the same options object with tailwindcssBasedir and absolute cssEntries. Both ends must be registered to cover mini-program and H5 builds.

Does weapp-tailwindcss support React Native or Expo projects?▼

No, mini-program bundler configuration does not apply to React Native. Expo and React Native projects should use the dedicated @weapp-tailwindcss/react-native integration with Metro, and ReactLynx/Rspeedy projects use @weapp-tailwindcss/lynx instead.

What Node version does weapp-tailwindcss v5 require?▼

The current package manifest requires Node ^22.18.0 or >=24.11.0. HBuilderX projects additionally need IDE version 5.11 or later and should use absolute paths to avoid process.cwd() changes.

When should I use the weapp-tw CLI instead of a bundler plugin?▼

Use @weapp-tailwindcss/cli when you only need a single CSS entry, stdin/stdout, watch mode, source maps, or class canonicalization. Full mini-program projects should keep bundler integration, since --target weapp only converts generated CSS and does not process templates or scripts.

Why is my Tailwind entry not generating styles in a mini-program build?▼

Common causes are placing the Tailwind entry inside Sass/Less/Stylus files, missing actual import of the CSS entry by the app, or registering the plugin twice alongside the official Tailwind plugin. Verify with arbitrary-value classes like w-[173px] and check HMR during development.

Related Skills

Explore More Software Engineering Skills→
dang0705dang0705

uni-helper

Apply Vite plugins and TypeScript support to uni-app projects.

Community
Advanced
partme-aipartme-ai
610

uniapp-mini-guide

Guide uni-app mini program development with configuration, components, and API usage.

Official
Basic
moughamirmoughamir

tailwindcss-debugging

Diagnose missing or overridden Tailwind CSS utilities through build output verification.

Community
Intermediate
epiphanyappsepiphanyapps

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind v5 and react-native-css.

Official
Intermediate