tailwind-one

> 使用 tailwindcss 一把梭界面(小程序、H5、快应用等)

> 当前支撑为postcss-7 可支持8

$3

``shell
npx tailwindcss init # 获取最小版配置 (推荐)
npx tailwindcss init --full # 获取完整版配置
`

$3

| 参数 | 描述 |
| -------- | ------------------------------------------------------------ |
| platform | 平台，默认 h5，其他值为 mp、native、web |
| name | 具体平台名称，值有 weapp、swan、alipay、tt、qq、rn、quickapp |

#### 全局设定

由于小程序不支持 / .5 : 特殊字符 全局对齐的情况下 这类型字符将会做如下转换

`
: 替换成 _
.5 替换成 _half
/ 替换成 __
`

##### 小程序 mp

`
去掉 :hover 去掉media
:not(template) ~ :not(template) 替换成 "view + view"
:not([hidden]) ~ :not([hidden]) 替换成 "view + view"
* 替换成 view
`

$3

##### 安装 TailWindCSS

##### 安装插件

`
npm i tailwind-one -D
`

$3

`js
require("tailwind-one")(params);
`

#### 全部参数

`
{
platform: "h5",
name: "",
debug: false,
units: {
px2rem: 1 / 37.5,
px2rpx: 1,
rem2rpx: 37.5,
px2pt: 0.22,
rpx2pt: 0.75,
rem2pt: 28.125,
"vw2%": 1,
"vh2%": 1
},
rule: {
web: [],
h5: ["px2rem"],
mp: ["px2rpx", "rem2rpx"],
native: ["px2pt", "rem2pt", "rpx2pt", "vw2%", "vh2%"]
},
alias: {
isWeixin: ["mp-weixin", "weapp"],
isBaidu: ["mp-baidu", "swan"],
isAli: ["mp-alipay", "alipay"],
isToutiao: ["mp-toutiao", "tt"],
isQQ: ["mp-qq", "qq"],
isQuickapp: [
"quickapp-native",
"quickapp-webview",
"quickapp-webview-huawei",
"quickapp-webview-union",
"quickapp"
],
isNative: ["app-plus", "rn"]
},
// 大于阈值的才进行处理
threshold: {
web: 0,
h5: 0,
mp: 0,
native: 0,
},
// 选择器替换规则
selectorRule: {
":": "_",
".5": "_half",
"/": "_",
}
}
`

#### uni-app

postcss.config.js

`js
const path = require("path");

const PLATFORM_MAP = {
h5: "h5",
"mp-weixin": "mp",
"mp-alipay": "mp",
"mp-baidu": "mp",
"mp-toutiao": "mp",
"mp-qq": "mp",
"app-plus": "native"
};

module.exports = {
parser: require("postcss-comment"),
plugins: [
require("postcss-import")({
resolve(id, basedir, importOptions) {
if (id.startsWith("~@/")) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3));
} else if (id.startsWith("@/")) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2));
} else if (id.startsWith("/") && !id.startsWith("//")) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1));
}
return id;
}
}),
require("autoprefixer")({
remove: process.env.UNI_PLATFORM !== "h5"
}),
require("@dcloudio/vue-cli-plugin-uni/packages/postcss"),
// S TODO tailwindcss 相关配置
require("tailwindcss"),
require("tailwind-one")({
platform: PLATFORM_MAP[process.env.UNI_PLATFORM],
name: process.env.UNI_PLATFORM
})
// E
]
};
`

#### taro

config/index.js

`js
const PLATFORM_MAP = {
h5: "h5",
weapp: "mp",
swan: "mp",
alipay: "mp",
tt: "mp",
qq: "mp",
quickapp: "mp",
rn: "native"
};
const config = {
projectName: "taro-tailwind",
date: "2020-9-19",
designWidth: 750,
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2
},
sourceRoot: "src",
outputRoot: "dist",
plugins: [],
defineConstants: {},
copy: {
patterns: [],
options: {}
},
framework: "vue",
mini: {
postcss: {
pxtransform: {
enable: true,
config: {}
},
url: {
enable: true,
config: {
limit: 1024 // 设定转换尺寸上限
}
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: "module", // 转换模式，取值为 global/module
generateScopedName: "[name]__[local]___[hash:base64:5]"
}
},
// S TODO tailwindcss 相关配置
tailwindcss: {
enable: true
},
"tailwind-one": {
enable: true,
config: {
platform: PLATFORM_MAP[process.env.TARO_ENV],
name: process.env.TARO_ENV
}
}
// E
}
},
h5: {
publicPath: "/",
staticDirectory: "static",
postcss: {
autoprefixer: {
enable: true,
config: {}
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: "module", // 转换模式，取值为 global/module
generateScopedName: "[name]__[local]___[hash:base64:5]"
}
},
// S TODO tailwindcss 相关配置
tailwindcss: {
enable: true
},
"tailwind-one": {
enable: true,
config: {
platform: "h5",
name: "h5"
}
}
// E
}
}
};

module.exports = function (merge) {
if (process.env.NODE_ENV === "development") {
return merge({}, config, require("./dev"));
}
return merge({}, config, require("./prod"));
};
`

#### remax

`js
// https://remaxjs.org/guide/config/postcss
// postcss.config.js
module.exports = ({options}) => ({
plugins: {
// 添加tailwind
autoprefixer: {
remove: process.env.REMAX_PLATFORM !== 'web'
},
tailwindcss: {},
"tailwind-one": {
platform: process.env.REMAX_PLATFORM !== 'web' ? "mp" : "h5",
name: process.env.REMAX_PLATFORM
},
[process.env.NODE_ENV === "production" ? "@fullhuman/postcss-purgecss" : '']: {
content: ['./src//.tsx', './src//.js']
},
// 继承 remax 默认的插件配置
...options.plugins,
},
});
`

#### 原生支持

由于没有原生的开发经验，目前单位按 1px=0.75pt 转换了。有待完善

#### 测试

`
yarn test [platform] [name]
``

#### Qa

* h5 rem转换尺寸怎么设定?
* 需要自行设置html font-size 常见之750设计稿
* 上述的taro remax uniapp均有配置html转换
* px如果不想转换成rem怎么办?
* PX不会转换
* 可以设置阈值 大于阈值才会进行转换 threshold: {h5: 10} 则表示h5下小于10px的css不会转换成rem