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,
    }
  }
相关推荐
ziyue75754 分钟前
vue修改element-ui的默认的class
前端·vue.js·ui
树叶会结冰25 分钟前
HTML语义化:当网页会说话
前端·html
冰万森30 分钟前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
牧羊人_myr43 分钟前
Ajax 技术详解
前端
浩男孩1 小时前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学1 小时前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空1 小时前
重学React —— React事件机制 vs 浏览器事件机制
前端
程序定小飞2 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
一小池勺2 小时前
CommonJS
前端·面试