Tailwind CSS 是一款流行的 CSS 框架，它具有丰富的类集合和易于使用的 API，可以快速地构建漂亮和响应式的用户界面。
在 Tailwind CSS 中，我们可以方便地修改输入框的大小、颜色、边框样式等样式。然而，当输入框获得焦点时，我们很可能需要修改它的边框颜色，以便更好地提示用户当前输入框正在被操作。
如何使用 Tailwind CSS 修改输入框 focus 的边框颜色？
首先，我们需要在 HTML 中创建一个输入框：
<input type="text" class="border border-gray-400 p-2 outline-none focus:border-blue-500">
在这个输入框中，我们使用了 Tailwind CSS 的边框样式，边框的颜色为灰色，边框宽度为 1 像素。我们还使用了 padding 和 outline-none 属性来调整输入框的内边距和去掉输入框的聚焦边框。
为了在输入框获得焦点时修改边框颜色，我们需要添加一个 focus:border-<color> 类，其中 <color> 表示我们需要设置的边框颜色。在上面的例子中，我们设置了边框颜色为蓝色：
<input type="text" class="border border-gray-400 p-2 outline-none focus:border-blue-500">
当输入框获得焦点时，边框的颜色将变为蓝色，以提示用户当前输入框正在被操作。
更多的 Tailwind CSS 输入框样式修改技巧
除了修改输入框的边框颜色，Tailwind CSS 还提供了丰富的类集合，可以轻松地修改输入框的大小、颜色和边框样式。
例如，我们可以使用 w-full 类来设置输入框的宽度为父元素的宽度，并使用 placeholder-gray-400 类来设置输入框的占位文本颜色。另外，我们还可以使用 hover 和 focus 类来设置输入框在鼠标悬停或获得焦点时的样式。下面是一个示例代码：
<input type="text" class="border border-gray-400 p-2 outline-none placeholder-gray-400 w-full hover:border-gray-500 hover:shadow-md focus:border-blue-500">
在这个代码中，我们设置了输入框的边框颜色为灰色，占位文本颜色为灰色，宽度为父元素的宽度。当鼠标悬停在输入框上时，边框将变为深灰色，输入框将有阴影效果。当输入框获得焦点时，边框将变为蓝色。
结论
Tailwind CSS 是一个非常实用和易于使用的 CSS 框架，它提供了丰富的类集合和易于使用的 API，可以快速地构建漂亮和响应式的用户界面。在使用 Tailwind CSS 构建输入框时，我们可以使用 focus:border-<color> 类来设置输入框获得焦点时的边框颜色，并结合其他类来设置输入框的大小、颜色和边框样式，以提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670cbd815f551281025b87c7