简体中文(zh-cn) | English
降低开发维护成本,提升开发效率的
小程序
tailwindcss
全方面解决方案我的其他项目:
CSS UI
生成器@icestack/ui
已经发布,快来用它管理你的CSS
组件吧!想试试在小程序里使用编译时
CSS-in-JS
工具? 👉🏻👉🏻试试weapp-pandacss
[国内部署的文档地址] | [备用Github Page] | [1.x文档]
- Tips
- 特性
- 安装与使用方式
- 从 v1 迁移到 v2
- 配置项参考
- 使用tailwindcss任意值(arbitrary values)
- 常见问题
- 变更日志
- Related projects
- Bugs & Issues
自从 2.3.3
版本开始,我发布了一个额外的包叫 weapp-tailwindcss
,它和 weapp-tailwindcss-webpack-plugin
代码版本完全一致,且保持发布版本的同步。以后可以都去安装 weapp-tailwindcss
这个包(当然现在 webpack-plugin
这个包也不会废弃,也会时刻保持版本的同步)。为什么要这么做的原因,主要是因为 weapp-tailwindcss-webpack-plugin
这个名字,已经不适合描述现在这种,多插件并存的状态了,为了以后的发展就改了个名字。
前沿阅读: What’s Tailwind Oxide Engine? The Next Evolution of Tailwind CSS,未来 tailwindcss
会切换到这个引擎来大幅加快构建和运行速度,当然等它发布正式版本的时候,我也会尽可能第一时间去进行兼容新的引擎。
不仅仅是webpack |
主流框架与原生开发支持 |
---|---|
核心插件支持 webpack
/vite
/gulp
进行打包,涵盖了市面上几乎所有的主流开发小程序的框架。
这些插件能够自动识别并精确处理所有 tailwindcss
的工具类来适配小程序环境。同时这些插件还有对tailwindcss
生成的工具类名,进行压缩和混淆的能力。这个能力可以缩短css
选择器的长度,减小生成样式的体积,同时让生产环境中的类名变得不可阅读。
从 weapp-tailwindcss/webpack
导出的UnifiedWebpackPluginV5
是一个核心插件,所有使用 webpack5
进行打包的框架都可以使用它。
从 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
weapp-ide-cli: 一个微信开发者工具命令行,快速方便的直接启动 ide 进行登录,开发,预览,上传代码等等功能。
假如你仅仅是开发一个小程序
+ h5
的组合,那么使用 vscode
模板就足够了
假如你的项目构建的重点平台是 app
那么还是推荐使用 hbuilderx
模板,因为 hbuilderx
自带了一套 app
构建和调试的工具链,可以更好的支持你的开发。
uni-app-vite-vue3-tailwind-vscode-template
uni-app-vue2-tailwind-vscode-template
uni-app-vue3-tailwind-hbuilder-template
taro-react-tailwind-vscode-template
weapp-tailwindcss-gulp-template(gulp打包)
weapp-native-mina-tailwindcss-template(webpack打包)
-
css-to-tailwindcss-plugin transform your
css/scss
totailwindcss plugin
weapp-pandacss CSS-in-JS
编译时框架的小程序适配器
目前这个插件正在快速的开发中,如果遇到 Bug
或者想提出 Issue