weapp-tailwindcss

Use Tailwind classes in mini-app styles

Write Tailwind utilities in an existing mini-app. The plugin handles transforms and size constraints. It does not own routing or your bundler lifecycle.

Maintained by: sonofmagic and contributors

Read the docs View source View on npm

React Vite Tailwind CSS v4 mini-program target rendering — Mini-program target output from the official regression suite.

Install

ForFrontend teams that want one Tailwind CSS workflow across mini-apps and cross-platform projects.

pnpm add -D weapp-tailwindcss

Real runtime output

These images come from official project demos or regression baselines and are stored locally on this site.

React Vite Tailwind CSS v4 Web target rendering — Web target output from the same case, used to verify cross-platform parity.

ENGINEERING PROOF

Mini-app style integration

Start with a real config, command, or boundary note when deciding if this project fits your codebase.

app.cssStable

@import 'tailwindcss';

/* classes stay in your templates */
<button class="px-4 py-2 text-white">
  开始构建
</button>

Core capabilities

Tailwind CSS v4
Template transforms
Framework integrations
Build optimization

Common use cases

01Use Tailwind CSS utilities in mini-app templates
02Handle platform-specific template and style differences
03Share a styling build across Taro and uni-app projects

Platforms

WeChatAlipayDouyinuni-appTaroMpx

weapp-vite Varo

Current version: v5.3.5; Aug 25, 2026
Weekly downloads: 11.6K
GitHub Stars: 1.8K

Frequently asked questions

What problem does weapp-tailwindcss solve?

It adapts Tailwind CSS utility workflows to mini-apps and cross-platform frameworks while handling template transforms, style generation, and platform differences.

Which projects can use weapp-tailwindcss?

It supports WeChat, Alipay, and Douyin mini-apps, as well as cross-platform projects built with Taro and uni-app.

Future documentation path

`/docs/weapp-tailwindcss/`

This path will become canonical when aggregated documentation launches.