如何将指定CSS线性渐变转为Tailwind语法？尝试后未生效

你的写法不生效的核心原因是Tailwind会把类名里的空格识别为不同类的分隔符，你自定义渐变里的空格导致这个样式被拆分成了多个无效的类。

你可以用以下两种方法正确转换：

方法1：替换渐变参数里的空格为下划线 #

把线性渐变中参数之间的空格换成下划线，让Tailwind识别为一个完整的类：

<button class="py-2 px-6 bg-[linear-gradient(159deg,_#3CC_0%,_#00AFCB_100%)]">
  Download Now
</button>

方法2：用单引号包裹完整的渐变值 #

把整个linear-gradient表达式用单引号包裹，确保Tailwind将其作为一个完整的自定义属性值解析：

<button class="py-2 px-6 bg-['linear-gradient(159deg, #3CC 0%, #00AFCB 100%)']">
  Download Now
</button>

两种方法都能正确还原你想要的background: linear-gradient(159deg, #3CC 0%, #00AFCB 100%);样式效果。

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