跳到主要内容

Taro (所有框架)

目前 Taro v4 同时支持了 WebpackVite 进行打包编译,weapp-tailwindcss2 者都支持,但是配置有些许的不同

警告

假如你写了 tailwindcss 工具类不生效,可能是由于微信开发者工具默认开启了 代码自动热重载 功能,关闭它即可生效。

假如你和 NutUI 一起使用,请一定要查看这个注意事项!

下列配置同时支持 taroreact / preact / vue2 / vue3 所有框架

使用 Vite 作为打包工具

由于 taro@4vite 版本,目前加载 postcss.config.js 配置是失效的,所以我们目前暂时只能使用内联 postcss 插件的写法

config/index.ts 中注册插件

config/index.[jt]s
import type { Plugin } from 'vite'
import tailwindcss from 'tailwindcss'
import { UnifiedViteWeappTailwindcssPlugin as uvtw } from 'weapp-tailwindcss/vite'

const baseConfig: UserConfigExport<'vite'> = {
// ... 其他配置
compiler: {
type: 'vite',
vitePlugins: [
{
// 通过 vite 插件加载 postcss,
name: 'postcss-config-loader-plugin',
config(config) {
// 加载 tailwindcss
if (typeof config.css?.postcss === 'object') {
config.css?.postcss.plugins?.unshift(tailwindcss())
}
},
},
uvtw({
// rem转rpx
rem2rpx: true,
// 除了小程序这些,其他平台都 disable
disabled: process.env.TARO_ENV === 'h5' || process.env.TARO_ENV === 'harmony' || process.env.TARO_ENV === 'rn'
})
] as Plugin[] // 从 vite 引入 type, 为了智能提示
},
// ... 其他配置
}

tailwindcss 即可注册成功,正常使用了

这段代码的意思为,在 vite 里注册 postcss 插件和 vite 插件

vite.config.ts 只有在运行小程序的时候才会加载,h5 不会,所以只能通过这种方式进行 小程序 + h5 双端兼容

使用 Webpack 作为打包工具

注册插件

在项目的配置文件 config/index 中注册:

config/index.[jt]s
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
// 假如你使用 ts 配置,则使用下方 import 的写法
// import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack'

{
// 找到 mini 这个配置
mini: {
// postcss: { /*...*/ },
// 中的 webpackChain, 通常紧挨着 postcss
webpackChain(chain, webpack) {
// 复制这块区域到你的配置代码中 region start
chain.merge({
plugin: {
install: {
plugin: UnifiedWebpackPluginV5,
args: [{
appType: 'taro'
}]
}
}
})
// region end
}
}
}

然后正常运行项目即可,相关的配置可以参考模板 taro-react-tailwind-vscode-template

信息

weapp-tailwindcss/webpack 对应的插件 UnifiedWebpackPluginV5 对应 webpack@5

weapp-tailwindcss/webpack4 对应的插件 UnifiedWebpackPluginV4 对应 webpack@4

在使用 Taro 时,检查一下 config/index 文件的配置项 compiler,来确认你的 webpack 版本,推荐使用 'webpack5'

另外假如你使用了 taro-plugin-compiler-optimization 记得把它干掉。因为和它一起使用时,它会使整个打包结果变得混乱。详见 issues/123 issues/131

还有 taroprebundle 功能老是出错,最近更新之后,由于 prebundle 默认开启,有时候连 taro cli 初始化的模板项目都跑不起来,假如遇到问题找不到原因,可以尝试关闭这个配置。

视频演示