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

Question

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

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

此代码只更改大纲的颜色，而不更改大纲的宽度。请帮我解决这个问题。

Answer 1

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

​

<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>

​