记录tailwindcss依赖和rem适配问题

安装tailwindcss导致某些svg导致不居中的问题，研究了很久才知道，tailwindcss的preflight的css文件默认改变了svg和img等诸多文件的默认配置，需要把配置preflight设置成false，不引用许多默认样式，比如svg会改成block，但是element的svg是inline-block导致不居中，tailwindcss - npm (npmjs.com)
去官网发现，src/css/preflight 确实存在该css会导致诸多默认样式被改变

还有svg标签内一定要加上preserveAspectRatio="none"才行，不然svg放大缩小也不适配

module.exports = {
  purge: {
    content: ['./public/**/*.html', './src/**/*.vue'],
  },
  corePlugins: {
    preflight: false,
  },
  darkMode: false, // or 'media' or 'class'
  mode: 'jit', // 是否开启jit模式，开启以后编译会更快，当然，tailwindcss版本需要在2.1以上
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}复制

rem适配遇到的问题
我这边看到项目已经引入了postcss-px2rem-exclude这个插件，然后也引入了rem.js文件了

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-px2rem-exclude')({
      remUnit: 16,
      exclude: /node_modules|floder_name/i,
    }),
  ],
};复制

// rem等比适配配置文件
// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
 
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
  //   document.documentElement.style.fontSize = scale + 'px'
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setTimeout(() => {
    setRem()
  }, 300)
}
 
 复制

但是不知为何，每次拉伸窗口总会让html回弹到fontsize为54px，即便我给了定时器让setRem()进入宏进程最后执行了，某些svg并不能完成适配，调试了很久，才发现main.js又引入了
 

import "lib-flexible";复制

这个依赖，唉，前任的错误，把依赖删除就可以了。