React+Vite环境下Tailwind CSS内边距不一致问题求助

问题原因 #

你通过外层div的padding模拟渐变边框，但存在两个核心问题：

1. 内外两层圆角半径不匹配（外层rounded-lg，内层rounded-md），导致角落处的渐变边框被内层小圆角截断，视觉上呈现内边距不一致；
2. hover时内层卡片scale-110放大，会超出外层容器，破坏边框的完整性。

最优解决方案：使用双重背景实现渐变边框 #

无需外层嵌套div，直接给卡片容器添加渐变边框，通过background-clip区分内容背景和边框背景，完美解决内边距和缩放问题：

const PlanCard = ({ price, features, onHover, isHovered }) => {
  return (
    <div
      className={`relative w-full min-w-xs flex flex-col max-w-xs p-6 rounded-md shadow-lg transition-all duration-300 ease-in-out
        border-2 border-transparent
        ${isHovered 
          ? 'bg-[linear-gradient(to_bottom,_purple-900,_purple-600)_padding-box,_linear-gradient(to_bottom,_purple-900,_purple-600)_border-box] text-white scale-110' 
          : 'bg-[linear-gradient(to_bottom,_white,_white)_padding-box,_linear-gradient(to_bottom,_purple-900,_purple-500)_border-box]'
        }`}
      onMouseEnter={onHover}
      onMouseLeave={onHover}
    >
      <h2 className="text-2xl font-bold mb-4">{price}</h2>
      <ul className="text-left">
        {features.map((feature, index) => (
          <li key={index} className="mb-2">
            <h3 className="font-semibold">{feature.title}</h3>
            <ul className="list-disc list-inside">
              {feature.points.map((point, idx) => (
                <li key={idx}>{point}</li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
      <button className="mt-4 w-full 
        bg-purple-500 text-white py-2 rounded hover:bg-purple-700 active:bg-purple-900 active:scale-90">
        SELECT
      </button>
    </div>
  );
};

export default PlanCard;

关键改动说明 #

• 移除外层嵌套div，简化DOM结构；
• 使用border-2 border-transparent设置透明边框，为渐变边框预留固定厚度空间；
• 通过双重背景实现分层效果：
  • linear-gradient(to_bottom, white, white) padding-box：内容区域的白色背景，仅填充padding以内的范围；
  • linear-gradient(to_bottom, purple-900, purple-500) border-box：边框区域的渐变背景，填充border以内的范围；
• hover时将内容背景替换为紫色渐变，保持与边框视觉统一，配合scale-110实现整体放大效果；
• 修正无效类min-w-50为Tailwind内置的min-w-xs（对应最小宽度200px）。

备选方案：修复嵌套div的内边距问题 #

如果坚持使用嵌套div的方式，可通过以下调整临时解决：

• 外层div和内层div使用相同圆角：将外层rounded-lg改为rounded-md；
• 外层添加overflow-hidden，避免hover时内层卡片超出容器；
• 确保内外层的padding和圆角完全匹配：

<div className="p-0.5 rounded-md bg-gradient-to-b from-purple-900 to-purple-500 overflow-hidden">
  <div
    className={`w-full min-w-xs flex flex-col max-w-xs p-6 rounded-md shadow-lg transition-all duration-300 ease-in-out ${
      isHovered ? 'bg-gradient-to-b from-purple-900 to-purple-600 text-white scale-110' : 'bg-white'
    }`}
    onMouseEnter={onHover}
    onMouseLeave={onHover}
  >
    {/* 卡片内容 */}
  </div>
</div>

但此方案hover放大时，外层边框不会跟随放大，视觉连贯性不如双重背景方案。

内容的提问来源于stack exchange，提问作者Uday Pratap Chauhan