目錄

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.cssimg,
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.jsmodule.exports = {corePlugins: {preflight: false,}}