Tailwind 文本填充和边距在 md 上并不完美

Question

我的代码有问题

<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>

在“lg”上它是完美的，如下所示：

但是在 md 及以下

有人可以帮助我吗？ 谢谢你的回答:)

Answer 1

试试这个

import { motion } from 'framer-motion';

const fadeIn = (direction = 'up', type = 'tween', duration = 0.2, delay = 0) => {
  return {
    initial: {
      opacity: 0,
      y: direction === 'up' ? 20 : direction === 'down' ? -20 : 0,
      x: direction === 'left' ? 20 : direction === 'right' ? -20 : 0,
    },
    animate: {
      opacity: 1,
      y: 0,
      x: 0,
      transition: {
        type: type,
        duration: duration,
        delay: delay,
      },
    },
  };
};

const MyComponent = () => (
  <motion.div
    variants={fadeIn('up', 'tween', 0.2, 1)}
    className="flex flex-col items-center justify-center px-4 py-4 lg:px-0 lg:py-0"
  >
    <div className="flex flex-col items-center justify-center gap-4 md:flex-row">
      <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-xl md:text-2xl lg:text-5xl font-extrabold text-transparent mt-10 md:mt-20"
        >
          {t('Pricing.Flexible')}
        </span>
        <h1
          className="relative justify-center text-center select-auto font-poppins text-xl md:text-2xl lg:text-5xl font-semibold mt-10 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-xl md:text-2xl lg:text-5xl font-semibold mt-10 md:mt-20"
      >
        {t('Pricing.Title')}
      </h1>
    </div>
  </motion.div>
);

export default MyComponent;

我希望这对你有用。