当前位置: 首页 > news >正文

【前端】【tailwind】tailwind默认重置了样式

Tailwind CSS 自身已经内置了现代化的样式重置方案 —— Preflight(基于 modern-normalize),这意味着在大多数情况下不需要额外引入传统的 reset.css 或 normalize.css。但具体是否需要补充重置,取决于你的项目需求,以下是分层解析:


一、Tailwind Preflight 的覆盖范围

1. 默认重置效果

Preflight 会完成以下核心重置:

/* 示例:Preflight 的部分核心规则 */
* {box-sizing: border-box; /* 统一盒模型 */margin: 0;             /* 清除默认边距 */
}html {line-height: 1.5;      /* 统一行高 */
}button, input, select, textarea {background-color: transparent; /* 清除表单默认背景 */border: 1px solid currentColor;
}
2. 已处理的常见问题
  • 📦 盒模型标准化:全局强制 border-box
  • 🖌️ 元素去样式化:移除 <button><input> 等表单控件的默认样式
  • 📏 间距重置:清除 <body>、标题标签的默认边距
  • 🔠 字体统一:使用系统字体栈,设置合理的字号和行高
  • 🧹 列表样式清理:移除 <ul><ol> 的默认列表符号

二、何时仍需自定义重置?

1. 需要覆盖 Preflight 的默认行为
/* 在 base 层重新启用默认列表样式 */
@layer base {ol, ul {list-style: auto; /* 恢复数字/符号列表 */padding-left: 1.5rem;}
}
2. 处理 Preflight 未覆盖的特殊元素
/* 补充重置 SVG 默认对齐 */
@layer base {svg {vertical-align: middle;}
}
3. 适配第三方库样式冲突
/* 重置第三方日历组件的默认边框 */
@layer base {.third-party-calendar {border: none !important;}
}

三、操作建议

