Hysen Labs
Open-source project
sonofmagic/weapp-tailwindcss avatar
sonofmagic

weapp-tailwindcss

Bring Tailwind CSS to every platform! 把 Tailwind CSS 的原子化开发体验带到全端!

1,847 stars101 forksTypeScriptMIT
DEEP OPEN-SOURCE ANALYSIS

Weapp Tailwindcss brings Tailwind's atomic classes to miniprograms, React Native and Lynx

The toolchain takes one Tailwind input and produces correct output per target platform, covering Web, WeChat and other miniprograms, App WebView, uni app x and React Native.

What problem it solves

Weapp Tailwindcss is a Tailwind CSS toolchain aimed at every platform, and the README states its goal as bringing the atomic development experience to the full range of targets. The core package handles Tailwind CSS v4 CSS generation, class name translation, platform compatibility and builder lifecycle integration, while platform and runtime packages extend that ability to different renderers and app frameworks. The problem it addresses is producing the correct artifact from one Tailwind input per target end, instead of maintaining separate class rules for each platform. The current main line maintains Tailwind CSS v4, and platform integrations reuse the core generator, but each target still respects the CSS properties and selectors its real runtime supports. The project is documented at tw.icebreaker.top with a quick start, framework guides and a CLI reference.

Where it applies

The support table maps targets to entry points. Web and H5 use the vite, webpack, rspack, gulp or Node API variants. Miniprograms use the corresponding builder entry or the CLI with a weapp target, covering WeChat, Alipay, Douyin and QQ miniprograms. App WebView uses the framework integration for uni app and Taro. Uni app x uses the vite entry for Android, iOS and HarmonyOS native builds. React Native and Expo use a dedicated package for Metro, Babel and the style manifest, and ReactLynx or Rspeedy use the lynx package. A quick start shows installing tailwindcss and weapp-tailwindcss, creating a CSS first entry with an import and source globs, and registering the WeappTailwindcss plugin after the framework plugin in a Vite config, with a rem to rpx option for miniprogram units. The CLI package adds standalone CSS build, watch and canonicalize with stdin and stdout support.

Boundaries and requirements

The README is careful about what the tool does not do. Because Tailwind CSS v4 generation is taken over by weapp Tailwindcss, miniprogram builds should not also register tailwindcss, the postcss plugin or the vite plugin as a second generator. JavaScript and WXML class names are only translated for the precise candidate set the Tailwind generator already produced, with no heuristic replacement of ordinary business strings. Builder integration keeps source, style, dependency and watch relationships through lifecycle APIs rather than by scanning the project directory after the fact. The environment requires Node.js 22.18 or later, or 24.11 or later, and a compatible Tailwind version. The repository carries 1,847 stars and 101 forks with 15 open issues, the default branch is main, and the license is MIT. The package family includes postcss, react native, lynx, runtime, merge, variants and cva packages plus typography and UI helpers.

Editorial conclusion

Weapp Tailwindcss is an MIT licensed toolchain on the main branch with 1,847 stars that targets Tailwind CSS v4 and spans Web, miniprograms, App WebView, uni app x, React Native and Lynx, requiring Node 22.18 or 24.11 and later.

DEEP OPEN-SOURCE ANALYSIS

Official sources

Community notes

Community notes