如何使用顺风css在输入框中设置轮廓宽度？

Question

根据顺风 css 官方文档，我可以使用 outline-4 class 将轮廓宽度设置为 4px 但是当我尝试在我的 HTML 代码上写这个时，轮廓的宽度没有变化。 这是代码：

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

此代码仅更改轮廓的颜色，但不更改轮廓的宽度。 请帮助解决此问题。

Answer 1

一件事是您只能使用border-4来加厚边框而不是outline 。 另一件事是您也可以使用ring class。

 <script src="https://cdn.tailwindcss.com"></script> <div class="flex flex-col space-y-8 p-10"> <input class="block rounded-lg border-4 border-rose-600" /> <input class="block rounded-lg ring-4 ring-green-600" /> </div>