标准工作流(推荐)
  1. 依赖 Preflight
    tailwind.config.js 中确认启用:

    module.exports = {corePlugins: {preflight: true, // 默认已启用}
    }
    
  2. 按需扩展基础样式
    通过 @layer base 补充定制:

    @layer base {/* 自定义标题阶梯字号 */h1 { @apply text-4xl font-bold; }h2 { @apply text-3xl font-semibold; }
    }
    
高级场景处理
  1. 完全禁用 Preflight
    (适用于已有成熟重置方案的项目)

    // tailwind.config.js
    module.exports = {corePlugins: {preflight: false // 关闭内置重置}
    }
    
  2. 选择性保留部分重置
    通过 CSS 变量精细化控制:

    :root {--tw-preflight-body-margin: 0; /* 保留 body 边距重置 */
    }
    

四、与传统 Reset 方案的对比

Normalize.cssTailwind Preflight传统 Reset.css
设计哲学温和修正浏览器差异激进重置 + 适配原子化暴力清除所有默认样式
与 Tailwind 集成需手动适配原生深度集成可能产生冲突
定制灵活性高(通过 config 和 layers)
典型应用场景传统项目新 Tailwind 项目极简主义项目

五、最佳实践总结

  1. 默认信任 Preflight
    95% 的项目无需额外重置,Preflight 已优化适配 Tailwind 生态

  2. 按需扩展而非推翻
    优先使用 @layer base 微调,而非引入完整 reset.css

  3. 保留关键语义化样式
    示例:适当保留 <em> 的斜体、<strong> 的粗体,而不是暴力清除

  4. 注意第三方内容样式
    对渲染富文本(如 CMS 内容)保留必要的重置:

    .prose {/* 使用 Tailwind Typography 插件处理 */
    }
    

通过这种策略,你既能享受 Tailwind 现代化重置方案的优势,又能保持对特殊需求的控制力。

相关文章:

【前端】【tailwind】tailwind默认重置了样式

Tailwind CSS 自身已经内置了现代化的样式重置方案 —— Preflight&#xff08;基于 modern-normalize&#xff09;&#xff0c;这意味着在大多数情况下不需要额外引入传统的 reset.css 或 normalize.css。但具体是否需要补充重置&#xff0c;取决于你的项目需求&#xff0c;以…...

学透Spring Boot — 009. Spring Boot的四种 Http 客户端

目录 常见的HttpClient Spring 提供的HttpClient RestTemplate Spring 提供的模板类 XXXTemplate RestTemplate的使用 RestTemplate的使用技巧 RestTemplate的问题 RestClient RestClinet的基本使用 RestClient的自动配置 RestClient 序列化对象 异常处理 onStatus …...

STM32单片机入门学习——第14节: [6-2] 定时器定时中断定时器外部时钟

写这个文章是用来学习的,记录一下我的学习过程。希望我能一直坚持下去,我只是一个小白,只是想好好学习,我知道这会很难&#xff0c;但我还是想去做&#xff01; 本文写于&#xff1a;2025.04.04 STM32开发板学习——第14节: [6-2] 定时器定时中断&定时器外部时钟 前言开发…...

Python 元组

Python 元组 元组的介绍 元组和列表很像&#xff0c;都是用来保存多个数据使用一对小括号()来表示一个元组元组和列表的区别在于&#xff0c;列表是可变数据类型&#xff0c;而元组是不可变数据类型 nums (9, 4, 3, 1, 9, 7, 6, 9, 3, 9) print(nums) # (9, 4, 3, 1, 9, 7…...

Linux系统编程:进程管理、内存对比与树莓派应用

一、认识进程和线程&#xff0c;在Linux系统下查看系统中各进程的编号pid并终止一个进程pid 1.进程和线程 ​​进程​​&#xff1a;操作系统分配资源&#xff08;如内存、CPU时间片&#xff09;的基本单位。每个进程有独立的内存空间&#xff0c;进程间通信需要较复杂的机制…...

JSON介绍

JSON 的核心特点​​ ​​易读易写​​&#xff1a;纯文本格式&#xff0c;结构清晰&#xff08;像“键值对”的集合&#xff09;。​​通用性强​​&#xff1a;任何语言都能解析或生成 JSON。​​用途广泛​​&#xff1a;常用于前后端数据传输、配置文件、API 接口等。 &am…...

【Cursor】切换主题

右键顶部&#xff0c;把菜单栏勾上 首选项-主题-颜色主题 选择和喜欢的颜色主题即可&#xff0c;一般是“现代深色”...

【C++11(上)】—— 我与C++的不解之缘(三十)

一、C11 这里简单了解一下C发展好吧&#xff1a; C11是C的第二个大版本&#xff0c;也是自C98以来最重要的一个版本。 它引入了大量的更改&#xff0c;它曾被人们称为C0x&#xff0c;因为它被期待在2010年之前发布&#xff1b;但在2011年8月12日才被采纳。 C03到C11花了8年时间…...

python如何把列表中所有字符变成小写

在Python中&#xff0c;你可以使用列表推导式&#xff08;list comprehension&#xff09;结合字符串的.lower()方法&#xff0c;将列表中的所有字符串元素转换为小写。以下是一个示例&#xff1a; # 定义一个包含字符串的列表 strings ["Hello", "WORLD"…...

DEAP数据集介绍

DEAP数据集介绍 0. 数据集摘要1. 文件列表2. 文件详细信息2.1 Online_ratings2.2 Video_list2.3 Participant_ratings2.4 Participant_questionnaire2.5 Face_video.zip2.6 Data_original.zip2.7 Data_preprocessed_matlab.zip 和 Data_preprocessed_python.zip 3. References欢…...

基于RDK X3的“校史通“机器人:SLAM导航+智能交互,让校史馆活起来!

视频标题&#xff1a; 【校史馆の新晋顶流】RDK X3机器人&#xff1a;导览员看了直呼内卷 视频文案&#xff1a; 跑得贼稳团队用RDK X3整了个大活——给校史馆造了个"社牛"机器人&#xff01; 基于RDK X3开发板实现智能导航与语音交互SLAM技术让机器人自主避障不…...

JavaScript基础-window.localStorage

在现代Web开发中&#xff0c;数据存储对于提升用户体验至关重要。window.localStorage 是一种简单而强大的客户端存储机制&#xff0c;允许网页以键值对的形式持久化保存数据。与 sessionStorage 不同&#xff0c;localStorage 中的数据不会因浏览器标签页关闭或刷新而丢失&…...

在航电系统中提高可靠性的嵌入式软件设计

1.总线余度设计 数据传输采用双余度总线设计&#xff0c;CANFD为主&#xff0c;RS485为备。发送方将相同的数据分别通过双总线来发送&#xff0c;接收方优先处理主线数据。由于总线上数据频率固定&#xff0c;可设置定时器监控主总线的数据&#xff0c;当定时器超时后&#xff…...

H.266/VVC SCC技术学习:块差分脉冲编码调整(block differential pulse coded modulation, BDPCM)

近年来&#xff0c;屏幕内容视频广泛用于多媒体应用&#xff0c;例如远程桌面,屏幕共享等。由于屏幕内容视频的特性与自然视频有较大区别&#xff0c;VVC中使用了帧内块复制&#xff08;intra block copy, 即IBC&#xff09;, 调色板&#xff08;Palette&#xff09;&#xff0…...

网络编程—Socket套接字(TCP)

上篇文章&#xff1a; 网络编程—Socket套接字&#xff08;UDP&#xff09;https://blog.csdn.net/sniper_fandc/article/details/146923670?fromshareblogdetail&sharetypeblogdetail&sharerId146923670&sharereferPC&sharesourcesniper_fandc&sharefro…...

数据结构:二叉树(三)·(重点)

二叉树的存储结构 ⼆叉树⼀般可以使⽤两种结构存储&#xff0c;⼀种顺序结构&#xff0c;⼀种链式结构。 顺序结构 顺序结构存储就是使⽤数组来存储&#xff0c;⼀般使⽤数组只适合表⽰完全⼆叉树&#xff0c;因为不是完全⼆叉树会有 空间的浪费&#xff0c;完全⼆叉树更适合…...

StyleTTS 2:文本到语音(Text-to-Speech, TTS)模型

StyleTTS 2 是一种先进的文本到语音&#xff08;Text-to-Speech, TTS&#xff09;模型&#xff0c;通过结合风格扩散&#xff08;style diffusion&#xff09;和对抗训练&#xff08;adversarial training&#xff09;&#xff0c;利用大规模语音语言模型&#xff08;Speech La…...

痉挛性斜颈康复路,饮食要点来相助

痉挛性斜颈患者除了接受正规治疗&#xff0c;合理饮食对缓解症状、促进康复也至关重要。 高蛋白质食物是饮食中的重点。像鸡蛋&#xff0c;富含人体必需的氨基酸&#xff0c;其组成与人体组成模式接近&#xff0c;易于吸收。每天吃 1 - 2 个鸡蛋&#xff0c;能为身体补充修复肌…...

谷歌 Gemini 2.5 Pro 免费开放

2025 年 3 月 30 日&#xff0c;谷歌宣布将最新的 Gemini AI 旗舰模型 Gemini 2.5 Pro 免费向所有 Gemini 应用用户开放。以下是关于此次免费开放的一些具体信息1&#xff1a; 背景&#xff1a;此前&#xff0c;Gemini 2.5 Pro 仅向支付 19.99 美元月费的 Gemini Advanced 用户…...

规则引擎Drools

1.规则引擎概述 1.1 什么是规则引擎 规则引擎 全称为业务规则管理系统&#xff0c;英文名为BRMS&#xff0c;规则引擎的主要思想是将应用程序中的业务决策部分分离出来&#xff0c;并使用预定义的语义模块编写业务规则&#xff0c;由用户或开发者在需要时进行配置和管理。 需…...

第三季:挪威

挪威 挪威是北欧的一个国家&#xff0c;位于斯堪的纳维亚半岛的西部。以下是关于挪威的详细介绍&#xff1a; 地理位置与自然环境 位置&#xff1a;挪威位于北欧&#xff0c;东邻瑞典&#xff0c;东北与芬兰和俄罗斯接壤&#xff0c;西濒挪威海&#xff0c;北临巴伦支海。地…...

搜索与图论 树的深度优先遍历 树的重心

树的一种特殊的图&#xff0c;无环连通图 图还分为有向图&#xff0c;无向图 但是无向图其实也是特殊的有向图 &#xff08;a指向b&#xff0c;b也指向a&#xff0c;每个连接节点都如此&#xff0c;则是无向图&#xff09; 那我们只需要讨论有向图 有向图的分类 邻接矩阵 …...

ORA-09925 No space left on device 问题处理全过程记录

本篇文章关键字&#xff1a;linux、oracle、审计、ORA-09925 一、故障现像 朋友找到我说是他们备份软件上报错。 问题比较明显&#xff0c;ORA-09925&#xff0c;看起来就是空间不足导致的 二、问题分析过程 这里说一下逐步的分析思路&#xff0c;有个意外提前说一下就是我…...

Java开发者の模型召唤术:LangChain4j咏唱指南(三)

Java开发者の模型召唤术&#xff1a;LangChain4j咏唱指南(三) 往期回顾&#xff1a; Java开发者の模型召唤术&#xff1a;LangChain4j咏唱指南(一)Java开发者の模型召唤术&#xff1a;LangChain4j咏唱指南(二) 上两期博客中简单的为大家介绍了 langchain4j是什么、java 集成…...

【leetcode100】动态规划Java版本

70. 爬楼梯 题目 思考的时候觉得情况很多&#xff0c;无从下手&#xff0c;卡在了找推导公式这一步。 看了随想录后知道以简单的三个阶梯来推导dp公式&#xff0c;为什么不是四个&#xff0c;五个为一组呢&#xff1f;因为题目要求的只能爬1个阶梯&#xff0c;或者2个阶梯&…...

RSA和ECC在密钥长度相同的情况下哪个更安全?

​现在常见的SSL证书&#xff0c;如&#xff1a;iTrustSSL都支持RSA和ECC的加密算法&#xff0c;正常情况下RAS和ECC算法该如何选择呢&#xff1f;实际上在密钥长度相同的情况下&#xff0c;ECC&#xff08;椭圆曲线密码学&#xff09;通常比RSA&#xff08;Rivest-Shamir-Adle…...

YOLO 获取 COCO 指标终极指南 | 从标签转换到 COCOAPI 评估 (训练/验证) 全覆盖【B 站教程详解】

✅ YOLO 轻松获取论文 COCO 指标&#xff1a;AP&#xff08;small&#xff0c;medium&#xff0c;large &#xff09;| 从标签转换到 COCOAPI 评估 (训练/验证) 全覆盖 文章目录 一、摘要二、为什么需要 COCO 指标评估 YOLO 模型&#xff1f;三、核心挑战与解决方案 (视频教程核…...

【算法竞赛】dfs+csp综合应用(蓝桥2023A9像素放置)

目录 一、 题目 二、思路 &#xff08;1&#xff09;算法框架选择 &#xff08;2&#xff09;剪枝策略 具体来说就是&#xff1a; 三、代码 (1) 数据读取与初始化 (2) 检查当前填充是否符合要求 (3) 递归 DFS 进行填充 (4) 读取输入 & 调用 DFS (5) 完整代码 一…...

3D点云配准RPM-Net模型解读(附论文+源码)

RPM-Net 总体流程代码数据预处理模型计算 α α α和 β β β特征提取变换矩阵计算损失 论文链接&#xff1a;RPM-Net: Robust Point Matching using Learned Features 官方链接&#xff1a;RPMNet 老规矩&#xff0c;先看看效果。 看看论文里给的对比图 总体流程 在学…...

23种设计模式-行为型模式-命令

文章目录 简介问题解决代码核心设计优势 总结 简介 命令是一种行为设计模式&#xff0c; 它能把请求转换为一个包含与请求相关的所有信息 的独立对象。这个转换能让你把请求方法参数化、延迟请求执行或把请求放在队列里&#xff0c;并且能实现可撤销操作。 问题 假如你正在开…...

ngx_cpystrn

定义在 src\core\ngx_string.c u_char * ngx_cpystrn(u_char *dst, u_char *src, size_t n) {if (n 0) {return dst;}while (--n) {*dst *src;if (*dst \0) {return dst;}dst;src;}*dst \0;return dst; } ngx_cpystrn 函数的作用是安全地将源字符串&#xff08;src&#x…...

常用的国内镜像源

常见的 pip 镜像源 阿里云镜像&#xff1a;https://mirrors.aliyun.com/pypi/simple/ 清华大学镜像&#xff1a;https://pypi.tuna.tsinghua.edu.cn/simple 中国科学技术大学镜像&#xff1a;https://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣镜像&#xff1a;https://pypi.doub…...

【小沐杂货铺】基于Three.JS绘制太阳系Solar System(GIS 、WebGL、vue、react)

&#x1f37a;三维数字地球系列相关文章如下&#x1f37a;&#xff1a;1【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第一期2【小沐学GIS】基于C绘制三维数字地球Earth&#xff08;456:OpenGL、glfw、glut&#xff09;第二期3【小沐…...

Navicat17详细安装教程(附最新版本安装包和补丁)2025最详细图文教程安装手册

目录 前言&#xff1a;为什么选择Navicat 17&#xff1f; 一、下载Navicat17安装包 二、安装Navicat 1.运行安装程序 2.启动安装 3.同意“协议” 4.设置安装位置 5.创建桌面图标 6.开始安装 7.安装完成 三、安装补丁 1.解押补丁包 2.在解压后的补丁包目录下找到“w…...

记忆宫殿APP:全方位脑力与思维训练,助你提升记忆力,预防老年痴呆

记忆宫殿APP&#xff0c;一款专业的记忆训练软件&#xff0c;能去帮你提升自己的记忆能力&#xff0c;多样的训练项目创新的记忆方法&#xff0c;全方面帮你去提升你的记忆能力。 记忆宫殿APP有丰富的记忆训练项目&#xff0c;如瞬间记忆、短时记忆、机械记忆等&#xff0c;以…...

SpringBoot+Spring+MyBatis相关知识点

目录 一、相关概念 1.spring框架 2.springcloud 3.SpringBoot项目 4.注解 5.SpringBoot的文件结构 6.启动类原理 二、相关操作 1.Jar方式打包 2.自定义返回的业务状态码 3.Jackson 4.加载配置文件 5.异常处理 三、优化配置 1.简化sql语句 2.查询操作 复杂查询 一…...

【力扣hot100题】(050)岛屿数量

一开始还以为会很难很难&#xff08;以为暴力搜索会时间超限要用别的办法&#xff09;&#xff0c;没想到并不难。 我最开始是用vector<vector<bool>>记录搜索过的地域&#xff0c;每次递归遍历周围所有地域。 class Solution { public:vector<vector<char…...

Opencv计算机视觉编程攻略-第九节 描述和匹配兴趣点

一般而言&#xff0c;如果一个物体在一幅图像中被检测到关键点&#xff0c;那么同一个物体在其他图像中也会检测到同一个关键点。图像匹配是关键点的常用功能之一&#xff0c;它的作用包括关联同一场景的两幅图像、检测图像中事物的发生地点等等。 1.局部模板匹配 凭单个像素就…...

pat学习笔记

two pointers 双指针 给定一个递增的正整数序列和一个正整数M&#xff0c;求序列中的两个不同位置的数a和b&#xff0c;使得它们的和恰好为M&#xff0c;输出所有满足条件的方案。例如给定序列{1,2,3,4,5,6}和正整数M 8&#xff0c;就存在268和358成立。 容易想到&#xff1…...

MoE Align Sort在医院AI医疗领域的前景分析(代码版)

MoE Align & Sort技术通过优化混合专家模型(MoE)的路由与计算流程,在医疗数据处理、模型推理效率及多模态任务协同中展现出显著优势,其技术价值与应用意义从以下三方面展开分析: 一、方向分析 1、提升医疗数据处理效率 在医疗场景中,多模态数据(如医学影像、文本…...

大数据概念介绍

这节课给大家讲一下大数据的生态架构, 大数据有很多的产品琳琅满目, 大家看到图上就知道产品很多, 那这些产品它们各自的功能是什么, 它们又是怎么样相互配合, 来完成一整套的数据存储, 包括分析计算这样的一些任务, 这节课就要给大家进行一个分析, 那我们按照数据处理…...

Linux(2025.3.15)

1、将/etc/passwd&#xff0c;/etc/shadow,/etc/group文件复制到/ceshi; 操作&#xff1a; &#xff08;1&#xff09;在根目录下创建ceshi目录&#xff1b; &#xff08;2&#xff09;复制&#xff1b; 结果&#xff1a; 2、找到/etc/ssh目录下ssh开头的所有文件并将其复制到…...

centosububntu设置开机自启动

一、centos 1.将脚本放到/etc/rc.d/init.d路径下 2.给脚本授权 sudo chmod -R 777 脚本名称 3.添加脚本至开机启动项中 sudo chkconfig --add 脚本名称 4.开启脚本 sudo chkconfig 脚本名称 on 5.查看开机启动项中是否包含该脚本 ls /etc/rc.d/rc*.d 二、ubuntu 1.在…...

基于大模型与动态接口调用的智能系统(知识库实现)

目录 引言 1、需求背景 2、实现原理 3、实现步骤 3.1 构建知识库接口调用提示模板 3.2 动态接口配置加载 3.3 智能参数提取链 3.4 接口智能路由 3.5 建议生成链 3.6 组合完整工作流 3.7 展示效果 总结 引言 在医疗信息化快速发展的今天,我们开发了一个智能问诊系…...

23种设计模式-行为型模式-迭代器

文章目录 简介问题解决代码设计关键点&#xff1a; 总结 简介 迭代器是一种行为设计模式&#xff0c;让你能在不暴露集合底层表现形式(列表、栈和树等)的情况下遍历集合中所有的元素。 问题 集合是编程中最常使用的数据类型之一。 大部分集合使用简单列表存储元素。但有些集…...

【Java集合】ArrayList源码深度分析

参考笔记&#xff1a; java ArrayList源码分析&#xff08;深度讲解&#xff09;-CSDN博客 【源码篇】ArrayList源码解析-CSDN博客 目录 1.前言 2. ArrayList简介 3. ArrayList类的底层实现 4. ArrayList的源码Debug 4.1 使用空参构造 &#xff08;1&#xff09;开始De…...

ISIS单区域抓包分析

一、通用头部报文 Intra Domain Routing Protocol Discriminator&#xff1a;域内路由选择协议鉴别符&#xff1a;这里是ISIS System ID Length&#xff1a;NSAP地址或NET中System ID区域的长度。值为0时&#xff0c;表示System ID区域的长度为6字节。值为255时&#xff0c;表…...

关键业务数据如何保持一致?主数据管理的最佳实践!

随着业务规模的扩大和系统复杂性的增加&#xff0c;如何确保关键业务数据的一致性成为许多企业面临的重大挑战。数据不一致可能导致决策失误、运营效率低下&#xff0c;甚至影响客户体验。因此&#xff0c;主数据管理&#xff08;Master Data Management&#xff0c;简称MDM&am…...

ISIS单区域配置

一、什么是ISIS单区域 ISIS&#xff08;Intermediate System to Intermediate System&#xff0c;中间系统到中间系统&#xff09;单区域是指使用ISIS路由协议时&#xff0c;所有路由器都位于同一个区域&#xff08;Area&#xff09;内的网络配置。 二、实验拓扑 三、实验目的…...

Visual Basic语言的物联网

Visual Basic语言在物联网中的应用 引言 物联网&#xff08;IoT&#xff09;作为一种新兴的技术趋势&#xff0c;正在深刻地改变我们的生活方式与工业制造过程。在众多编程语言中&#xff0c;Visual Basic&#xff08;VB&#xff09;凭借其简单易用的特性&#xff0c;逐渐成为…...