使用Tailwindcss之后,vxe-table表头排序箭头高亮消失的问题解决

环境

vue@2.7.8
vxe-table@3.5.9
tailwindcss/postcss7-compat@2.2.17
postcss@7.0.39
autoprefixer@9.8.8

问题

vxe-table 表格表头 th 的排序箭头在开启正序或逆序排序时,会显示蓝色高亮来提示用户表格数据处在排序情况下。在项目开启运行了tailwindcss之后,高亮效果消失,影响了用户使用体验。
在这里插入图片描述
我们看到给箭头设置颜色的样式:

.vxe-table .vxe-sort-asc-btn.sort-active, .vxe-table .vxe-sort-desc-btn.sort-active {color: "#409eff";
}

该样式在Chrome Dev Tools的样式标签页生效且优先级最高,我们尝试添加样式 color, background-color, border-color ,均未生效。

分别尝试注释掉tailwindcss.css中对tailwindcss的base,components,和utilities的注释,发现注释掉base基本样式时,蓝色箭头高亮效果恢复了,那我初步判断是tailwindcss的base基本样式与vxe-table的样式产生了冲突。

然后我注意到这个蓝色箭头的三角形是由::before和::after 伪元素 添加单侧的边框样式构成的,如何实现请参考:

.info-tab {position: relative;
}
.info-tab::after {content: '';border: 4px solid transparent;border-top-color: #2c8ac2;position: absolute;top: 0;
}

找到这个线索之后,查阅node_modules/tailwindcss/dist/base.css,看到对伪元素的样式加了以下限制

// from node_modules/tailwindcss/dist/base.css
*, ::before, ::after {--tw-border-opacity: 1;border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}*, ::before, ::after {box-sizing: border-box;
}*, ::before, ::after {box-sizing: border-box; /* 1 */border-width: 0; /* 2 */border-style: solid; /* 2 */border-color: currentColor; /* 2 */
}

我们在Chrome Dev Tools的样式标签页一个个尝试注释掉tailwindcss加在伪元素的样式,发现取消勾选 --tw-border-opacity 之后,蓝色可以正常显示,如图所示:
在这里插入图片描述

原因分析

Tailwind 包含一组开箱即用的实用基本样式,我们称之为Preflight,它实际上只是modern-normalize 加上一层薄薄的额外的更有主见的样式。
有关 Preflight 应用的所有样式的完整参考,请参阅样式表

解决

方案 1. 添加基本​​样式

在 Preflight 上添加自己的基本样式,将它们添加到@layer base指令中的 CSS 中:

// from tailwindcss.css
@import "tailwindcss/base";
@layer base {*, ::before, ::after {--tw-border-opacity: unset;}
}
@import "tailwindcss/components";
@import "tailwindcss/utilities";

在添加基本样式文档中了解更多信息

拓展

观察另一个项目,没能复现该问题,该项目环境如下:

vue@3.3.13
tailwindcss@3.4.4
vxe-table@4.6.0
postcss@8.4.38
autoprefixer@10.4.19

观察发现该版本的vxe-table不是用伪元素添加单侧边框的方式生成表格表头排序箭头,而是用伪元素设置 content 属性,content 赋值上下箭头的UnitCode,因此tailwindcss的Preflight基础样式不会影响到其激活状态下蓝色高亮显示的效果。

// 正序箭头
.vxe-icon-caret-up:before {content: "\e8ee"
}
// 逆序箭头
.vxe-icon-caret-up:before {content: "\e8ed"
}

通过给伪元素:before的content赋值,使用unicode字符集,采用4位16进制编码,以上用到的unicode字符集应该对应vxeiconfont的素材库。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/34286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据集的未来:如何利用亮数据浏览器提升数据采集效率

目录 一、跨境电商的瓶颈1、技术门槛2、语言与文化差异3、网络稳定性4、验证码处理和自动识别5、数据安全6、法规和合规 二、跨境电商现在是一个合适的商机吗?三、数据集与亮数据浏览器1、市场分析2、价格监控3、产品开发4、供应链优化5、客户分析 四、亮数据浏览器…

上海计算机学会2020年3月月赛C++丙组T4连乘问题

题目描述 给定 a1​,a2​,⋯,an​,请计算一组乘积,记为P1​,P2​,⋯,Pn​,其中 Pi​ 的定义如下: 也就是说,Pi​ 是 a1​ 到 an​ 的连乘再除去 ai​。由于答案可能比较大,输出每个 Pi​ 模 10000 的余数。…

==和equals区别

在编程中, 和 equals 都用于比较,但它们有不同的使用场景和意义。 在Java中: 运算符: 用于比较两个对象的引用是否相等。 比较的是两个对象在内存中的地址。 例如: String a new String("hello"); Stri…

算法05 模拟算法之二维数组相关内容详解【C++实现】

大家好,我是bigbigli,前面一节我们一节讲过一维数组的模拟了,如果还没看的话,可以👉点击此处。模拟算法还有很多内容需要讲,比如图像、日期相关的模拟算法,后续将继续更新,今天先来讲…

代码随想录——跳跃游戏Ⅱ(Leetcode 45)

