如何在TailwindCSS中为渐变颜色设置高度限制？

当然可行，Tailwind支持两种方式实现你要的这种精确控制渐变颜色位置的效果：

方式一：使用任意值语法直接编写 #

直接在bg-[]中写入原生CSS的渐变语句即可，和你给出的CSS写法几乎一致：

<div class="bg-[linear-gradient(#fff_49%,#F62559_49%_51%,#fff_51%)]"></div>

方式二：自定义可复用的渐变类 #

如果需要在多个地方复用这个渐变，可以在tailwind.config.js中扩展自定义背景图：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'thin-red-stripe': 'linear-gradient(#fff 49%, #F62559 49% 51%, #fff 51%)',
      },
    },
  },
}

之后就可以像使用内置类一样调用：

<div class="bg-thin-red-stripe"></div>

Tailwind的内置渐变类（比如你用到的bg-gradient-to-t）是预设的方向渐变方案，适合简单的渐变场景；而当需要精确控制颜色的起始/结束位置百分比时，使用任意值语法或自定义扩展类就能完全实现原生CSS的效果。

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