在小程序中愉快的使用 Tailwind CSS 吧!
把
tailwindcss JIT思想帶入小程序開發(fā)吧两入！
筆者之前寫了一個 tailwindcss-miniprogram-preset敲才，可是那個方案不能兼容最廣泛的 Just in time 引擎裹纳，在寫法上也有些變體。
于是筆者又寫了一個 weapp-tailwindcss-webpack-plugin紧武，這是一個 plugin 合集剃氧，包含 webpack/vite plugin，它會同時處理類 wxml 和 wxss 文件阻星，從而我們開發(fā)者朋鞍，不需要更改任何代碼，就能讓 jit 引擎兼容微信小程序妥箕。
此方案可兼容 tailwindcss v2/v3滥酥，webpack v4/v5，postcss v7/v8畦幢。
隨著
@vue/cli-servicev5 版本的發(fā)布坎吻，uni-app 到時候也會轉為webpack5+postcss8的組合，到時候宇葱，我會升級一下uni-app的示例禾怠，讓它從tailwindcss v2 jit升級到tailwindcss v3 jit
Usage
uni-app (vue2/3)
uni-app for vite (vue3)
Taro v3 (React/vue2/3)
使用方式 | React Demo 項目 | vue2 Demo 項目 | vue3 Demo 項目
remax (react)
rax (react)
原生小程序(webpack5 mina)
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 |
可根據(jù) Postcss walk 自由定制處理方案的 callback 方法 |
cssPreflight |
Record<string,string>| false
|
在所有 view節(jié)點添加的 css 預設吗氏，可根據(jù)情況自由的禁用原先的規(guī)則，或者添加新的規(guī)則雷逆。 詳細用法如下: |
// 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 章節(jié) | Sample
Q&A
1. 我在 js 里寫了 tailwindcss 的任意值弦讽，為什么沒有生效?
詳見 issue#28
A: 因為這個插件，主要是針對, wxss,wxml 和 jsx 進行轉義的膀哲，js 里編寫的 string 是不轉義的往产。如果你有這樣的需求可以這么寫:
import { replaceJs } from 'weapp-tailwindcss-webpack-plugin/replace'
const cardsColor = reactive([
replaceJs('bg-[#4268EA] shadow-indigo-100'),
replaceJs('bg-[#123456] shadow-blue-100')
])
你不用擔心把代碼都打進來導致體積過大，我在 'weapp-tailwindcss-webpack-plugin/replace' 中某宪，只暴露了2個方法仿村，代碼體積 1k左右，esm格式兴喂。
2. 一些像 disabled:opacity-50 這類的 tailwindcss 前綴不生效?
詳見 issue#33蔼囊，小程序選擇器的限制。
3. 和原生組件一起使用注意事項
假如出現(xiàn)原生組件引入報錯的情況衣迷，可以參考 issue#35 畏鼓，忽略指定目錄下的文件，跳過插件處理壶谒，比如 uni-app 中的 wxcomponents云矫。
如何更改？在傳入的配置項 cssMatcher汗菜，htmlMatcher 這類中過濾指定目錄或文件让禀。
4. 編譯到 h5 注意事項
有些用戶通過 uni-app 等跨端框架场勤，不止開發(fā)成各種小程序再来，也開發(fā)為 H5啃擦，然而 tailwindcss 本身就兼容 H5 了引瀑。此時你需要更改配置豺撑，我們以 uni-app 為例:
const isH5 = process.env.UNI_PLATFORM === 'h5';
// 然后在 h5 環(huán)境下把 webpack plugin 和 postcss for weapp 給禁用掉
// 我們以 uni-app-vue3-vite 這個 demo為例
// vite.config.ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import { ViteWeappTailwindcssPlugin as vwt } from 'weapp-tailwindcss-webpack-plugin';
// vite 插件配置
const vitePlugins = [uni()];
!isH5 && vitePlugins.push(vwt());
export default defineConfig({
plugins: vitePlugins
});
// postcss 配置
// 假如不起作用看锉，請使用內(nèi)聯(lián)postcss
const isH5 = process.env.UNI_PLATFORM === 'h5';
const plugins = [require('autoprefixer')(), require('tailwindcss')()];
if (!isH5) {
plugins.push(
require('postcss-rem-to-responsive-pixel')({
rootValue: 32,
propList: ['*'],
transformUnit: 'rpx'
})
);
plugins.push(require('weapp-tailwindcss-webpack-plugin/postcss')());
}
module.exports = {
plugins
};
Related projects
模板 template
uni-app-vite-vue3-tailwind-vscode-template
uni-app-vue3-tailwind-vscode-template
uni-app-vue2-tailwind-vscode-template
weapp-native-mina-tailwindcss-template
預設 tailwindcss preset
tailwindcss-miniprogram-preset
Bugs & Issues
目前這個插件正在快速的開發(fā)中乌叶，如果遇到 Bug 或者想提出 Issue
