README_en.md

weapp-tailwindcss

简体中文(zh-cn) | English

weapp + tailwindcss all-round solution.

[Docs deployed in China] | [Github Page] | [1.x Docs]

• Features
  • Plugin Introduction
• Installation and usage
• Migrating from v1 to v2
• Configuration reference
• Tailwindcss arbitrary values
• FAQ
• 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 and mangle.

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. Also, make sure your nodejs version >=16. At present, the long-term maintenance version (even-numbered version) below 16 has ended its life cycle. It is recommended to install the LTS version of nodejs, See [nodejs/release](https://github.com/ nodejs/release)

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打包)

weapp-native-mina-tailwindcss-template(webpack打包)

tailwindcss plugin

weapp-tailwindcss-children

tailwindcss preset

tailwindcss-miniprogram-preset

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