tailwind-one

npx tailwindcss init # Получить минимальную конфигурацию (рекомендуется)
npx tailwindcss init --full # Получить полную конфигурацию

: заменяется на _ 
.5 заменяется на _half
/ заменяется на __

Удаление :hover и media
:not(template) ~ :not(template) заменяется на "view + view"
:not([hidden]) ~ :not([hidden]) заменяется на "view + view"
* заменяется на view

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",
        "/": "_",
    }
}

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
    ]
};

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"));
};

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

yarn test [platform] [name]