如何解决Tailwind CSS设置输入框outline-width不生效的问题？

原因分析 #

Tailwind的outline-4类仅设置outline-width属性，但元素默认的outline-style为none，因此即使设置了宽度，轮廓也不会显示。另外浏览器默认仅在元素聚焦状态下才会渲染outline样式。

两种修复方式 #

• 始终显示轮廓：添加outline-solid（或outline-dashed等样式类），让轮廓可见：

<input class="border-2 border-rose-600 block rounded-lg outline-rose-600 outline-4 outline-solid">

• 仅聚焦时显示轮廓：使用Tailwind的:focus前缀，配合样式类实现聚焦状态下的轮廓效果：

<input class="border-2 border-rose-600 block rounded-lg focus:outline-rose-600 focus:outline-4 focus:outline-solid">

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