跳到主要内容
weapp.dev
返回工具栈
稳定版

weapp-tailwindcss

把 Tailwind CSS 的原子化体验带到全端

在小程序和跨端框架中使用熟悉的 Tailwind CSS 工作流,覆盖样式生成、转义、运行时变量与多平台差异。

React Vite Tailwind CSS v4 小程序目标渲染结果
官方回归用例的小程序目标输出。

安装

需要在微信、支付宝、抖音小程序或跨端框架中复用 Tailwind CSS 工作流的前端团队。

pnpm add -D weapp-tailwindcss

真实运行结果

以下截图来自项目官方仓库中的 demo 或回归基线,并在本站本地化保存。

React Vite Tailwind CSS v4 小程序目标渲染结果
官方回归用例的小程序目标输出。
React Vite Tailwind CSS v4 Web 目标渲染结果
同一用例的 Web 目标输出,用于验证跨端一致性。

核心能力

  • Tailwind CSS v4
  • 多端模板转译
  • 跨框架集成
  • 编译性能优化

常见用法

  1. 01在小程序模板中使用 Tailwind CSS 原子类
  2. 02处理多平台模板和样式差异
  3. 03在 Taro、uni-app 等跨端项目中统一样式构建

支持平台

WeChatAlipayDouyinuni-appTaroMpx
当前版本v5.4.22026年8月31日
周下载1.1万
GitHub Stars1855

常见问题

weapp-tailwindcss 解决什么问题?

它把 Tailwind CSS 的原子化样式工作流适配到小程序和跨端框架,处理模板转译、样式生成和多平台差异。

weapp-tailwindcss 支持哪些项目?

它支持微信、支付宝、抖音小程序,并可用于 Taro、uni-app 等跨端框架项目。

未来文档路径

/docs/weapp-tailwindcss/

聚合文档上线后,此路径将成为 canonical 地址。

统计偏好

Cloudflare 无 Cookie 基础统计始终启用。百度统计和 Google Analytics 默认用于了解访问与关键交互,你可以随时关闭。