如何更改 tailwind css 中的渐变方向？

Question

 <div class="bg-gradient-to-r from-cyan-500 to-blue-500 ">

。。。。

我已经尝试过上面的代码。但这是线性渐变，我想要垂直渐变。

Answer 1

但这是线性渐变，我想要垂直渐变。

linear是梯度的一种，vertical是方向。您可能的意思是您有一个horizontal渐变，但实际上您想要一个vertical渐变。两者都会有linear（例如，radialTailwind 中目前不存在梯度，仅linear存在）。

可用于linear渐变的所有默认可用方向：

• bg-gradient-to-t
• bg-gradient-to-tr
• bg-gradient-to-r
• bg-gradient-to-br
• bg-gradient-to-b
• bg-gradient-to-bl
• bg-gradient-to-l
• bg-gradient-to-tl

因此，对于垂直方向，只需使用bg-gradient-to-t（从下到上）或bg-gradient-to-b（从上到下）

文档中的更多信息