TailwindCSS中hover:scale悬停缩放效果失效问题求助

问题根源在于<a>标签默认是inline元素，scale这类transform属性对纯inline元素不生效。只需给链接添加inline-block类，将其转为块级行内元素，就能正常触发缩放效果。

修改后的完整代码：

import React from "react";
const currentDate = new Date().getFullYear();
import packageFile from "@/../package.json";

function Footer() {
  return (
    <footer className="flex justify-center py-[8px]">
      <p className="text-gray-500 text-[10px]">
        {currentDate} © website.com /{" "}
        <a href="mailto:test@email.com" className="text-sky-500 inline-block hover:scale-150 transition-transform duration-300">test@email.com</a> / v
        <span>{packageFile.version}</span>
      </p>
    </footer>
  );
}

export default Footer;

额外优化说明：

• inline-block：让元素支持transform属性，是缩放生效的核心
• transition-transform duration-300：给缩放添加平滑过渡动画，提升交互体验

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