使用Tailwind和Element时加载动画不在屏幕居中如何解决

问题核心原因 #

大部分场景是Tailwind CSS的全局样式重置（Preflight）覆盖了Element UI Loading组件的默认居中样式，或是样式引入顺序错误、绑定Loading的父元素缺少必要定位属性导致的。

分步解决方法 #

• 第一步：调整样式引入顺序
  确保在main.js等项目入口文件中，先引入Tailwind CSS的样式文件，再引入Element UI的样式文件，保证Element UI的样式优先级更高，不会被Tailwind的全局重置覆盖：

  // 正确引入顺序
  import 'tailwindcss/tailwind.css'
  import 'element-ui/lib/theme-chalk/index.css'
  

• 第二步：补充全局高优先级样式修复居中
  如果调整顺序后依然失效，可以在全局无scoped属性的样式文件中添加如下代码，强制让Loading遮罩层实现居中：

  .el-loading-mask {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  

• 第三步：非全屏Loading额外检查
  如果你是给指定容器绑定Loading，而非使用全屏加载能力，需要确保目标容器添加了相对定位属性，使用Tailwind的话直接给容器加relative类即可，避免Loading遮罩相对视口定位导致跑位。
• 第四步：特殊场景修复
  如果存在给html、body或者上层父元素添加transform属性的情况，会导致fixed定位的全屏Loading相对父元素而非视口定位，需要移除相关不必要的transform属性，或者给Loading组件明确指定target为body。

对应适配的开发环境 #

• "@tailwindcss/postcss7-compat": "^2.2.9"
• "postcss": "^7"
• "vue": "^2.6.12"
• "element-ui": "^2.15.1"
• "tailwindcss": "npm:@tailwindcss/postcss7-compat"

内容的提问来源于stack exchange，提问作者radiorz