postcss-uni-tailwind

使用 tailwindcss 开发小程序

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

全局

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

小程序

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

安装

安装 TailWindCSS

安装插件

npm i postcss-uni-tailwind -D

使用

require("postcss-uni-tailwind")(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"]
  }
}

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("postcss-uni-tailwind")({
      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
      },
      "postcss-uni-tailwind": {
        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
      },
      "postcss-uni-tailwind": {
        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"));
};

tailwind.config.js

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
  },
  purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx", "**/*.wxml"],
  theme: {
    extend: {},
    width: theme => ({
      auto: "auto",
      ...theme("spacing"),
      "1_2": "50%",
      "1_3": "33.333333%",
      "2_3": "66.666667%",
      "1_4": "25%",
      "2_4": "50%",
      "3_4": "75%",
      "1_5": "20%",
      "2_5": "40%",
      "3_5": "60%",
      "4_5": "80%",
      "1_6": "16.666667%",
      "2_6": "33.333333%",
      "3_6": "50%",
      "4_6": "66.666667%",
      "5_6": "83.333333%",
      "1_12": "8.333333%",
      "2_12": "16.666667%",
      "3_12": "25%",
      "4_12": "33.333333%",
      "5_12": "41.666667%",
      "6_12": "50%",
      "7_12": "58.333333%",
      "8_12": "66.666667%",
      "9_12": "75%",
      "10_12": "83.333333%",
      "11_12": "91.666667%",
      full: "100%",
      screen: "100vw"
    }),
    translate: (theme, { negative }) => ({
      ...theme("spacing"),
      ...negative(theme("spacing")),
      "-full": "-100%",
      "-1_2": "-50%",
      "1_2": "50%",
      full: "100%"
    })
  },
  variants: {},
  plugins: []
};

原生支持

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

测试

yarn test [platform] [name]

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