taro中使用tailwind在官网文档的优质物料中有介绍一个插件taro-plugin-tailwind
安装
$ npm i taro-plugin-tailwind --save-dev
$ # 或使用 yarn
$ yarn add -D taro-plugin-tailwind
使用
引入插件
请确保 Taro CLI 已升级至 Taro 3 的最新版本，确保 taro-plugin-tailwind 版本在 v1.1.0 及以上。
修改项目 config/index.js 中的 plugins 配置如下：
const config = {
/// ...
plugins: [
// ...其余插件
'taro-plugin-tailwind',
],
/// ...
/// 亦或是传入具体参数：
plugins: [
// ...其余插件
['taro-plugin-tailwind', {
// 具体参数见：https://github.com/windicss/vite-plugin-windicss/blob/main/packages/plugin-utils/src/options.ts#L10
}]
],
};
生成配置
执行 taro tailwind --init 生成必要的配置文件：
$ taro tailwind --init // 默认生成 mini, h5 两种配置文件且必须存在
$ taro tailwind --init weapp,tt,swan // 生成其它平台以 (,) 分隔
TIP:执行后会在项目根目录下生成一个.taro-plugin-tailwind文件夹，里面包含了各个环境的tailwind配置，修改这里的配置才会有效；还会生成一个tailwind.config文件，但是修改其中的内容不会产生任何效果，看作者的介绍，估计是提供tailwind的vscode插件的提示效果（但是好像没啥用）
在项目入口文件（如 main.js / app.tsx）引入 windi.css：
import 'windi.css';
问题
到目前为止，你就可以在taro中使用tailwind。但是有个问题，tailwind的原子类是mobile优先的，使用的样式单位是rem，这对有精确的ui设计来说不太友好，并且某些样式在小程序中是无法使用的。
所以要对初始配置做一些修改，以下是对于微信小程序做的一些配置修改：
weapp.config.js
const range = (size) =>
Object.fromEntries(
[...Array(size).keys()]
.slice(1)
.map((i) => [`${i}_${size}`, `${(i / size) * 100}%`])
);
const generateSpacing = (num) => {
return new Array(num).fill(1).reduce(
(cur, next, index) => ({ ...cur, [index]: `${index * 2 }rpx`}),
{}
);
};
module.exports = {
prefixer: false,
separator: "_",
compile: false,
globalUtility: false,
darkMode: "media",
important: true,
corePlugins: {
space: false,
divideStyle: false,
divideWidth: false,
divideColor: false,
divideOpacity: false,
// 涉及到通配符（*），wx 小程序不支持
ringWidth: false,
ringColor: false,
ringOpacity: false,
ringOffsetWidth: false,
ringOffsetColor: false,
// web 浏览器相关功能，wx 小程序不支持
appearance: false,
cursor: false,
outline: false,
placeholderColor: false,
pointerEvents: false,
stroke: false,
tableLayout: false,
userSelect: false,
},
theme: {
extend: {
colors: {
green: {
theme: "#27AE60",
},
blue: {
theme: "#2F80ED",
},
gray: {
"desc-50": "#E0E0E0",
"desc-100": "#BDBDBD",
"desc-200": "#828282",
},
},
},
spacing: {
...generateSpacing(201),
},
fontSize: (theme) => theme("spacing"),
borderWidth: (theme) => theme("spacing"),
lineHeight: (theme) => theme("spacing"),
translate: (theme) => theme("spacing"),
inset: (theme) => theme("spacing"),
borderRadius: (theme) => theme("spacing"),
width: (theme) => ({
auto: "auto",
full: "100%",
screen: "100vw",
...Object.assign(...[2, 3, 4, 5, 6, 12].map(range)),
...theme("spacing"),
}),
height: (theme) => ({
auto: "auto",
full: "100%",
screen: "100vh",
...Object.assign(...[2, 3, 4, 5, 6, 12].map(range)),
...theme("spacing"),
}),
maxHeight: {
full: "100%",
screen: "100vh",
},
},
};
另外插件1.1.x之后内部使用的是windcss，所以支持类似于w-10px、bg-hex-333之类的写法，但是由于wxss中不支持转译字符，故类似于w-[12px]、bg-[#333]之类的语法并不支持。
