如何在Tailwind中合并自定义过渡工具类并精简类名？

可以通过Tailwind配置里的主题扩展+自定义插件，一次性搞定三种过渡场景，既消除代码重复，又保持类名简洁：

步骤1：修改tailwind.config.js配置 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      // 预设需要的过渡属性集合
      transitionProperty: {
        'color': 'color',
        'bg': 'background-color',
        'link': 'color, text-decoration-color'
      }
    }
  },
  plugins: [
    function({ matchUtilities, theme }) {
      // 自动生成对应的transition工具类
      matchUtilities(
        {
          transition: (value) => ({
            transitionProperty: value,
            transitionTimingFunction: theme('transitionTimingFunction.DEFAULT'),
            transitionDuration: theme('transitionDuration.DEFAULT'),
          }),
        },
        { values: theme('transitionProperty') }
      )
    }
  ]
}

步骤2：直接用简洁类名对应三种场景 #

• 文本颜色过渡：使用transition-color（无冗余前缀，类名简洁）
• 背景色过渡：使用transition-bg
• 链接复合过渡（颜色+下划线颜色）：使用transition-link

可选：自定义过渡时长/曲线 #

如果某个场景需要特殊的过渡速度或曲线，直接叠加Tailwind自带的工具类即可：

<a class="transition-link duration-700 ease-in-out">Hover me</a>

方案优势 #

• 所有过渡类共享一套基础配置（默认时长、曲线），彻底消除重复代码
• 新增过渡场景只需在transitionProperty里添加键值对，自动生成对应工具类
• 复合过渡场景直接在预设中定义多属性集合，完美满足transition-link这类需求

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