边框
用于控制元素轮廓样式的实用工具。
| 类名 | 样式 |
|---|---|
outline-solid | 轮廓样式：实线； |
outline-dashed | 轮廓样式：虚线； |
outline-dotted | 轮廓样式：点状线； |
outline-double | 轮廓样式：双线； |
outline-none | 轮廓样式：无； |
outline-hidden | 轮廓：2px 实线 透明；轮廓偏移：2px； |
使用 outline-solid 和 outline-dashed 等实用工具来设置元素轮廓的样式
outline-solid
outline-dashed
outline-dotted
outline-double
<button class="outline-2 outline-offset-2 outline-solid ...">Button A</button><button class="outline-2 outline-offset-2 outline-dashed ...">Button B</button><button class="outline-2 outline-offset-2 outline-dotted ...">Button C</button><button class="outline-3 outline-offset-2 outline-double ...">Button D</button>使用 outline-hidden 实用工具来隐藏焦点元素上的默认浏览器轮廓，同时在强制颜色模式下仍然保留轮廓
尝试在您的开发者工具中模拟 forced-colors: active 来查看效果
<input class="focus:border-indigo-600 focus:outline-hidden ..." type="text" />强烈建议在使用此实用工具时，为了可访问性，应用您自己的焦点样式。
使用 outline-none 实用工具来完全移除焦点元素上的默认浏览器轮廓
<div class="focus-within:outline-2 focus-within:outline-indigo-600 ..."> <textarea class="outline-none ..." placeholder="Leave a comment..." /> <button class="..." type="button">Post</button></div>强烈建议在使用此实用工具时，为了可访问性，应用您自己的焦点样式。
前一个 outline-style 实用工具 与像 md: 这样的断点变体一起使用，以仅在以下情况下应用该实用工具：中等 屏幕尺寸及以上
<div class="outline md:outline-dashed ..."> <!-- ... --></div>在变体文档中了解更多关于使用变体的信息。