tailwind-one

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

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

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

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

安装插件

npm i tailwind-one -D

使用

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

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

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

// 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