以下集成内容仅对管理全局 HTML 标签默认样式reset.scss进行说明，如需进行代码对照，可参考目录下 react19_ts 项目内实际代码，文档与代码会在git上持续补充 git仓库地址：https://gitee.com/xiaoli-account/react19_ts> `reset.scss` 管理全局 HTML 标签默认样式。当需要统一修改原生标签样式时，在此文件配置。
> 本文档说明 reset 的设计逻辑，以及 TailwindCSS / Ant Design / 自定义样式之间的冲突处理方案。
1. Reset 文件
文件位置：`src/styles/reset.scss`
覆盖范围：
| |
|---|
| box-sizing: border-box、html/body margin/padding 清零 |
| Webkit 自定义滚动条 + Firefox scrollbar-width: thin |
| h1~h6 层级字号、p 段落间距、blockquote 引用块样式 |
| a |
| input/button/select 统一字体继承、边框、圆角 |
| |
| |
| @media print |
核心设计：使用 `:not([class])` 选择器，只对无 class 的裸标签重置 margin/padding，避免覆盖 Tailwind 工具类和组件库样式。
/* 只重置没有 class 的元素 */*:not([class]),*::before:not([class]),*::after:not([class]) { margin: 0; padding: 0;}
2. 样式冲突处理
遇到样式冲突时，按以下优先级选择方案：
方案一：调整 CSS 加载顺序 ✅ 首选
后加载的 CSS 覆盖先加载的，无副作用。
// src/index.scss — 按此顺序加载@use "tailwindcss"; // 1. Tailwind 基础@use "./styles/reset.scss"; // 2. Reset 重置@use "./styles/global.scss"; // 3. 自定义样式（优先级最高）
方案二：增加选择器层级 ✅ 推荐
通过嵌套父级提高权重，适用于覆盖 Ant Design 等组件库样式。
// ❌ 权重不够，被组件库覆盖.ant-table-cell { padding: 12px;}// ✅ 增加父级，权重提高.my-data-table .ant-table-cell { @apply py-3 px-4;}
方案三：`!important` ⚠️ 最后手段
<!-- Tailwind 语法：类名前加 ! --><divclass="!p-4 !text-red-500">内容</div>
// SCSS 中使用，建议加注释说明原因.my-component { padding: 16px !important; // 覆盖 Ant Design 内联样式}
⚠️ 会破坏 CSS 正常层级关系，嵌套超过 3 层或无节制使用 `!important` 都应避免。
3. 与 Ant Design 冲突处理
原则：优先使用组件 API（`style` / `className`），避免直接修改组件内部类名。
// ✅ 推荐：通过 className 传入 Tailwind 类<Button className="!text-sm" type="primary">按钮</Button>// ✅ 推荐：外层容器控制布局<divclassName="flex items-center gap-2"> <Button>操作1</Button> <Button>操作2</Button></div>// ⚠️ 需要深度定制时：增加选择器层级.my-layout { .ant-btn { @apply flex items-center; }}
4. 排查流程
样式不生效 ↓1. DevTools → Elements → Styles 面板，查看哪条规则生效/被划线 ↓2. 检查 CSS 加载顺序（@use 顺序） ↓3. 检查选择器权重（是否被更高权重覆盖） ↓4. 针对性处理：调整顺序 → 增加层级 → !important
