在Vue3后台管理系统选型的过程中，发现了Vexip UI这个vue3 组件库，与element plus比不算很知名，但是效果非常不错。
尤其是Input文本框等选中后的效果，看了后直呼惊艳。
瞬间欲罢不能，一定要在自己的工程中使用该效果。
有两种方式，第一种是直接使用Vexip UI，也很简单；第二种是在现有的基础上模仿，复刻这种效果。
由于我的前端工程是AI设计生成的，直接输出源码，源码默认是vue3+tailwind CSS。一个个把tailwind改成Vexip挺费劲，另外就因为一个效果引入Vexip包也不值当。
于是开始了模仿之旅，画虎不成反类犬，刻鹄不成尚类鹜。在AI的助力下，经过1天多的折腾，总算扒出了对应的效果。动效就不演示了。
先看AI 生成的默认的tailwind css效果
复刻后的效果，边框如钻石切割，带光晕，带渐变，带动效。个人感觉比Vexip UI更符合我的要求一点。
拿走不谢，Tailwind CSS 3.4.17 版本，对应的tailwind css class ：
<input
v-model="searchForm.name"
type="text"
placeholder="请输入物品名称"
class="w-full py-2 text-center border border-gray-300 rounded outline-none
transition-all duration-300 ease-in-out
hover:border-blue-400 focus:border-blue-500
focus:ring-3 focus:ring-blue-500/50
focus:shadow-[0_0_9px_rgba(66,153,215,0.5)]
focus:z-10 text-sm"
/>
另外，此class效果也适用select等其他组件。