# tailwind-one

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

## Basic Information

- **Project Name**: tailwind-one
- **Description**: 废弃! 下一代github.com/sonofmagic/weapp-tailwindcss-webpack-plugin 
使用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**: 11
- **Forks**: 4
- **Created**: 2021-01-30
- **Last Updated**: 2022-04-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# tailwind-one

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

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

## 弃用此库 推荐使用 [weapp-tailwindcss-webpack-plugin](https://github.com/sonofmagic/weapp-tailwindcss-webpack-plugin) 请尽量切换


### tailwind.config.js 请放置一个在项目中

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


### 核心参数

| 参数     | 描述                                                         |
| -------- | ------------------------------------------------------------ |
| 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
```


### 安装指北

##### [安装 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: {
        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