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

目录

[1. 现象:](#1. 现象:)

[2. 原因分析:](#2. 原因分析:)

[3. 解决方案:](#3. 解决方案:)

写法一:扩展Preflight

写法二:

[4. 禁用 Preflight](#4. 禁用 Preflight)


  1. 现象:

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

2. 原因分析:

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

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

css 复制代码
@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

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

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

css 复制代码
// 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

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 在清除基础样式时考虑这些样式。

写法二:

css 复制代码
// src/style/tailwindcss.css

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

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

4. 禁用 Preflight

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

javascript 复制代码
  // tailwind.config.js
  module.exports = {
    corePlugins: {
     preflight: false,
    }
  }
相关推荐
白瓷梅子汤2 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子6 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo37 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang38 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥38 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil40 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户8122199367221 小时前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少1 小时前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
1234Wu1 小时前
React Native 接入 eCharts
javascript·react native·react.js