Tailwind文本padding与margin在md及以下尺寸显示异常求助

问题现象 #

页面在lg尺寸下显示正常，但在md及更小尺寸时，文本的padding和margin表现不符合预期。

相关代码 #

<motion.div variants={fadeIn('up', 'tween', 0.2, 1)} className="flex flex-col items-center justify-center lg:px-0 lg:py-0">
  <div className="flex flex-row items-center justify-center gap-4">
    <div className="flex flex-col items-center justify-center">
      <span className="absolute bg-gradient-to-r blur-xl from-blue-500 via-teal-500 to-pink-500 bg-clip-text text-2xl md:text-5xl font-extrabold text-transparent md:mt-20">
        {t('Pricing.Flexible')}
      </span>
      <h1 className="relative justify-center text-center select-auto font-poppins text-2xl font-semibold md:text-5xl md:mt-20 bg-gradient-to-r from-blue-500 via-teal-500 to-pink-500 text-transparent bg-clip-text">
        {t("Pricing.Flexible")}
      </h1>
    </div>
    <h1 className="font-poppins text-2xl font-semibold md:text-5xl md:mt-20">
      {t('Pricing.Title')}
    </h1>
  </div>
</motion.div>

问题分析 #

1. 绝对定位元素边距缺失：
   实现渐变模糊效果的<span>为绝对定位，仅设置了md:mt-20，md及以下尺寸无margin值，导致和下方相对定位的<h1>位置重叠或偏移异常。
2. 小尺寸margin未明确设置：
   所有文本元素仅配置了md:mt-20，小尺寸下无对应margin，造成布局紧凑或错位。
3. 容器内边距默认样式干扰：
   外层motion.div仅在lg尺寸设置lg:px-0 lg:py-0，小尺寸下可能继承默认padding，间接影响文本边距表现。

修复方案 #

调整代码，为小尺寸添加明确的边距控制，同时优化绝对定位元素的偏移：

<motion.div variants={fadeIn('up', 'tween', 0.2, 1)} className="flex flex-col items-center justify-center px-4 py-6 lg:px-0 lg:py-0">
  <div className="flex flex-row items-center justify-center gap-4">
    <div className="flex flex-col items-center justify-center">
      {/* 为小尺寸添加mt-8，保留md:mt-20实现响应式偏移 */}
      <span className="absolute bg-gradient-to-r blur-xl from-blue-500 via-teal-500 to-pink-500 bg-clip-text text-2xl md:text-5xl font-extrabold text-transparent mt-8 md:mt-20">
        {t('Pricing.Flexible')}
      </span>
      {/* 小尺寸添加mt-8，和绝对定位元素保持一致偏移 */}
      <h1 className="relative justify-center text-center select-auto font-poppins text-2xl font-semibold md:text-5xl mt-8 md:mt-20 bg-gradient-to-r from-blue-500 via-teal-500 to-pink-500 text-transparent bg-clip-text">
        {t("Pricing.Flexible")}
      </h1>
    </div>
    {/* 该标题同样添加小尺寸mt-8 */}
    <h1 className="font-poppins text-2xl font-semibold md:text-5xl mt-8 md:mt-20">
      {t('Pricing.Title')}
    </h1>
  </div>
</motion.div>

修改说明 #

• 外层容器添加px-4 py-6，明确小尺寸内边距，避免默认样式干扰，同时保留lg:px-0 lg:py-0实现大屏下移除内边距。
• 所有带md:mt-20的元素补充mt-8，确保小尺寸有合适上边距，实现响应式边距过渡。
• 绝对定位<span>和相对定位<h1>使用相同小尺寸margin，保证模糊效果与主文本位置对齐。

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