weapp-tailwindcss-webpack-plugin

star license

把 tailwindcss JIT 思想带入小程序开发吧！

weapp-tailwindcss-webpack-plugin
- Usage
  - uni-app (vue2/3)
  - uni-app for vite (vue3)
  - Taro v3 (React/vue2/3)
  - remax (react)
  - rax (react)
  - 原生小程序(webpack5 mina)
  - HBuilderX 创建的项目
  - uni-app 构建成 android/ios app
- Options 配置项
- 使用 arbitrary values
- 关于rem转化rpx
- 变更日志
- 常见问题
- Related projects
  - CLI 工具
  - 模板 template
    - 如何选择？
    - 使用uni-app cli进行构建 vscode开发
    - 使用hbuilderx 进行构建和开发
  - 预设 tailwindcss preset
- Bugs & Issues

笔者之前写了一个 tailwindcss-miniprogram-preset，可是那个方案不能兼容最广泛的 Just in time 引擎，在写法上也有些变体。

于是笔者又写了一个 weapp-tailwindcss-webpack-plugin，这是一个 plugin 合集，包含 webpack/vite plugin，它会同时处理类 wxml 和 wxss 文件，从而我们开发者，不需要更改任何代码，就能让 jit 引擎兼容微信小程序。

此方案可兼容 tailwindcss v2/v3，webpack v4/v5，postcss v7/v8。

随着 @vue/cli-service v5 版本的发布，uni-app 到时候也会转为 webpack5 + postcss8 的组合，到时候，我会升级一下 uni-app 的示例，让它从 tailwindcss v2 jit 升级到 tailwindcss v3 jit

Usage

uni-app (vue2/3)

使用方式 | Demo 项目

uni-app for vite (vue3)

使用方式 | Demo 项目

Taro v3 (React/vue2/3)

使用方式(taro3.5 webpack4/5前后有所区别) | React Demo 项目 | vue2 Demo 项目 | vue3 Demo 项目

remax (react)

使用方式 | Demo 项目

rax (react)

使用方式 | Demo 项目

原生小程序(webpack5 mina)

使用方式 | Demo 项目

HBuilderX 创建的项目

vue2 使用方式 | vue2 Demo 项目 | vue3 使用方式 | vue3 Demo 项目

uni-app 构建成 `android/ios` app

使用方式

Options 配置项

配置项	类型	描述
`htmlMatcher`	`(assetPath:string)=>boolean`	匹配 `wxml`等等模板进行处理的方法
`cssMatcher`	`(assetPath:string)=>boolean`	匹配 `wxss`等等样式文件的方法
`jsMatcher`	`(assetPath:string)=>boolean`	匹配 `js`文件进行处理的方法，用于 `react`
`mainCssChunkMatcher`	`(assetPath:string)=>boolean`	匹配 `tailwindcss jit` 生成的 `css chunk` 的方法
`framework` (`Taro` 特有)	`react`\|`vue2`\|`vue3`	由于 `Taro` 不同框架的编译结果有所不同，需要显式声明框架类型默认`react`
`customRuleCallback`	`(node: Postcss.Rule, options: Readonly<RequiredStyleHandlerOptions>) => void`	可根据 Postcss walk 自由定制处理方案的 callback 方法
`disabled`	`boolean`	是否禁用该插件，默认为 `false`，一般用于多平台构建，有些平台比如 `h5` 不需要开启此插件，所以可以根据环境变量进行禁用。
`cssPreflightRange`	`'view'` \| `'all'`	全局`dom`选择器，只有在这个选择器作用范围内的`dom`会被注入 `cssPreflight` 的变量和默认样式。默认值为 `'view'` 即只对所有的 `view` 和伪元素生效，想要对所有的元素生效，可切换为 `'all'`,此时需要自行处理和客户端默认样式的冲突
`replaceUniversalSelectorWith`	`string` \| `false`	把`css`中的全局选择器 *``** 替换为指定值，默认替换为 `'view'`，设置为 `false` 时不进行替换，此时小程序会由于不认识`*`选择器而报错
`cssPreflight`	`Record<string,string>`\| `false`	在所有 `view`节点添加的 `css` 预设，可根据情况自由的禁用原先的规则，或者添加新的规则。详细用法如下:

