weapp-tailwindcss
简体中文(zh-cn) | English
小程序+tailwindcss全方面解决方案
想试试在小程序里使用CSS-in-JS思想？ 👉🏻👉🏻试试weapp-pandacss
[国内部署的文档地址] | [备用Github Page] | [1.x文档]
- Tips
- 特性
- 安装与使用方式
- 从 v1 迁移到 v2
- 配置项参考
- 使用tailwindcss任意值(arbitrary values)
- 常见问题
- 变更日志
- Related projects
- Bugs & Issues
Tips
自从 2.3.3 版本开始，我发布了一个额外的包叫 weapp-tailwindcss,它和 weapp-tailwindcss-webpack-plugin 代码版本完全一致，且保持发布版本的同步。以后可以都去安装 weapp-tailwindcss 这个包(当然现在 webpack-plugin 这个包也不会废弃，也会时刻保持版本的同步)。为什么要这么做的原因，主要是因为 weapp-tailwindcss-webpack-plugin 这个名字，已经不适合描述现在这种，多插件并存的状态了，为了以后的发展改个名字哈哈。
特性
不仅仅是webpack |
主流框架与原生开发支持 |
|---|---|
 |
 |
核心插件支持 webpack/vite/gulp进行打包，涵盖了市面上几乎所有的主流开发小程序的框架。
这些插件能够自动识别并精确处理所有 tailwindcss 的工具类来适配小程序环境。同时这些插件还有对tailwindcss生成的工具类名，进行压缩和混淆的能力。这个能力可以缩短css选择器的长度，减小生成样式的体积，同时让生产环境中的类名变得不可阅读。
插件介绍
从 weapp-tailwindcss/webpack 导出的UnifiedWebpackPluginV5 是一个核心插件，所有使用 webpack 进行打包的框架都可以使用它。
从 weapp-tailwindcss/vite 导出的UnifiedViteWeappTailwindcssPlugin 为 vite 专用插件，配置项和使用方式和 webpack 插件是一致的。
而我们的 gulp 插件方法，可以从 weapp-tailwindcss/gulp 导出。
目前，这些插件支持最新版本的 tailwindcss v3.x.x 版本和 webpack5，vite 和 gulp。
如果你还在使用
tailwindcss@2版本，那你应该使用本插件的1.x版本。另外请确保你的nodejs版本>=16.6.0。目前低于16的长期维护版本(偶数版本) 都已经结束了生命周期，建议安装nodejs的LTS版本，详见 nodejs/release
安装与使用方式
从 v1 迁移到 v2
配置项参考
使用tailwindcss任意值(arbitrary values)
常见问题
变更日志
Related projects
CLI 工具
weapp-ide-cli: 一个微信开发者工具命令行，快速方便的直接启动 ide 进行登录，开发，预览，上传代码等等功能。
模板 template
如何选择？
假如你仅仅是开发一个小程序 + h5 的组合，那么使用 vscode 模板就足够了
假如你的项目构建的重点平台是 app 那么还是推荐使用 hbuilderx 模板，因为 hbuilderx 自带了一套 app 构建和调试的工具链，可以更好的支持你的开发。
使用uni-app cli进行构建 vscode开发
uni-app-vite-vue3-tailwind-vscode-template
uni-app-vue2-tailwind-vscode-template
使用hbuilderx 进行构建和开发
uni-app-vue3-tailwind-hbuilder-template
使用tarojs进行构建 vscode开发
taro-react-tailwind-vscode-template
原生小程序开发模板
weapp-tailwindcss-gulp-template(gulp打包)
weapp-native-mina-tailwindcss-template(webpack打包)
tailwindcss plugin
tailwindcss preset
tailwindcss-miniprogram-preset
Bugs & Issues
目前这个插件正在快速的开发中，如果遇到 Bug 或者想提出 Issue