README_en.md

weapp-tailwindcss

简体中文(zh-cn) | English

weapp + tailwindcss all-round solution.

[Docs deployed in China] | [Github Page]

• Features
  • Plugin Introduction
• Requirements
• AI Skill (For Users)
• Installation and usage
• Migrating from v1 to v2
• Configuration reference
• Tailwindcss arbitrary values
• FAQ
• Watch-mode hot-update E2E
• Changelog
• Related projects
  • CLI tools
  • template
    • how to choose？
    • Use uni-app cli to build vscode development
    • Build and develop with hbuilderx
    • Use tarojs to build vscode development
    • Native applet development template
  • tailwindcss plugin
  • tailwindcss preset
• Bugs & Issues
• License

Features

not only webpack	Mainstream framework and native development support

This plugin allows you to use tailwindcss in weapp. At the same time, it provides the functions of tailwindcss class name escape.

What's weapp ? it is a program running in WeChat,Alipay or other third-party applications. weapp is a new open capability. Developers can quickly develop a small program. Mini Programs can be easily obtained and disseminated within WeChat. At the same time, have an excellent user experience.

The core plugin supports webpack/vite/gulp for building, covering almost all mainstream development frameworks for weapp.

These plugins can automatically identify and accurately handle all tailwindcss tool classes to adapt to the applet environment. At the same time, these plugins also can compress and confuse the tool class names generated by tailwindcss. This ability shortens the length of css selectors, reduces the size of generated styles, and makes class names unreadable in production.

Plugin Introduction

The UnifiedWebpackPluginV5 exported from weapp-tailwindcss/webpack is a core plugin that can be used by all frameworks that use webpack for packaging.

The UnifiedViteWeappTailwindcssPlugin exported from weapp-tailwindcss/vite is a dedicated plugin for vite, and the configuration items and usage are consistent with the webpack plugin.

And our gulp plugin method, can be exported from weapp-tailwindcss/gulp.

Currently, these plugins support the latest version of the tailwindcss v3.x.x version and webpack5, vite, and gulp.

If you are still using the tailwindcss@2 version, then you should use the 1.x version of this plugin. weapp-tailwindcss@4 requires Node.js ^20.19.0 || >=22.12.0. LTS is recommended. See nodejs/release.

Requirements

• Node.js ^20.19.0 or >=22.12.0 (LTS recommended)

AI Skill (For Users)

If you want AI to integrate weapp-tailwindcss in your business project with stable best practices, install the official Skill first:

npx skills add sonofmagic/skills --skill weapp-tailwindcss

After installation, AI can help you with:

• Fast setup for uni-app / taro / uni-app x
• Copy-paste ready commands and config snippets
• Troubleshooting for rpx ambiguities, JS string class issues, and space-y/space-x behavior

The Skill workflow (short version):

1. Route the request type first: setup, migration, troubleshooting, or coding-style guidance
2. Collect minimum context: framework, bundler, targets, Tailwind version, and whether you use pnpm@10+
3. Return an actionable plan with validation steps and rollback guidance

Read more:

• Skill System
• Tailwind Writing Best Practices (Skill Reference)

Installation and usage

Migrating from v1 to v2

Configuration reference

Tailwindcss arbitrary values

FAQ

Changelog

Related projects

CLI tools

weapp-ide-cli: A WeChat developer cli tool. Quickly and conveniently starts the ide directly for login, development, preview, upload code, and other functions.

template

how to choose？

If you just develop a combination of weapp + h5, then using vscode template is enough

If the key platform of your project is app, it is recommended to use the hbuilderx template, because hbuilderx comes with a toolchain for app construction and debugging, which can better support your development.

Use uni-app cli to build vscode development

uni-app-vite-vue3-tailwind-vscode-template

uni-app-vue2-tailwind-vscode-template

Build and develop with hbuilderx

uni-app-vue3-tailwind-hbuilder-template

Use tarojs to build vscode development

taro-react-tailwind-vscode-template

Native applet development template

weapp-tailwindcss-gulp-template(gulp打包)

tailwindcss plugin

weapp-tailwindcss-children

tailwindcss preset

tailwindcss-miniprogram-preset

Watch-mode hot-update E2E

The repository now includes a dedicated watch-mode E2E chain (separate from build-output snapshot checks) to verify whether hot updates are effective and how long they take in real demo projects.

• Run all cases: pnpm e2e:watch
• Run a single case: pnpm e2e:watch:taro / pnpm e2e:watch:uni / pnpm e2e:watch:mpx / pnpm e2e:watch:weapp-vite
• Include prebuild path: pnpm e2e:watch:full

This chain injects complex Tailwind class combinations (arbitrary values, decimals, calc(), pseudo-element variants, etc.) and reports both hot update and rollback latency.

Bugs & Issues

This plugin is currently under rapid development, if you encounter a Bug or want to raise an Issue, Welcome to submit here

License

MIT

Copyright (c) 2022-present, ice breaker