tailwind 适配umi h5方案

简介

utility-first的css framework。对于我而言，采用tailwind的原因如下：

对于react组件，没有纯css级别的组件。从hoc --> react hook，复用了无ui的逻辑，但依旧没有解决跨组件的css解决方案，而tailwind+postcss解决了此问题；而tailwind主题高度定义化，可以说非常方便。

安装

tailwindcss推荐以postcss形式安装。当前umi内置的postcss版本为7.x，但是umi-next（umi4.x）即将支持postcss 8.x。

postcss 8.x 版本

umi内置了postcss、autoprefixer，使用以 PostCSS 插件的形式安装 Tailwind CSS

npm install -D tailwindcss

postcss 7.x 版本

umi 3.4.20版本之中的@umijs/bundler-webpack 定义postcss版本为：^7.0.32

故基于umi的项目，tailwind版本方案应基于postcss 7.x版本

安装方法：tailwindcss.com/docs/instal…

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

样式方案

采用vw适配方案，用postcss插件postcss-px-to-viewport + tailwind jit 模式来适配

那么一个样式可以如下：

import { openOrDown } from '@/bridge'
import { aifeCDN } from '@/utils/conf'


const guideUrl = aifeCDN`/activity/common/images/guide.png`;
const btnUrl = aifeCDN`/activity/common/images/guidebtn.png`;

export default () => {
  const handleClick = () => {
    openOrDown(location.href)
  }

  return (
    <div className="bg-center bg-cover relative bg-no-repeat w-[900px] h-[930px]"
      style={{ backgroundImage: `url(${guideUrl})` }}>
      <div className="w-[700px] h-[156px] bg-cover absolute bottom-[50px] left-2/4 transform -translate-x-2/4  bg-no-repeat bg-center"
        style={{ backgroundImage: `url(${btnUrl})` }} onClick={handleClick} />
    </div>
  )
}

对应的渲染

配置.umirc.js的postcss插件

配置.umirc.js的postcss插件项，如下

import { defineConfig } from 'umi';
import px2vw from 'postcss-px-to-viewport';


export default defineConfig({
    ...,
    extraPostCSSPlugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        px2vw({
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 1080, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ['wrap'], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
            landscape: false, // 是否处理横屏情况
        }),
    ],
})

vs code 插件安装

智能推导tailwind类名，推荐安装

插件地址：marketplace.visualstudio.com/items?itemN…

tailwindcss purge

what: purge可以使得build出的css文件不包括未使用的工具类，以减少build的样式文件大小。 how: tailwind.config.js顶级配置purge文件

purge前，purge配置

{

    purge: []

}

File Size	origin size	Gzipped
dist\umi.f79cdb36.js	398.8 KB	153.3 KB
dist\umi.c06c4a36.js	2.7 MB	285.5 KB

purge后，tailwind.config.js 的purge配置

module.exports = {
 purge:["./src/**/*.jsx"],
}

File Size	origin size	Gzipped
dist\umi.f79cdb36.js	398.8 KB	153.3 KB
dist\umi.a47b3cf5.js	10.9 KB	3.2 KB

tailwindcss jit模式的使用

why&what：普通模式会全部加载tailwindcss工具类，这个文件非常大，而此模式按需生成对应的css样式。此外还可以生成自定义值。

how: tailwind.config.js顶级配置"mode":"jit"

module.exports = {

   mode: 'jit'

}

附：

最简无theme的tailwind.config.js配置

module.exports = {

  mode: 'jit',

  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    backgroundColor: theme => ({
      ...theme('colors'),
      dark70: 'rgba(0,0,0,.7)'
    }),
    extend: {
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}