如何为Tailwind CSS仅设置border-color属性的过渡效果？

想要实现只在修改输入框边框颜色时触发平滑过渡、文本颜色变化时不触发的效果，有两种简单可行的方法：

方法一：自定义Tailwind过渡属性类 #

直接在tailwind.config.js里扩展过渡属性，新增一个只针对border-color的配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        'border': 'border-color',
      },
    },
  },
  plugins: [],
}

配置完后，就可以用transition-border代替默认的transition-color，再搭配默认的时长和缓动类就行，比如：

<input class="border border-gray-300 hover:border-blue-500 transition-border duration-150 ease-in-out" />

方法二：直接指定过渡属性 #

如果不想改配置文件，有两种快速实现方式：

• 内联样式：直接在元素上写过渡属性

<input class="border border-gray-300 hover:border-blue-500 duration-150 ease-in-out" style="transition-property: border-color;" />

• 自定义CSS类：写一个专属的过渡类，复用性更高

.transition-border-only {
  transition-property: border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

然后给元素加上这个类：

<input class="border border-gray-300 hover:border-blue-500 transition-border-only" />

提示：默认的transition-color会同时作用于多个颜色相关属性，所以必须用自定义的过渡规则来限定只对border-color生效。

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