# tailwind-one

**Repository Path**: rok138/tailwind-one

## Basic Information

- **Project Name**: tailwind-one
- **Description**: 使用tailwind运行在 小程序(微信小程序 头条小程序 阿里小程序 taro remax uniapp 等等) web端 h5端 native端！
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://gitee.com/23323/tailwind-one
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2021-11-06
- **Last Updated**: 2021-11-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# tailwind-one

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

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

#### 参数

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

##### 全局

由于小程序不支持`/` `.5` `:`等特殊字符，这类型字符将会做如下转换

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

##### 小程序

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

### 安装

##### [安装 TailWindCSS](https://tailwindcss.com/docs/installation#installing-tailwind-css-as-a-post-css-plugin)

##### 安装插件

```
npm i tailwind-one -D
```

### 使用

```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": {
    // 平台使用的转换方式
    "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: {
      "h5":0,
      "mp":0,
      "native":0,
  },
}
```

#### 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,
    },
});
```

### tailwind.config.js

> 项目中同名配置文件会覆盖此库中的配置文件

#### 原生支持

由于没有原生的开发经验，目前单位按 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