Antd Vue项目引入TailwindCss之后出现svg icon下移，布局中的问题解决方案

目录

1. 现象：

2. 原因分析：

3. 解决方案：

写法一：扩展Preflight

写法二：

4. 禁用 Preflight

---

1. 现象：

Antd Vue项目引入TailwindCss之后出现svg icon下移，不能对齐显示的情况，如下图所示

2. 原因分析：

我们需要事先了解TailwindCss的 Preflight，这是一套武断的针对 Tailwind 项目预设的基础样式。基于 modern-normalize , Preflight 是一套针对 Tailwind 项目的基础样式，旨在消除跨浏览器的不一致性，并使您的工作更轻松地符合设计系统的约束。

当您在 CSS 中包含 @tailwind base 时，Tailwind 会自动注入以下样式：

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

默认情况下，图片和其他可替换元素 (比如 svg, video, canvas 等) 是 vertical-align: middle; 

tailwindcss生成的output.css文件对svg布局样式设置如下：

// src/output.css

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

 

以上配置与Antd Vue的对于svg布局的配置不同，所以导致项目中的svg都下移，显示不对齐的情况发生。

3. 解决方案：

在你的 css 中添加css 覆盖掉tailwindcss默认的值，有两种写法。

写法一：扩展Preflight

在 Preflight 上添加自己的基本样式，只需在 @layer base 指令中添加你的 CSS

// src/style/tailwindcss.css

@tailwind base;
@layer base {
    svg { 
        display: inline;
        vertical-align: baseline; 
    }
}
@tailwind components;
@tailwind utilities;

通过使用 @layer 指令，Tailwind 将自动将这些样式移到 @tailwind base 的同一位置，以避免出现一些意外问题。

使用 @layer 指令还能告诉 Tailwind 在清除基础样式时考虑这些样式。

写法二：

// src/style/tailwindcss.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 添加下面的代码 */
svg {
  vertical-align: baseline;
}

4. 禁用 Preflight

如果您想完全禁用 Preflight - 可能是因为您要将 Tailwind 集成到现有项目中，或者是因为您想提供自己的基本样式 - 您所需要做的就是在 tailwind.config.js 文件的 corePlugins 部分，设置 preflight 为 false：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
     preflight: false,
    }
  }