如何用TailwindCSS实现表单输入框的渐变聚焦环？

原生Tailwind的focus:ring系列类基于box-shadow实现，不支持渐变效果，所以得用伪元素来模拟渐变聚焦环，下面是具体实现方案：

核心思路 #

用父容器包裹输入框，通过父容器的伪元素绘制渐变边框，默认隐藏；当输入框聚焦时，利用focus-within状态触发伪元素显示，同时确保伪元素不遮挡输入框交互。

代码示例 #

<!-- 渐变聚焦环输入框 -->
<div class="relative">
  <input
    type="text"
    class="w-full rounded-md border-2 border-transparent bg-white px-4 py-2 focus:outline-none transition-all duration-200"
    placeholder="点击输入试试"
  />
  <!-- 渐变聚焦环伪元素 -->
  <div class="absolute inset-0 rounded-md bg-gradient-to-r from-blue-400 to-purple-500 opacity-0 focus-within:opacity-100 focus-within:scale-100 scale-98 transition-all duration-200 pointer-events-none -z-10"></div>
</div>

代码说明 #

• 父容器设relative，为伪元素提供定位基准
• 输入框设置border-transparent和focus:outline-none，清除默认边框与聚焦样式，避免冲突
• 伪元素用absolute inset-0铺满父容器，背景设置渐变配色，默认opacity-0隐藏
• focus-within状态触发时，伪元素恢复透明度与缩放比例，实现聚焦显示效果
• pointer-events-none确保伪元素不干扰输入框交互，-z-10让伪元素在输入框下方，不遮挡内容

自定义调整 #

• 修改bg-gradient-to-r后的颜色值，可替换成你需要的渐变配色
• 调整inset值（比如inset:-1px）能改变聚焦环的粗细
• 移除scale相关类可取消缩放动画，仅保留透明度变化

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