// default 默认:
cssPreflight: {
  'box-sizing': 'border-box',
  'border-width': '0',
  'border-style': 'solid',
  'border-color': 'currentColor'
}
// result
// box-sizing: border-box;
// border-width: 0;
// border-style: solid;
// border-color: currentColor

// case 禁用所有
cssPreflight: false
// result
// none

// case 禁用单个属性
cssPreflight: {
  'box-sizing': false
}
// border-width: 0;
// border-style: solid;
// border-color: currentColor

// case 更改和添加单个属性
cssPreflight: {
  'box-sizing': 'content-box',
  'background': 'black'
}
// result
// box-sizing: content-box;
// border-width: 0;
// border-style: solid;
// border-color: currentColor;
// background: black

使用 arbitrary values

详见 tailwindcss/using-arbitrary-values 章节 | Sample

关于rem转化rpx

假如你想要把项目里，所有满足条件的 rem 都转化成 rpx，那么 postcss plugin: postcss-rem-to-responsive-pixel 适合你。

假如你想缩小一下范围，只把 tailwindcss 中默认的工具类的单位(非jit生成的class)，从 rem 转变为 rpx，那么 tailwindcss preset: tailwindcss-rem2px-preset 适合你。

使用方式见 Demo 和对应 npm 包的文档。

变更日志

常见问题

目前微信开发者工具会默认开启 代码自动热重载 (compileHotReLoad) 功能，这个功能在原生开发中表现良好，但在 uni-app 和 taro 等等的框架中，存在一定的问题，详见issues#37，所以如果你遇到了此类问题，建议关闭 代码自动热重载 功能。

常见问题见 FAQ.md

Related projects

CLI 工具

weapp-ide-cli: 一个微信开发者工具命令行，快速方便的直接启动 ide 进行登录，开发，预览，上传代码等等功能。

模板 template

如何选择？

假如你仅仅是开发一个小程序 + h5 的组合，那么使用 vscode 模板就足够了

假如你的项目构建的重点平台是 app 那么还是推荐使用 hbuilderx 模板，因为 hbuilderx 自带了一套 app 构建和调试的工具链，可以更好的支持你的开发。

Bugs & Issues

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

欢迎提交到此处

weapp-tailwindcss
weapp-tailwindcss copied to clipboard

Metadata

weapp-tailwindcss-webpack-plugin

Usage

uni-app (vue2/3)

uni-app for vite (vue3)

Taro v3 (React/vue2/3)

remax (react)

rax (react)

原生小程序(webpack5 mina)

HBuilderX 创建的项目

uni-app 构建成 `android/ios` app

Options 配置项

使用 arbitrary values

关于rem转化rpx

变更日志

常见问题

Related projects

CLI 工具

模板 template

如何选择？

使用`uni-app cli`进行构建 `vscode`开发

使用`hbuilderx` 进行构建和开发

预设 tailwindcss preset

Bugs & Issues

← Metadata

Owner

Metadata

weapp-tailwindcss weapp-tailwindcss copied to clipboard

Metadata

weapp-tailwindcss-webpack-plugin

Usage

uni-app (vue2/3)

uni-app for vite (vue3)

Taro v3 (React/vue2/3)

remax (react)

rax (react)

原生小程序(webpack5 mina)

HBuilderX 创建的项目

uni-app 构建成 android/ios app

Options 配置项

使用 arbitrary values

关于rem转化rpx

变更日志

常见问题

Related projects

CLI 工具

模板 template

如何选择？

使用uni-app cli进行构建 vscode开发

使用hbuilderx 进行构建和开发

预设 tailwindcss preset

Bugs & Issues

← Metadata

Owner

Metadata

weapp-tailwindcss
weapp-tailwindcss copied to clipboard

uni-app 构建成 `android/ios` app

使用`uni-app cli`进行构建 `vscode`开发

使用`hbuilderx` 进行构建和开发