跳到主要内容
Tailwind CSS 4 + 小程序生成链路

weapp-tailwindcss

AtomGit G-Star 毕业项目认证徽章

一套 CSS-first 输入,交付 Web 与小程序两端样式。

保留 `WeappTailwindcss` 接管生成、转义与运行时边界,不在小程序构建里重复注册官方 Tailwind 插件。

Web小程序AndroidiOSHarmonyOS
generatortarget: web | weapp
Tailwind CSS 入口入口

@import "tailwindcss" + @source@import + @source

classNameSet 精确命中命中

只转换已生成类名只转已生成类名

Web / Weapp 分端输出输出

target 自动切换Web 与小程序分端

输出稳定 CSS + 精确类名转义
TailwindCSS 4 / @source
框架uni-app / Taro / Mpx / Weapp-vite
构建器Webpack / Vite / Gulp
运行时merge / cva / variants

守住工程边界,接管生成与转译

复用 Tailwind CSS 4 输入,把源码扫描、样式生成、类名转义和运行时工具放在一条工程链路里。

构建器接管 Tailwind 生成

Webpack、Vite、Gulp 与自定义 Node 流程都由 weapp-tailwindcss 接管输出,小程序构建不再叠加官方 Tailwind 生成插件。

精确转译

JS 与模板只转换 Tailwind 已生成类名,避免业务字符串被误伤。

Web / 小程序分端输出

同一份 CSS-first 输入,按环境生成浏览器 CSS 或小程序 CSS。

跨生态落地

覆盖 uni-app、Taro、Mpx、Weapp-vite、原生小程序以及 Webpack、Vite、Gulp 链路。

运行时工具族

merge、variants、cva 在小程序端保持转义前后一致。

同一套 Tailwind 输入,按目标端交付产物

H5/Web 保持 Tailwind 原生语义;小程序补齐选择器、单位、转义与运行时边界。团队统一入口,再按框架接入。

查看配置项
快速开始从 Tailwind CSS 4 与 CSS-first 入口开始。框架接入按 uni-app、Taro、Mpx、Weapp-vite 或原生小程序选择配置。配置项类型、插件与配置项的完整参考。AI / llms让模型读取精简索引,减少过期配置。社区加入交流群,反馈真实框架问题。