Your NameandClaude Sonnet 5
fb1fda689c
根因：Material Icons的Google Fonts样式表(index.html的<link>)自己的 .material-icons规则完全没有@layer包裹（纯普通CSS），而Tailwind v4的 每一个工具类都在@layer utilities里——CSS Cascade Layers规范规定，任 何未分层的声明，不管选择器优先级多高、样式表加载顺序多晚，永远优先于 任何分层声明。实测坐实：<Icon className="text-[14px]">的计算样式恒 定是font-size:24px，不管试图覆盖成几px都没用，因为Google那条未分层 规则永远赢。这不是某一处的问题，是Icon组件全局的、此前从未被发现的 系统性bug——历史上多轮视觉审查用截图核对布局，没人具体去量过某个 图标的computed font-size。 修复：Icon.tsx改用自己的im-icon类名，不再用material-icons这个 Google样式表实际瞄准的类名，这样那条未分层规则从一开始就不会匹配到 这些元素。index.css里用@layer base原样照抄了Material Icons自己那条 规则的视觉默认值(24px/line-height:1等)，套上分层之后，Tailwind自己 的@layer utilities（在Tailwind的层注册顺序里排在base之后）就能正常 覆盖它了——和每一处写`text-[Npx]`时本来就该有的效果一致。 全局仓库搜索确认material-icons这个类名只有Icon.tsx一处引用，改动范围 可控、不涉及其它代码路径。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the Oxlint configuration
If you are developing a production application, we recommend enabling type-aware lint rules by installing oxlint-tsgolint and editing .oxlintrc.json:
{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"plugins": ["react", "typescript", "oxc"],
"options": {
"typeAware": true
},
"rules": {
"react/rules-of-hooks": "error",
"react/only-export-components": ["warn", { "allowConstantExport": true }]
}
}
See the Oxlint rules documentation for the full list of rules and categories.