题目链接 贪心 class Solution {public int jump(int[] nums) {if(nums.length 1){return 0;}int count 0;// 当前覆盖最远距离下标int curDistance 0;// 下一步覆盖距离最远下标int nextDistance 0;for(int i 0; i < nums.length; i){nextDistance Math.max(nums[…

前端面试题(九)答案版

姓名&#xff1a; 面试时间&#xff1a; 面试岗位&#xff1a; 1、SEO优化&#xff1f; SEO(Search Engine Optimization)即搜索引擎优化,是一种提高网站在搜索引擎中排名的技术。主要包括: - 网站内容优化:提高网页内容质量,关键词优化等 -…

快速修复mfc100u.dll丢失解决方案

相连文章&#xff1a;SecureCRT的安装破解 [详细过程2024] 有小伙伴向我反馈在打开SecureFX注册机之后显示【mfc100u.dll找不到】重装之后也没有用&#xff0c;这个是因为Microsoft Visual C的运行时组件和库出现了错误&#xff0c;直接选择重新安装就可以 出现这种情况的原因…

解析Java微服务架构:从零构建高性能系统

解析Java微服务架构&#xff1a;从零构建高性能系统 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我将为大家解析Java微服务架构&#xff0c…

等保测评:网络安全的重要屏障及其等级划分

在信息化高速发展的今天&#xff0c;网络安全已成为国家、企业乃至个人不容忽视的重要议题。其中&#xff0c;等保测评作为网络安全等级保护工作的重要环节&#xff0c;其意义愈发凸显。本文将详细解读等保测评的含义&#xff0c;并深入探讨其等级划分。 一、等保测评概述 等…

高性能并行计算华为云实验五:PageRank算法实验

目录 一、实验目的 二、实验说明 三、实验过程 3.1 创建PageRank源码 3.2 makefile的创建和编译 3.3 主机配置文件建立与运行监测 四、实验结果与分析 4.1 采用默认的节点数量及迭代次数进行测试 4.2 分析并行化下节点数量与耗时的变化规律 4.3 分析迭代次数与耗时的变…

MySQL——联表查询JoinON详解

Join 对比&#xff08;7种&#xff09; 代码演示&#xff1a; -- 查询参加了考试的同学&#xff08;学号&#xff0c;姓名&#xff0c;科目编号&#xff0c;分数&#xff09; SELECT * FROM student SELECT * FROM result/* 1. 分析需求&#xff1a;分析查询的字段来自哪些表&…

【C++学习】适合新手小白的C++的小型项目

对于学习C&#xff0c;以下是一些适合的小项目建议&#xff0c;这些项目可以帮助你熟悉C的基础语法、面向对象编程、文件操作、标准库等概念&#xff1a; 控制台计算器&#xff1a; 创建一个简单的控制台应用程序&#xff0c;实现一个计算器&#xff0c;能够执行基本的算术运算…

spring原理篇

第三方bean默认为方法名 自动配置 自动配置的原理 springboot的自动配置原理 首先是从 SpringBootApplication这个注解出发 有一个ComponentScan()默认扫描同级包及其子包 第二个注解是springbootconfiguration 声明当前类是一个配置类 第三个是核心 enableAutoConfigurati…

通过看板系统管理工作流程:强调持续交付与可视化工作的全面指南

目录 前言1. 看板系统简介1.1 看板系统的基本原理1.2 看板系统的主要特点 2. 强调持续交付的重要性2.1 持续交付的优势2.2 持续交付的实施步骤 3. 可视化工作的核心价值3.1 提高透明度和可见性3.2 促进工作流程的优化3.3 增强团队的自我管理能力 4. 看板系统的实施指南4.1 初始…

速盾:cdn使用场景是什么?

CDN&#xff0c;全称为Content Delivery Network&#xff0c;即内容分发网络。它是一种通过在全球各地部署服务器、缓存内容以及优化网络路由等方式&#xff0c;提供高速、高可用、安全稳定的内容分发服务的网络架构。 在互联网的发展过程中&#xff0c;由于网络的带宽和延迟等…

vue-cli 搭建项目,ElementUI的搭建和使用

vue-cli 官方提供的一个脚手架&#xff0c;用于快速生成一个vue的项目模板&#xff1b;预先定义 好的目录结构及基础代码&#xff0c;就好比咱们在创建Maven项目时可以选择创建一个 骨架项目&#xff0c;这个骨架项目就是脚手架&#xff0c;我们的开发更加的快速&#xff1b; …

在FlowUs息流,让知识库为你所用|如何打造个人知识库|如何打造企业知识库

&#x1f389; 在 FlowUs 的世界中&#xff0c;知识绽放出无限的可能&#xff01;&#x1f680; 在当今信息爆炸的时代&#xff0c;知识的更新换代速度极快&#xff0c;我们每天都面临着海量的信息冲击。拥有一个属于自己的知识库变得至关重要。 首先&#xff0c;打造自己的知…

【PB案例学习笔记】-24创建一个窗口图形菜单

写在前面 这是PB案例学习笔记系列文章的第24篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…

Django 表单使用示例:添加角色

在本文中,我们将使用 Django 的表单(Forms)功能来创建一个添加角色的页面。 创建 Django 项目和应用 首先,我们创建一个名为 ​​form_demo​​​ 的 Django 项目和一个名为 ​​app01​​ 的应用: django-admin startproject form_demo cd form_demo python manage.py…

在Ubuntu 18.04上安装和配置Ansible的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 配置管理系统旨在简化对大量服务器的控制&#xff0c;适用于管理员和运维团队。它们允许您从一个中央位置以自动化的方式控制许多…