Tailwind自定义边框色CSS计算值与实际显示不一致问题

问题根因 #

• 你仅给按钮添加了border-myCustomColor自定义颜色类，未补充Tailwind基础的border类，此时按钮会沿用浏览器内置<button>元素的默认边框样式outset。该样式是浏览器原生实现的立体浮雕效果，会自动给上下左右边框叠加不同亮度模拟凸起状态，属于浏览器底层UI渲染逻辑，不会在CSS计算样式面板中体现，因此会出现计算样式四边参数一致、实际显示颜色有差异的情况。
• 部分浏览器会给原生按钮加载专属的用户代理样式，若未主动关闭系统控件默认外观，哪怕CSS层面写了统一边框参数，浏览器仍会走系统原生控件渲染逻辑，同样不会在计算样式中体现对应的覆盖规则。

解决方案 #

• 补全Tailwind边框基础类：在按钮的类名中添加border border-solid，显式指定边框宽度和实线样式，覆盖默认的outset属性。
• 禁用原生按钮系统外观：添加appearance-none类，彻底关闭浏览器对按钮的原生控件渲染逻辑。
• 如果调整后仍存在差异，可显式强制指定四边边框参数：border-[1px] border-solid border-myCustomColor，覆盖所有潜在的默认样式。

样式不符疑问说明 #

CSS计算样式面板仅会展示CSS解析层生成的样式属性值，而浏览器对原生控件的特殊渲染（比如outset边框的明暗变化、系统控件的默认外观）属于浏览器UI层的内置渲染逻辑，不属于CSS属性覆盖或样式继承的范畴，因此不会在计算样式面板中体现对应的条目。

内容的提问来源于stack exchange，提问作者rubie