1 Star 0 Fork 0

liuwave/weapp-tailwindcss-webpack-plugin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

weapp-tailwindcss-logo

weapp-tailwindcss

简体中文(zh-cn) | English

star dm0 dm1 license test codecov

小程序 + tailwindcss 全方面解决方案
想试试在小程序里使用 CSS-in-JS 思想? 👉🏻👉🏻试试 weapp-pandacss

[国内部署的文档地址] | [备用Github Page] | [1.x文档]

Tips

自从 2.3.3 版本开始,我发布了一个额外的包叫 weapp-tailwindcss,它和 weapp-tailwindcss-webpack-plugin 代码版本完全一致,且保持发布版本的同步。以后可以都去安装 weapp-tailwindcss 这个包(当然现在 webpack-plugin 这个包也不会废弃,也会时刻保持版本的同步)。为什么要这么做的原因,主要是因为 weapp-tailwindcss-webpack-plugin 这个名字,已经不适合描述现在这种,多插件并存的状态了,为了以后的发展改个名字哈哈。

特性

不仅仅是webpack 主流框架与原生开发支持
wepback+vite+gulp frameworks

核心插件支持 webpack/vite/gulp进行打包,涵盖了市面上几乎所有的主流开发小程序的框架。

这些插件能够自动识别并精确处理所有 tailwindcss 的工具类来适配小程序环境。同时这些插件还有对tailwindcss生成的工具类名,进行压缩和混淆的能力。这个能力可以缩短css选择器的长度,减小生成样式的体积,同时让生产环境中的类名变得不可阅读。

插件介绍

weapp-tailwindcss/webpack 导出的UnifiedWebpackPluginV5 是一个核心插件,所有使用 webpack 进行打包的框架都可以使用它。

weapp-tailwindcss/vite 导出的UnifiedViteWeappTailwindcssPluginvite 专用插件,配置项和使用方式和 webpack 插件是一致的。

而我们的 gulp 插件方法,可以从 weapp-tailwindcss/gulp 导出。

目前,这些插件支持最新版本的 tailwindcss v3.x.x 版本和 webpack5vitegulp

如果你还在使用 tailwindcss@2 版本,那你应该使用本插件的 1.x 版本。另外请确保你的 nodejs 版本 >=16.6.0。目前低于 16 的长期维护版本(偶数版本) 都已经结束了生命周期,建议安装 nodejsLTS版本,详见 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

weapp-tailwindcss-children

tailwindcss preset

tailwindcss-miniprogram-preset

Bugs & Issues

目前这个插件正在快速的开发中,如果遇到 Bug 或者想提出 Issue

欢迎提交到此处

MIT License Copyright (c) 2021 ice breaker Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/liuwave/weapp-tailwindcss-webpack-plugin.git
git@gitee.com:liuwave/weapp-tailwindcss-webpack-plugin.git
liuwave
weapp-tailwindcss-webpack-plugin
weapp-tailwindcss-webpack-plugin
benchmark-v2

搜索帮助