weapp-tailwindcss v3.1.1

简体中文(zh-cn) | English

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

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

• Tips
• 特性
  • 插件介绍
• 安装与使用方式
• 从 v1 迁移到 v2
• 配置项参考
• 使用tailwindcss任意值(arbitrary values)
• 常见问题
• 变更日志
• Related projects
  • CLI 工具
  • 模板 template
    • 如何选择？
    • 使用uni-app cli进行构建 vscode开发
    • 使用hbuilderx 进行构建和开发
    • 使用tarojs进行构建 vscode开发
    • 原生小程序开发模板
  • tailwindcss plugin / util
  • weapp-pandacss
• Bugs \& Issues

Tips

自从 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

安装与使用方式

从 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 / util

• css-to-tailwindcss-plugin transform your css/scss to tailwindcss plugin

• weapp-tailwindcss-children

weapp-pandacss

weapp-pandacss CSS-in-JS 编译时框架的小程序适配器

Bugs & Issues

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

欢迎提交到此处